1.改变数据
第一种方法:
dataSource:{ transport: { read: function (operation) { var data = operation.data.data || []; operation.success(data); } }, } $("#grid").data("kendoGrid").dataSource.read({ data:materiel_data; })
注意:如果使用上面的方法,dataSource中初始化数据的方法,都不能使用。例(schema中的方法)
第二种方法:
var dataSource = new kendo.data.DataSource({ data: [ { name: "John Doe", age: 33 } ] }); var grid = $("#grid").data("kendoGrid"); grid.setDataSource(dataSource);
2.改变列和基础设置
$("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" } ], dataSource: [ { name: "Jane Doe", age: 30, sex:'女'}, { name: "John Doe", age: 33, sex:'男'} ] }); var grid = $("#grid").data("kendoGrid"); grid.setOptions({ sortable: true, columns: [ { field: "name" }, { field: "sex" } ], });
3.根据字段动态改变class类名
attributes: { "class": "# if(data.isgen && data.isgen == true) { #editColor# } else{ # green #} #" } //使用该方法,数据库中必须存在isgen字段,否则报错 attributes:{ "class":"#=isgen === true ? 'editColor' : ''#" } //看别人说可以用,但是好像用不了,不造是不是用法不对,自行研究 attributes: function(e) { return { class": "editColor", style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green" }; }
博文转自:https://www.cnblogs.com/zsj-02-14/p/9342441.html
动手实践:
<script type="text/javascript"> var treeview; var setid; var loaded = true; function onSelect(e) { if (treeview.dataItem(e.node).Type == "1") { setid = treeview.dataItem(e.node).Value; $('#GridPi').data('kendoGrid').dataSource.read({ id: setid }); $('#GridEr').data('kendoGrid').dataSource.read({ id: setid }); $("#Id").val(setid); //alert("读取流程集数据: " + treeview.dataItem(e.node).Value); } } function onDataBound(arg) { //解决级联数据重载为空的问题 if (setid>0 && !loaded) { $('#GridPi').data('kendoGrid').dataSource.read({ id: setid }); loaded = true; } } function onReload(arg) { loaded = false; } function showDetails(e) { e.preventDefault(); var dataItem = this.dataItem($(e.currentTarget).closest("tr")); var wnd = $("#Details").data("kendoWindow"); wnd.content(detailsTemplate(dataItem)); wnd.center().open(); } $(document).ready(function () { treeview = $("#treeview").data("kendoTreeView"); }); </script>