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)的更多相关文章

  1. EasyUI Datagrid 单元格编辑

    3:对于单元格的编辑 $('#Units').datagrid({ pageNumber: 1, //url: "@ViewBag.Domain/Paper/GetQuestionUnit& ...

  2. easyui datagrid 单元格编辑 即见即所得,MVC菜单维护,扫描增加

    效果如图: 参见 EasyUI 官方 Demo 及文档 @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Lay ...

  3. easyui datagrid 单元格 编辑时 事件 修改另一单元格

    //datagrid 列数据 $('#acc').datagrid({ columns : [ [ { field : 'fee_lend', title : '收费A', width : 100, ...

  4. easyui datagrid 单元格编辑 自动聚焦 、全选

    $.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var ...

  5. EasyUI datagrid单元格文本超出显示省略号,鼠标移动到单元格显示文本

    nowrap : true;  是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...

  6. easyui datagrid单元格实现溢出文本显示省略号的效果。

    Css .datagrid-btable .datagrid-cell{padding:6px 4px;overflow: hidden;text-overflow:ellipsis;white-sp ...

  7. easyui datagrid 单元格加进度条(亲测可用)

    {field: 'DataItemNum', title: '数据完整度', width: 100, formatter: function (v, r, i) { var p = (v / 27) ...

  8. Datagrid扩展方法InitEditGrid{支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

  9. Datagrid扩展方法onClickCell{easyui-datagrid-扩充-支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

随机推荐

  1. Linux系统上传下载命令rz和sz

    Linux系统简单易用的上传下载命令rz和sz (2017年7月10日更新) 发布地址(http://oldboy.blog.51cto.com/2561410/588592) (一)安装方法汇总 1 ...

  2. 在eclpse中 一个web project 引用多个 java project 的方法

    在开发时,我们会遇到一个需求:模块化.它要求我们把 业务组件进行拆分,分组.把一部分业务功能集中处理,以保证 部分功能块的独立,便于 分配任务到个人,确定人员职责,源代码管理,和发布时重组. 我们尝试 ...

  3. SQL Server 2012 自动增长列,值跳跃问题(自增增加1000)

    介绍 从 SQL Server 2012 版本开始, 当SQL Server 实例重启之后,表格的自动增长列的值会发生跳跃,而具体的跳跃值的大小是根据增长列的数据类型而定的.如果数据类型是 整型(in ...

  4. Java设计模式(2)单态模式(Singleton模式)

    定义:Singleton模式主要作用是保证在Java应用程序中,一个类Class只有一个实例存在. 在很多操作中,比如建立目录 数据库连接都需要这样的单线程操作. 还有,singleton能够被状态化 ...

  5. R语言 如何用IF语句判断 一个数字的奇偶

    jishu <- function(x){ ifelse(x%%2 ==0,F,T)}  

  6. 使用 js替换网页中的关键词为链接

    要求把一段html脚本中的疾病名添加到疾病库的链接,只添加一次,要避开超链接或图片链接. 最初是用的    str.replace('糖尿病', '<a href=...>糖尿病</ ...

  7. 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 ...

  8. 一个完整的SAP RFC调用接口封装

    因为经常需要访问sap操作数据,就封装了一个类方便调用,运行条件需要安装sap客户端,在sap客户端安装之后会带有一个com接口,本接口就通过这个com访问sap,因为com的后期绑定问题故使用了vb ...

  9. python numpy logic_and

    >>> import numpy as np >>> np.logical_and(True, False) False >>> np.logic ...

  10. Eclipse初次java开发问题总结-3

    上篇中提到解决的一个问题是mysql驱动报的: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link ...