kendo UI 中实现在grid中实现刷新特定项值的功能

kendo UI 中实现在grid中实现刷新特定项值的功能

今天遇到一个需求，在使用kendo ui的系统中在grid行程的表格中通过改变一个项的值同时刷新另一个项的值

• 听说使用angulas或者vue双项绑定很容易实现？ 但是本人不是专业前端，所以不是很了解， 最后通过kendo ui的api实现的，使用kendo ui 的朋友可以参考下，线上代码

<div id="grid"></div>
<script>
//定义一个dataSource用于后面的刷新
var dataSource = new kendo.data.DataSource({
    schema: {
        model: {
          id: "id"  //定义data的标识，用于后面的pushUpdate
        }
  },
  data: [ {id:1, name: 3,name1:1 }, {id:2, name: 4,name1:2 } ]
});
var g = $("#grid").kendoGrid({
  columns: [ {
    field: "name",
    editor:function(container,options){
         var input = $("<input/>");
         // set its name to the field to which the column is bound ('name' in this case)
         input.attr("name", options.field);
         console.log(options.field);
         input.appendTo(container);
         input.kendoNumericTextBox({
           format: "p0",
           factor: 100,
           min: 0,
           max: 100,
           step: 0.01,
           //绑定change事件用于监听input值得改变
           change:function(){
                //刷新后的值
                var newdata = 5; 
                //通过get找到id为1的记录
                var dataItem = dataSource.get(1); 
                //改变值
                dataItem.name1 = newdata
                //刷新到dataSource中，需要注意的是pushSource会通过id刷新值
                dataSource.pushUpdate(dataItem);
                //刷新grid中的数据
                dataSource.read();
           }            
        });
    }
  } ,
  {
    field:"name1",
    editor: function(container, options) {
     var input = $("<input/>");
     input.attr("name", options.field);
     console.log(options.field);
     input.appendTo(container);
     input.kendoNumericTextBox({
           format: "p0",
           factor: 100,
           min: 0,
           max: 100,
           step: 0.01
        });
    }
  }
  ],
  editable: true,
  dataSource : dataSource
});
</script>

效果图：

• 改变前的值：

-

• 改变后的值：

因为设置了number field 的最大值所以左上的值最后变为了100病史我输入的值，而同时右上的值已被刷新了

参考kendo ui官网：

---

[1]: 官方ui文档datasource: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource
[2]: 官方文档grid: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid