Knockout绑定EasyUi的datagrid

　　Knockout不提供对datagrid的绑定，但是可以通过自定义绑定来实现。

　　自定义绑定代码如下：

　　

1 /*                                EasyUi datagrid                                              */
2        ko.bindingHandlers.datagrid = {
3            init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
4                var value = ko.utils.unwrapObservable(valueAccessor());
5                viewModel.grid.datagridDOM=$(element);
6                $(element).attr("class", "easyui-datagrid");
7                $(element).datagrid(value);
8            }
9        };

　　前台html代码：

 1  <table id="gridlist" data-bind="datagrid:grid">
 2             <thead>
 3                 <tr>
 4                     <th field="id" width="100" hidden="true">id</th>
 5                     <th field="code" width="100">产品编号</th>
 6                     <th field="name" width="100">名称</th>
 7                     <th field="price" width="100">价格</th>
 8                     <th field="provinceId" width="100">省份编号</th>
 9                     <th field="provinceText" width="100">省份</th>
10                     <th field="dates" width="100">时间</th>
11                 </tr>
12             </thead>
13         </table>

　　Js代码如下：

 1  <script type="text/javascript">
 2             var viewModel = function (data) {
 3                 var self = this;
 4                 self.grid = {
 5                     url: data.datagridUrl,
 6                     toolbar: '#toolbar',
 7                     pagination: true,
 8                     singleSelect: true
 9                 };
10             }
11             ko.applyBindings(new viewModel(data));
12         </script>

 

posted @ 2014-08-22 09:50  晨梦花开  阅读(1425)  评论(0)  编辑  收藏  举报