0

我正在使用一个 Kendo 编辑框，用户可以输入 SQL 连接字符串的不同部分（服务器名称、数据库、用户名和密码）。我还有一个文本框，可以在用户键入时显示整个连接字符串。

我的问题是当用户在每个文本框中输入数据时，如何将四个文本框（服务器、数据库、用户和密码）中的每一个数据绑定到一个文本框。

此外，用户请求单独的字段。

在此先感谢，丹 Plocica

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 中有两个部分：

  1. 我在其中定义每个输入到它在我的模型中绑定的字段的输入文件。
  2. div我发现它的文本在connection我的模型中起作用，该模型从不同的值创建一个字符串。

这是自动更新的，您可以自由编辑每个输入。

您可以input像我一样将它的 CSS 类设置为来装饰k-textbox，这是可选的。唯一重要的是data-bind="value : ...".

JavaScript 只是Observable使用我们想要的字段和方法创建和对象。

在此处运行示例：http: //jsfiddle.net/OnaBai/xjNMf/

于 2013-07-22T17:27:39.263 回答
0

我将使用 jQuery JavaScript 库编写解决方案，您应该使用 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 回答