最新最全的
KendoUI技术文章

通过 Form 表单结合 MVVM 查询Grid表格数据

HTML:

<div class=”selector”>
  Edit Product: <input type=”text”id=”products”/>
</div>
<div id=”container”class=”container”>
<ul>
  <li>
    <label>ID</label>
    <span data-bind=”text:ProductID”></span>
  </li>
  <li>
    <label>Name</label>
    <input type=”text” id=”products” class=”k-textbox” data-bind=”value: ProductName”/>
  </li>
  <li>
    <label>UnitPrice</label>
    <input type=”text” data-role=”numerictextbox” data-bind=”value: UnitPrice”/>
  </li>
  </ul>
  <button id=”save”>Save</button>
</div>
Javascript:
var crudServiceBaseUrl ="http://demos.kendoui.com/service",
    dataSource =new kendo.data.DataSource({
        transport: {
            read: {
                url: crudServiceBaseUrl +"/Products",
                dataType: "jsonp"
            },
            update: {
                url: crudServiceBaseUrl +"/Products/Update",
                dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
                if (operation !=="read"&& options.models) {
                    return {
                        models: kendo.stringify(options.models)
                    };
                }
            }
        },
        batch: true,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: {
                        editable: false,
                        nullable: true
                    },
                    ProductName: { type: "string" },                   
                    UnitPrice: { type: "number"}
                }
            }
        }
    });

$("#products").kendoDropDownList({
    dataSource: dataSource,
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    change: function() {
        var model = dataSource.get(this.value());
        kendo.bind($("#container"), model);
    }
}).data("kendoDropDownList")
  .one("dataBound", function() {
      kendo.bind($("#container"), dataSource.view()[0]);
  });


$("button").click(function() {
    dataSource.sync();
});

未经允许,不得转载本站任何文章:KendoUI中文网 » 通过 Form 表单结合 MVVM 查询Grid表格数据

分享到:更多 ()

评论 2

评论前必须登录!