1.添加editor:'text’属性

editor:'text'

easyui-datagri编辑单元格
2.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);
                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 ($('#work').datagrid('validateRow', editIndex)) {
            $('#work').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }
    //单击单元格
    function onClickCell(index, field) {
        if (endEditing()) {
            $('#work').datagrid('selectRow',index).datagrid('editCell', {
                index : index,
                field : field
            });
            editIndex = index;
        }
    }

3.设置onClickCell

onClickCell: onClickCell

easyui-datagri编辑单元格
4.按照上述操作,即可实现编辑
上面的一大坨代码,我也忘了是在哪个easyui中文api文档里复制的了,不过编辑可以实现了,但是发现一个bug,我想在最后一列添加按钮的时候,出现了问题。
加入操作按钮:
1)在需要放入按钮的列中加入formatter
easyui-datagri编辑单元格
2)formatter怎么写

var Formatter = {
        look:function(value,row,index){
            return '<a href="#" name="rtd" class="easyui-linkbutton" ></a>';
        },
    };

3)添加easyui按钮样式

$('#work').datagrid({
        onLoadSuccess:function(data){
            $("a[name='rtd']").linkbutton({text:'查看',plain:true,iconCls:'icon-search'});
        }
    });

加完之后如图:
easyui-datagri编辑单元格
但是它有问题,什么问题,点一点就知道了,问题如下图:
easyui-datagri编辑单元格
我随便点了几下,发现按钮消失了。
解决办法是在上面的单机单元格的函数里也加上按钮样式:

//单击单元格
    function onClickCell(index, field) {
        if (endEditing()) {
            $("a[name='rtd']").linkbutton({text:'查看',plain:true,iconCls:'icon-search'});
            $('#work').datagrid('selectRow',index).datagrid('editCell', {
                index : index,
                field : field
            });
            editIndex = index;
        }
    }

easyui-datagri编辑单元格
加完之后就好用了。

相关文章:

  • 2021-07-10
  • 2022-12-23
  • 2021-08-14
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-04-21
  • 2022-12-23
  • 2022-12-23
  • 2021-06-16
  • 2022-12-23
  • 2022-12-23
  • 2021-06-27
相关资源
相似解决方案