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

  • Post author:
  • Post category:其他


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>

效果图:


  • 改变前的值:


kendo ui grid


  • 改变后的值:
    kendo ui grid
    kendo ui grid


因为设置了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



版权声明:本文为zmjmvp原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。