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';列编辑可直接保存

config.editing.mode = 'form';//表单编辑

config.editing.mode = 'popup';弹出编辑
editing: {
mode: "popup",
allowUpdating: true,
popup: {
title: "Employee Info",
showTitle: true,
width: 700,
height: 525,
position: {
my: "top",
at: "top",
of: window
}
},
form: {
items: [{
itemType: "group",
colCount: 2,
colSpan: 2,
items: ["FirstName", "LastName", "Prefix", "BirthDate", "Position", "HireDate", {
dataField: "Notes",
editorType: "dxTextArea",
colSpan: 2,
editorOptions: {
height: 100
}
}]
}, {
itemType: "group",
colCount: 2,
colSpan: 2,
caption: "Home Address",
items: ["StateID", "Address"]
}]
}
}

  

edtingmode='row'//行编辑

  

 

  

DevExtreme学习笔记(一) DataGrid中注意事项的更多相关文章

  1. DevExtreme学习笔记(一) DataGrid中数据提交注意事项

    1.数据提交的{}数据需转化json格式 syncPost('/controller/action', { values: JSON.stringify({d:x}) }, function (res ...

  2. DevExtreme学习笔记(一) DataGrid中MVC分析

    @(Html.DevExtreme().DataGrid() .ID("gridContainer") .DataSource(d => d .OData() .Url(&q ...

  3. DevExtreme学习笔记(一) DataGrid中数据筛选

    config.filterRow = { visible: true, applyFilter: "auto" }; config.headerFilter = { visible ...

  4. DevExtreme学习笔记(一) DataGrid中js分析

    1.overviewjs采用 $(function() { $("#gridContainer").dxDataGrid({ dataSource: { store: { type ...

  5. 并发编程学习笔记(4)----jdk5中提供的原子类及Lock使用及原理

    (1)jdk中原子类的使用: jdk5中提供了很多原子类,它会使变量的操作变成原子性的. 原子性:原子性指的是一个操作是不可中断的,即使是在多个线程一起操作的情况下,一个操作一旦开始,就不会被其他线程 ...

  6. [学习笔记] 在Eclipse中导入项目

    参考前文:[学习笔记] 在Eclips 中导出项目 选择已经导出的文件: 导入之后,项目结构如下: 至此,完成.

  7. CockroachDB学习笔记——[译]CockroachDB中的SQL:映射表中数据到键值存储

    CockroachDB学习笔记--[译]CockroachDB中的SQL:映射表中数据到键值存储 原文标题:SQL in CockroachDB: Mapping Table Data to Key- ...

  8. [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar中的类解压后放在运行jar中

    前文: [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar打在jar包中 使用7z打开压缩包,查看所有依赖的jar都被解压以包名及class的方式存储在了运行jar中,此时jar的 ...

  9. [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar打在jar包中

    本文需要参考前文: [学习笔记] 在Eclipse中导出可以直接运行的jar,依赖的jar在子目录中 上文是导出的运行的依赖jar被放在了子目录中,本文是将依赖jar放在可运行jar的本身,这样发布的 ...

随机推荐

  1. spring boot中控制台打印sql日志

    .properties文件 logging.level.com.example.demo.dao=debug .yml文件 # 打印sql logging: level: com.example.de ...

  2. el-table里面的列需要对比两个返回参数

    需求是这样的--- 已发布时间超过30分钟,显示黄色,超过一个钟显示红色 现在后台返回的时间的格式是2018-10-22 11:23:23的格式 做法是: 第一步: 先将后台返回的格式转化为时间戳,然 ...

  3. Redis采坑(一)——数据无法插入,内存溢出

    一.采坑背景 在最大数据分析的过程中,redis是被当做热数据的缓存库使用的,在某一天中,redis数据库热数据无法插入,此时数据量大概在100万左右,很是纠结,为什么不能插入?程序的错误,不可能,没 ...

  4. 第06组 Beta冲刺(4/4)

    队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11990575.html 作业博客 : https://edu.cnblogs.com/campus/ ...

  5. 【转】谈谈servlet、spring、struts

    今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术框架由struts2迁移到springMVC,我突然有了一个新的疑 ...

  6. SpringBoot——读取配置文件@Value和@Configuration比较

    1.@Configuration package com.xgcd.springboot.bean; import org.springframework.boot.context.propertie ...

  7. Java基础 变量名的开头可以使用$

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  8. 使用yarn代替npm作为node.js的模块管理器

    使用yarn代替npm作为node.js的模块管理器 转 https://www.jianshu.com/p/bfe96f89da0e     Fast, reliable, and secure d ...

  9. tomcat乱码解决

    一.修改Tomcat的conf的server.xml文件加上 URIEncoding="UTF-8" 二.在tomcat的bin 目录下的catalina.bat 配置文件中,添加 ...

  10. Ehcache API的使用和注意点

    目录 创建CacheManager CacheManager常用的API 创建Cache Cache常用的API 创建Element Element常用的API 配置文件 配置文件名为ehcache. ...