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