如下图:

现改为单击某个单元格只对此单元格进行可编辑

<TABLE>标记添加 onClickCell

<table id="dg" class="easyui-datagrid" data-options="onClickCell: onClickCell">

需要进行编辑的列上添加 editor

<th data-options="field:'itemId',editor:'numberbox'"></th>

也可以指定

  • 小数位数:editor:{type:’numberbox’,options:{precision:1}}

  • 文本类型:editor:’text’

  • checkbox:editor:{type:’checkbox’,options:{on:’启动’,off:’关闭’}}

效果如下:

核心代码

<script type="text/javascript">

$.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);
for ( var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
}); var editIndex = undefined;
//结束编辑
function endEditing() {
if (editIndex == undefined) {
return true
}
if ($('#dg').datagrid('validateRow', editIndex)) {
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
//单击单元格
function onClickCell(index, field) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index).datagrid('editCell', {
index : index,
field : field
});
editIndex = index;
}
}
</script>

EasyUI DataGrid 编辑单元格的更多相关文章

  1. 扩展jquery easyui datagrid编辑单元格

    扩展jquery easyui datagrid编辑单元格 1.随便聊聊 这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...

  2. EasyUI DataGrid编辑单元格时使用combogrid

    仅提供一段columns配置代码供参考: conditions对象是一个已赋值的数组对象集合.下拉框数据可直接使用conditions数据,也可以通过url获取. columns : [[ { fie ...

  3. easyui datagrid单击单元格选择此列

    示例代码实现单击jquery easyui datagrid的单元格时,取消datagrid默认选中高亮此行的样式,改为选中单击的单元格所在的列,高亮此列上的所有单元格.可以配置全局single变量, ...

  4. Easyui datagrid 扩展单元格textarea editor

    datagrid 扩展单元格textarea editor by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 如下,在没有扩展的情况下,初始化如下 手 ...

  5. JS实现EasyUI ,Datagrid,合并单元格功能

    为了实现datagrid的合并单元格效果,datagrid的数据加载方式肯定是要写在JS文件内部的. 一:在JS内部添加Datagrid数据加载方法如下: $("#id").dat ...

  6. EasyUI datagrid 选择单元格 出现文本框 修改 四

    @disabled = "disabled", 只读属性 数据初始化 public JsonResult RateList(string dispatch_number, stri ...

  7. easyui datagrid 合并单元格

    整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...

  8. easyui datagrid 自定义单元格单击与双击事件(Day_38)

    $(function(){ $('#tableId').datagrid({//单击事件   onClickRow:function(rowIndex,rowData){  alert("单 ...

  9. 获取wpf datagrid当前被编辑单元格的内容

    原文 获取wpf datagrid当前被编辑单元格的内容 确认修改单元个的值, 使用到datagrid的两个事件 开始编辑事件 BeginningEdit="dataGrid_Beginni ...

随机推荐

  1. 更改Mysql数据库存储位置

    默认安装位置 C:\Program Files\MySQL\MySQL Server 5.7 一.首先把mysql的服务先停掉. 二.更改MySQL配置文件My.ini中的数据库存储主路径 打开MyS ...

  2. Microsoft.VisualStudio.DebuggerVisualizers.dll 文件位置 for VisualStudio 2015

    可视化调试工具(Microsoft.VisualStudio.DebuggerVisualizers) "C:\Program Files (x86)\Microsoft Visual St ...

  3. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)如何修改标准驱动器编码器分辨率

    在某个轴的Enc上双击,可以修改Scaling Factor Numerator     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetao ...

  4. 如何系统掌握游戏编程中3D图形学相关的基础?

    https://www.zhihu.com/question/27544895 三维几何学基础:三维坐标系统点与矢量矩阵与几何变换四元数与三维旋转

  5. JMeter 十:录制脚本--使用bodboy

    1. 下载bodboy 下载地址:http://www.badboy.com.au/download 这里填写完基本信息,点击下方的Continue即可跳转到下载页面. 任选一个version,点击后 ...

  6. LoadRunner录制: 选择协议

    LR录制的时候关心的是通信,关心的是客户端和服务器之间的数据包.它通过监控客户端和服务器之间的通信,转化为自己的函数. 协议选择错误,可能会导致录制下来的内容为空. 方法一:根据经验来选择协议 Web ...

  7. vue - webpack.dev.conf.js for FriendlyErrorsPlugin

    描述:webpack网页端友好的报错信息就来自它 官网:https://www.npmjs.com/package/friendly-errors-webpack-plugin new Friendl ...

  8. 七个你无法忽视的Git使用技巧

    与其他技术相比,Git应该拯救了更多开发人员的饭碗.只要你经常使用Git保存自己的工作,你就一直有机会可以将代码退回到之前的状态,因此就可以挽回那些你深夜里迷迷糊糊犯下的错误. 尽管这么说,Git的命 ...

  9. AngularJS监听DOM加载完毕

    直接上代码: Module.directive('renderFinish', function ($timeout) { //renderFinish自定义指令 return { restrict: ...

  10. SpringMVC响应Restful风格请求404

    在学习Springmvc时,使用Restful风格的url,页面提示404错误.为找到原因,编写一个简单的Restful测试用例如下: jsp页面: <a href="user/tes ...