kindo UI在绘制了一个kendoGrid时,可能需要去控制哪些列允许编辑,哪些列不允许编辑。网上搜搂了很久,寻得良方,总结方法如下:

先回顾创建kendoGrid三部曲

1. 定义存放GRID的容器。

<!-- 创建容器 -->
<div id="grid"></div>
<script>
      // 创建模型
      var viewModel = Hap.createGridViewModel("#grid");
</script>
2.定义数据源
<script>
<!-- 定义数据源 -->
dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: BaseUrl + "/com/baidu/search",
                        type: "POST",
                        dataType: "json"
                    },
                    create: {
                        url: BaseUrl + "/com/baidu/add",
                        type: "POST",
                        contentType: "application/json"
                    },
                    parameterMap: function (options, type) {
                        if (type !== "read" && options.models) {
                            var datas = Hap.prepareSubmitParameter(options, type)
                            return kendo.stringify(datas);
                        } else if (type === "read") {
                            return Hap.prepareQueryParameter(viewModel.model.toJSON(), options)
                        }
                    }
                },
                batch: true,
                serverPaging: true,
                pageSize: 10,
                schema: {
                    data: 'rows',
                    total: 'total',
                    model: {
                     
                    }
                }
            });
</script>
3. 为容器创建Grid
<script>
$("#grid").kendoGrid({
                // 引用前面定义的数据源
                dataSource: dataSource,
                resizable: true,
                scrollable: true,
                navigatable: false,
                reorderable: true,
                selectable: 'multiple, rowbox',
                sortable:true,
                height:380,
                autoBind:true,
                pageable: {
                    pageSizes: [10, 20, 50,100,200],
                    refresh: true,
                    position: "top",
                    buttonCount: 5
                },
                columns: [
                    {
                        field: "column1",
                        title: '列名称1',
                        width: 190
                        }
                    },
                    {
                        field: "column2",
                        title: '列名称2',
                        width: 190
                        }
                    },
                ],
                editable: true
            });
</script>

了解后,遇到需求:

(1) grid 列都允许编辑

以上截图3已经实现了这个效果,即 在图中位置设置:

 editable: true

(2) grid列自定义列是否可编辑

如要求列column1可编辑,列column2不可编辑。方法如下:

1.还是要设置editable属性为true,参见(1)

2.在数据源定义中,统一设置editable属性。

<script>
<!-- 定义数据源 -->
dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: BaseUrl + "/com/baidu/search",
                        type: "POST",
                        dataType: "json"
                    },
                    create: {
                        url: BaseUrl + "/com/baidu/add",
                        type: "POST",
                        contentType: "application/json"
                    },
                    parameterMap: function (options, type) {
                        if (type !== "read" && options.models) {
                            var datas = Hap.prepareSubmitParameter(options, type)
                            return kendo.stringify(datas);
                        } else if (type === "read") {
                            return Hap.prepareQueryParameter(viewModel.model.toJSON(), options)
                        }
                    }
                },
                batch: true,
                serverPaging: true,
                pageSize: 10,
                schema: {
                    data: 'rows',
                    total: 'total',
                    model: {
                        editable: function (col) {
                            if ("column1" == col) {
                                return true;
                            }
                            return false;
                        }
                    }
                }
            });
</script>
即如下图:
 
 
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐