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-扩充-支持单元格编辑}
//-----------------------------------------------------------------/******************************** ...
随机推荐
- Java编程的逻辑 (38) - 剖析ArrayList
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...
- android开发(42) 使用andorid操作蓝牙打印机
最近接到一个需求,使用android发起打印任务,通过蓝牙连接打印机.条件如下: 打印机:南京富士通DPK760E,具有蓝牙功能 Android手机:普通手机,Android 4.4版本,具有蓝牙功能 ...
- 解决同时共用MOB公司的shareSDK和SMSSDK的冲突问题
现在mob的SDK版本升级到3.0,跟之前的版本不兼容,尤其是在 同时使用shareSDK和SMSSDK的时候会发生冲突,报NoSuchMethodException的错误. 只需要将所有的jar包和 ...
- Python模拟Linux的Crontab, 写个任务计划需求
Python模拟Linux的Crontab, 写个任务计划需求 来具体点 需求: 执行一个程序, 程序一直是运行状态, 这里假设是一个函数 当程序运行30s的时候, 需要终止程序, 可以用python ...
- [转]Android WiFi 掉线原因分析
看到一个比较详细的分析wifi断开的文章.收藏一下. 原文: http://blog.csdn.net/chi_wy/article/details/50963279 原因1 .从Log分析来看,这个 ...
- (原)在firefly_rk3288开发板上解决openGL在设置32位色深以后出现花屏的问题
转载请注明出处:http://www.cnblogs.com/lihaiping/p/5567141.html 在做openGL测试的过程中,根据论坛上的帖子,在使用/bin/fbset -a -no ...
- Web打印控件Lodop实现证件套打
第一次接触Lodop大概是在两年前了,那时候研究Lodop主要是为了验证它能不能实现打印时在不修改内容的前提下调整样式,结果是ok的,如今又一次接触它,是因为工作中需要使用它了,于是再一次碰面 Lod ...
- Python奇技淫巧
Python奇技淫巧 http://andrewliu.in/2015/11/14/Python%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7/?hmsr=toutiao.i ...
- C# 线程池执行操作例子
public partial class Form1 : Form { CountdownEvent hander = ); public static object lock_action = ne ...
- 使用 ML Pipeline 构建机器学习工作流
http://www.ibm.com/developerworks/cn/opensource/os-cn-spark-practice5/