EasyUI DataGrid 编辑单元格

最新推荐文章于 2025-05-19 21:48:24 发布

原创最新推荐文章于 2025-05-19 21:48:24 发布 · 552 阅读

2 ·

CC 4.0 BY-SA版权

Java 同时被 2 个专栏收录

3 篇文章

订阅专栏

EasyUi

1 篇文章

订阅专栏

本文介绍了如何在EasyUI DataGrid中实现单击单元格仅编辑该单元格的功能，包括添加onClickCell事件，为需要编辑的列设置editor属性，并提供了小数位数限制、文本输入和复选框编辑的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

如下图：

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

`<TABLE>`标记添加 onClickCell

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

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

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

也可以指定

小数位数：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>