Kindo UI grid表格自定义列是否可编辑
kindo UI在绘制了一个kendoGrid时,可能需要去控制哪些列允许编辑,哪些列不允许编辑。网上搜搂了很久,寻得良方,总结方法如下:先回顾创建kendoGrid三部曲1. 定义存放GRID的容器。<!-- 创建容器 --><div id="grid"></div><script>// 创建模型var viewModel = Hap.create
·
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>
即如下图:
更多推荐
已为社区贡献1条内容
所有评论(0)