easyui datagrid 单元格编辑(cell editing)
demo中有row editing
项目中发现个cell editing,但是有bug,修改好了
主要实现功能:单击数据表格单元格,编辑单元格数据
js代码如下:
$.extend($.fn.datagrid.methods, {
editCell: function (jq, param) {
return jq.each(function () {
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field) {
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
var ed = $(this).datagrid('getEditor', param);
if (ed) {
if ($(ed.target).hasClass('textbox-f')) {
$(ed.target).textbox('textbox').focus();
} else {
$(ed.target).focus();
}
}
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
},
enableCellEditing: function (jq) {
return jq.each(function () {
var dg = $(this);
var opts = dg.datagrid('options');
opts.oldOnClickCell = opts.onClickCell;
opts.onClickCell = function (index, field) {
if (opts.editIndex != undefined) {
if (dg.datagrid('validateRow', opts.editIndex)) {
dg.datagrid('endEdit', opts.editIndex);
opts.editIndex = undefined;
} else {
return;
}
}
dg.datagrid('selectRow', index).datagrid('editCell', {
index: index,
field: field
});
opts.editIndex = index;
opts.oldOnClickCell.call(this, index, field);
}
});
}
});
$(function () {
//注意,不能多次绑定,否则死循环
$('#dg').datagrid('enableCellEditing');
})
效果图:


easyui datagrid 单元格编辑(cell editing)的更多相关文章
- EasyUI Datagrid 单元格编辑
3:对于单元格的编辑 $('#Units').datagrid({ pageNumber: 1, //url: "@ViewBag.Domain/Paper/GetQuestionUnit& ...
- easyui datagrid 单元格编辑 即见即所得,MVC菜单维护,扫描增加
效果如图: 参见 EasyUI 官方 Demo 及文档 @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Lay ...
- easyui datagrid 单元格 编辑时 事件 修改另一单元格
//datagrid 列数据 $('#acc').datagrid({ columns : [ [ { field : 'fee_lend', title : '收费A', width : 100, ...
- easyui datagrid 单元格编辑 自动聚焦 、全选
$.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var ...
- EasyUI datagrid单元格文本超出显示省略号,鼠标移动到单元格显示文本
nowrap : true; 是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...
- easyui datagrid单元格实现溢出文本显示省略号的效果。
Css .datagrid-btable .datagrid-cell{padding:6px 4px;overflow: hidden;text-overflow:ellipsis;white-sp ...
- easyui datagrid 单元格加进度条(亲测可用)
{field: 'DataItemNum', title: '数据完整度', width: 100, formatter: function (v, r, i) { var p = (v / 27) ...
- Datagrid扩展方法InitEditGrid{支持单元格编辑}
//-----------------------------------------------------------------/******************************** ...
- Datagrid扩展方法onClickCell{easyui-datagrid-扩充-支持单元格编辑}
//-----------------------------------------------------------------/******************************** ...
随机推荐
- springcloud配置中心客户端配置遇到的坑
1. 出错信息如下: 在启动配置中心的客户端时,报以下错误信息: Caused by: java.lang.IllegalArgumentException: Could not resolve pl ...
- Nginx+php (十六)
[教程主题]:Nginx+php [课程录制]: 创E [主要内容] [1] 编译PHP 初始环境: 为了省事把所需要的库文件全都安装上,可以使用rpm包安装,也可以用yum命令安装, yum -y ...
- springboot项目访问不到controller方法。
访问不到方法首先要从你的controller能否被扫描到出发, 图中显示创建springboot项目自带的这两个的文件要注意把他俩拿出来放到父包下面也就是图中这个位置.如果你的这两个文件在子包里或者说 ...
- android控制软键盘弹出方式
android一把自带的软键盘弹出方式是会将布局顶上去,造成UI乱套的情况. 解决办法:方法一:在你的activity中的oncreate中setContentView之前写上这个代码getWindo ...
- sparkR的一个运行的例子
在sparkR在配置完成的基础上,本例采用Spark on yarn模式,介绍sparkR运行的一个例子. 在spark的安装目录下,/examples/src/main/r,有一个dataframe ...
- I/O多路复用和Socket
由于IO操作涉及到系统调用,涉及到用户空间和内核空间的切换,所以理解系统的IO模型,对于需要进入到系统调用层面进行编程来说是很重要的. 阻塞IO和非阻塞IO 从程序编写的角度来看,I/O就是调用一个或 ...
- linux进程的挂起和恢复
进程的挂起及恢复 #ctrl+z:挂起,程序放到后台,程序没有结束. #jobs:查看被挂起的程序工作号 恢复进程执行时,有两种选择:fg命令将挂起的作业放回到前台执行:用bg命令将挂起的作业放到后台 ...
- FPGA中的时序分析(二)
使用Timequest 笔者对Altera较熟悉,这里以quartus ii中的timequest作为讲解. Timequest分析时序的核心,也就是在于延迟因数的计算.那么建立约束文件,去告诉tim ...
- Build 2016上一些令人兴奋的东西
本来应该要更新Windows IOT开发入门的,但是由于Build 2016刚刚过去,不得不将一些令人兴奋的东西给大家进行分享. 首先对于错过这次直播的,可以在以下链接再次看到观看: https:// ...
- Mybatis系列(一):Mybatis入门
一.Mybatis是什么 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改 ...