1.阻止cell编辑
config.onEditorPreparing = function (e) {
if (e.dataField === ‘xx‘ && e.row.data.Id) {//判断是否是某一列
e.cancel = true;
return;
}
};
2.配置子项
config.masterDetail = {
enabled: true,
template: function (container, info) {
var detailConfig = getProjectContactsConfig(info.data);//JSON.stringify(info.data)
detailConfig.masterRow = info.data;//缓存父级row对象给detailGrid
detailConfig.gridId = ‘master-grid-Proj-‘ + info.data.Id;
var $grid=$(‘<div id="‘ + detailConfig.gridId +‘">‘).dxDataGrid(detailConfig);
detailConfig.component = $grid.dxDataGrid(‘instance‘);//$(detailConfig.gridSelector).dxDataGrid(‘instance‘);
$grid.appendTo(container);
}
};
3.编辑新行注意事项和选中行事件
config.onInitNewRow = function (e) {
e.data.ProjId = row.Id;
};//编辑新行时父Id赋值
config.onRowClick = function (e) {
if (e.rowType !== "totalFooter") {
e.component.selectRows();
e.component.selectRowsByIndexes(e.component.getRowIndexByKey(e.key));
}
};//选中行事件
4.第一行选中
config.onContentReady = function (e) {
//默认选中控件第一行
if (e.component.getVisibleRows().length > 0)
e.component.selectRows(e.component.getVisibleRows()[0].key);
};
5.时间值可编辑时要在config初始化时格式转换
var config = dxConfig.editGrid({
url: ‘/XXX‘,
id: id,
onLoaded: function(res) {
if (res.data.data) {
$.each(res.data.data, function(rIndex, rRow) {
if (rRow && rRow.StartDate) rRow.StartDate = T(rRow.StartDate, __DateFormat);
if (rRow && rRow.EndDate) rRow.EndDate = T(rRow.EndDate,__DateFormat);
});
}
}});//其中的__DateFormat是时间格式YYYY/MM/DD等
6. 字段下拉设置
{
dataField: "SupProjId",
caption: "xxx",
allowSorting: false,
allowHeaderFiltering: false,
alignment: "left",
editorOptions: {
showClearButton: true,
valueExpr: "Value",//选中值
displayExpr: "Text"//显示值
},
cellTemplate: function (ele, info) {
if (info.data) {
ele.html(info.data.Name);//显示值
}
}
3.编辑模式：
config.editing.mode = ‘batch‘;//可多行编辑右上角含保存按钮，保存后按钮不可编辑，只有内容更改时可保存
config.editing.mode = ‘cell‘;列表编辑，编辑直接保存
DevExtreme学习笔记(一) DataGrid中注意事项
原文：https://www.cnblogs.com/daizhipeng/p/11232744.html