Disable KendoGrid editing

来源：互联网发布：javascript计算器代码编辑：程序博客网时间：2024/06/05 23:56

一、禁止整个KendoGrid编辑

将grid 转成kendo widgetInstance, 然后将属性editabled 设为 false

var $girdEles = $("#grid");//设置grid的不可修改  for (var i = 0; i < $girdEles.length; i++) {    var $ele = $($girdEles[i]),        widget = kendo.widgetInstance($ele);    //将元素转换成kendo实例      if (widget) {        widget.setOptions({            editable: false        });    }}// 隱藏Toolbar//$("#grid .k-grid-toolbar").hide();//屏蔽Button組件  $("#grid .k-grid-toolbar .k-button").each(function () {    $(this).addClass("k-state-disabled").attr("disabled", "disabled").removeAttr("onclick");});

二、禁止某列(Column)编辑
可以参考这里的做法 Disable editing in kendo grid 演示例子
html

<a href="#" id="button1" class="k-button">Disable Firstname</a><a href="#" id="button2" class="k-button">Enable Firstname</a><div id="grid"></div>

var grid = $("#grid").kendoGrid({    dataSource: {        data    : createRandomData(50),        pageSize: 10,        schema  : {            model: {                fields: {                    id       : { type: 'number' },                    FirstName: { type: 'string' },                    LastName : { type: 'string' },                    City     : { type: 'string' },                    Title    : { type: 'string' },                    BirthDate: { type: 'date' },                    Age      : { type: 'number' }                }            }        }    },    editable  : "incell",    pageable  : {        refresh  : true,        pageSizes: true    },    columns   : [        {            field: "FirstName",            width: 90,            title: "First Name"        } ,        {            field: "LastName",            width: 90,            title: "Last Name"        } ,        {            width: 100,            field: "City"        } ,        {            field: "Title"        } ,        {            field   : "BirthDate",            title   : "Birth Date",            template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'        } ,        {            width: 50,            field: "Age"        }    ]}).data("kendoGrid");$("#button1").on("click", function (e) {    var data = grid.dataSource.at(0);    console.log("data", data);    data.fields["FirstName"].editable = false;});$("#button2").on("click", function (e) {    var data = grid.dataSource.at(0);    data.fields["FirstName"].editable = true;});

效果图：

阅读全文

0 0