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-扩充-支持单元格编辑}
//-----------------------------------------------------------------/******************************** ...
随机推荐
- Linux系统上传下载命令rz和sz
Linux系统简单易用的上传下载命令rz和sz (2017年7月10日更新) 发布地址(http://oldboy.blog.51cto.com/2561410/588592) (一)安装方法汇总 1 ...
- 在eclpse中 一个web project 引用多个 java project 的方法
在开发时,我们会遇到一个需求:模块化.它要求我们把 业务组件进行拆分,分组.把一部分业务功能集中处理,以保证 部分功能块的独立,便于 分配任务到个人,确定人员职责,源代码管理,和发布时重组. 我们尝试 ...
- SQL Server 2012 自动增长列,值跳跃问题(自增增加1000)
介绍 从 SQL Server 2012 版本开始, 当SQL Server 实例重启之后,表格的自动增长列的值会发生跳跃,而具体的跳跃值的大小是根据增长列的数据类型而定的.如果数据类型是 整型(in ...
- Java设计模式(2)单态模式(Singleton模式)
定义:Singleton模式主要作用是保证在Java应用程序中,一个类Class只有一个实例存在. 在很多操作中,比如建立目录 数据库连接都需要这样的单线程操作. 还有,singleton能够被状态化 ...
- R语言 如何用IF语句判断 一个数字的奇偶
jishu <- function(x){ ifelse(x%%2 ==0,F,T)}
- 使用 js替换网页中的关键词为链接
要求把一段html脚本中的疾病名添加到疾病库的链接,只添加一次,要避开超链接或图片链接. 最初是用的 str.replace('糖尿病', '<a href=...>糖尿病</ ...
- 6 ways to import data into SQL Server
I’m going to go over some methods to import data from text files into SQL Server today. The particul ...
- 一个完整的SAP RFC调用接口封装
因为经常需要访问sap操作数据,就封装了一个类方便调用,运行条件需要安装sap客户端,在sap客户端安装之后会带有一个com接口,本接口就通过这个com访问sap,因为com的后期绑定问题故使用了vb ...
- python numpy logic_and
>>> import numpy as np >>> np.logical_and(True, False) False >>> np.logic ...
- Eclipse初次java开发问题总结-3
上篇中提到解决的一个问题是mysql驱动报的: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link ...