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>

效果图:

  • 改变前的值:

- kendo ui grid

  • 改变后的值:kendo ui gridkendo 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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值