EasyUI DataGrid 编辑单元格

曾经终败给现在 2022-08-21 02:12 280阅读 0赞

之前文章 [EasyUI DataGrid可编辑单元格 ][EasyUI DataGrid_]实现可编辑单元格，如果有多列都需要可编辑 当点击一个单元格 则此整行都会进行编辑

如下图：

![这里写图片描述][20160310153150720]

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

### `<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:’关闭’\}\}

效果如下：

![这里写图片描述][20160310153203971]

### 核心代码 ###

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

## [在线演示][Link 1] ##

作者：[itmyhome][]

[EasyUI DataGrid_]: http://blog.csdn.net/itmyhome1990/article/details/46971341
[20160310153150720]: /images/20220731/f021f9396ecf43d1b62dc3d923d55d8b.png
[20160310153203971]: /images/20220731/a50a32bbe24b4dadb73b354ac5a64153.png
[Link 1]: http://itmyhome.com/cell_editing_in_datagrid/
[itmyhome]: http://blog.csdn.net/itmyhome1990

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关 Easyui 鼠标悬停显示单元格内容

example1:$.extend($.fn.datagrid.methods, \{ /\\ \ @author SoySauce \

痛定思痛。/ 2022年09月30日 09:47/ 0 赞/ 473 阅读

相关 EasyUI DataGrid 编辑单元格

之前文章 [EasyUI DataGrid可编辑单元格 ][EasyUI DataGrid_]实现可编辑单元格，如果有多列都需要可编辑当点击一个单元格则此整行都会进行编辑

曾经终败给现在/ 2022年08月21日 02:12/ 0 赞/ 281 阅读

相关获取wpf datagrid当前被编辑单元格的内容

确认修改单元个的值, 使用到datagrid的两个事件开始编辑事件 BeginningEdit="dataGrid\_BeginningEdit" 编辑结束事件 C

超、凢脫俗/ 2022年08月18日 15:19/ 0 赞/ 205 阅读

相关 EasyUI DataGrid可编辑单元格

效果如图： ![SouthEast][] 首先在需要可编辑的列上添加一个editor属性，列定义为numberbox编辑类型 <th field="SCOR

本是古典何须时尚/ 2022年08月02日 12:53/ 0 赞/ 287 阅读

相关【easyui】datagrid的列可编辑

1 使用editor方法，来实现可编辑 { field: 'value', title: '分配计划', width: 100, align: 'center', s

迈不过友情╰/ 2022年07月13日 00:43/ 0 赞/ 472 阅读

相关 easyui-datagrid 编辑单元格

在做itoo成绩的时候，有个需求是教师判分，学生成绩有两部分组成：平时成绩和期末成绩，然后根据两种成绩比例算出总成绩。现在是有了平时成绩和成绩比例，输入期末成绩，计算出总成绩，

古城微笑少年丶/ 2022年07月03日 18:24/ 0 赞/ 274 阅读

相关 easyui 可编辑datagrid 范例亲测有效

<%@ page language="java" import="java.util." pageEncoding="utf-8" contentType="

- 日理万妓/ 2022年05月31日 02:29/ 0 赞/ 201 阅读

相关两种方法easyui datagrid合并行单元格

onLoadSuccess:function(data){ / if(!sortFlag) $(this).datagrid("

短命女/ 2022年05月15日 12:38/ 0 赞/ 1291 阅读

相关 EasyUI中表格Datagrid合并单元格

“岁月无多人易老，乾坤虽大愁难著” 相信很多用过datagrid的同学都有这样的经历，就是合并单元格了。我今天也做了这个功能，在这里分享一下： ![在这里插入图片描述]

素颜马尾好姑娘i/ 2022年05月12日 15:12/ 0 赞/ 476 阅读

相关 DevExpress设置单元格不可编辑，选单元格则选中一行

DevExpress设置单元格不可编辑，选单元格则选中一行，目的是只展示数据，不提供修改功能： DevexpressGridControl禁止点击单元格修改 1. 设置

淩亂°似流年/ 2021年07月26日 17:06/ 0 赞/ 841 阅读