0

ユーザーが SQL 接続文字列のさまざまな部分 (サーバー名、データベース、ユーザー名、およびパスワード) を入力できる Kendo 編集ボックスを使用しています。また、ユーザーが入力した接続文字列全体を表示するテキスト ボックスもあります。

私の質問は、ユーザーが各テキスト ボックスにデータを入力するときに、4 つのテキスト ボックス (サーバー、データベース、ユーザー、およびパスワード) のそれぞれを 1 つのテキスト ボックスにデータ バインドする方法です。

また、ユーザーは別のフィールドを要求しました。

前もって感謝します、ダン・プロシカ

4

2 に答える 2

1

Kendo UI を使用してそれを行うと、次のようになります。

HTML:

<div id="form">
    <label>Server : <input type="text" class="k-textbox" data-bind="value: server"></label><br/>
    <label>Database : <input type="text" class="k-textbox" data-bind="value: db"></label><br/>
    <label>User : <input type="text" class="k-textbox" data-bind="value: user"></label><br/>
    <label>Password : <input type="password" class="k-textbox" data-bind="value: password"></label><br/>

    <div id="connections" data-bind="text: connection"></div>
</div>

JavaScript:

$(document).ready(function () {
    var model = kendo.observable({
        server    : "localhost:1521",
        db        : "database",
        user      : "scott",
        password  : "tiger",
        connection: function () {
            return this.get("user") + "/" +
                    this.get("password") + "@" +
                    this.get("server") + ":" +
                    this.get("db");
        }
    });
    kendo.bind($("#form"), model);
});

HTML には、次の 2 つの部分があります。

  1. モデル内でバインドされるフィールドへの各入力を定義する入力ファイル。
  2. さまざまな値から文字列を作成するモデルで機能するdivテキストを見つけた場所。connection

これは自動的に更新され、各入力を自由に編集できます。

inputCSS クラスを に設定したのと同じように を装飾することができますが、これはk-textboxオプションです。唯一の重要なことは、data-bind="value : ...".

JavaScript は、Observable必要なフィールドとメソッドを使用してオブジェクトを作成するだけです。

ここでの実行例: http://jsfiddle.net/OnaBai/xjNMf/

于 2013-07-22T17:27:39.263 に答える
0

jQuery JavaScript ライブラリを使用してソリューションを作成します。jQuery を使用する必要があります。jQuery を使用する方がはるかに読みやすく、さまざまなブラウザーでのエラーを回避できるからです。

**HTML**
Server: <input type="text" id="server"/><br/>
Database: <input type="text" id="database"/><br/>
Username: <input type="text" id="username"/><br/>
Password: <input type="text" id="password"/><br/>
<br/>
Full CS: <input type="text" id="solution"/><br/>

JS

<script type="text/javascript">
   var _template = 'Data Source=%server%;Initial Catalog=%db%;Persist Security Info=True;User ID=%user%;Password=%pass%';

   $(document).ready(function(){
       $('#server,#database,#username,#password').keyup(function(){ updateSolution();});

    });
     function updateSolution(){
      var _t = _template.replace('%server%', $('#server').val()).replace('%db%', $('#database').val()).replace('%username%', $('#username').val()).replace('%pass%', $('#password').val());

       $('#solution').val(_t);
     };
</script>
于 2013-07-22T16:33:10.387 に答える