EasyUi datagrid单元格可编辑（根据条件）

最新推荐文章于 2025-04-19 17:49:43 发布

Louis__lv

最新推荐文章于 2025-04-19 17:49:43 发布

阅读量3.9k

点赞数 1

分类专栏： JAVA工作日常文章标签： js easyui datagrid

本文链接：https://blog.youkuaiyun.com/Louis__lv/article/details/119000018

版权

JAVA工作日常专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在EasyUi的datagrid中实现根据条件动态控制单元格是否可编辑。当字段field1为空时，字段field2变为可编辑状态，而其他列的编辑状态不受影响。

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

目标

一个datagrid表格含多个列（field1，field2....），默认filed2不可编辑，但当某个条件（以字段filed1为空为例）时字段field2可编辑，且不影响其他列的编辑状态。

思路

设置列filed2的编辑器（例如：editor:'text'），点击行事件时触发判定，若不可编辑，关闭该列编辑权限。

//表格初始化
$('#tb').datagrid({
        iconCls: 'icon-list',
        title: 'title',
        loadMsg: 'loading...',
        height: 300,
        singleSelect: true,
        autoSave: true,
        rownumbers: true,
        queryParams: {},
        columns: [
            [
                {
                    field: 'ck',
                    checkbox: true
                },
                {
                    field: 'field1',
                    title: 'title1',
                    width: 100
                },
                {
                    field: 'field2',
                    title: 'title2',
                    width: 150,
                    editor: 'text'
                },
                {
                    field: 'field3',
                    title: 'title3',
                    width: 150
                },
                {
                    field: 'field4',
                    title: 'title4',
                    width: 150
                },
                {
                    field: 'field5',
                    title: 'title5',
                    width: 150,
                    editor: 'text'
                }
            ]
        ],
        onClickRow: function (index, row) {
            onClickRow(index);
        }
    });


//设置点击行事件
function onClickRow(index) {
    if(!canEdit(index)){
		//启用行编辑
		$('#tb').datagrid('selectRow', index).datagrid('beginEdit', index);
		//选择编辑对象
		var module = $('#tb').datagrid('getEditor', {index: index, field:'material_name'}).target;
		//关闭对象编辑功能
		module.textbox({disabled: true});
	}
}

//条件判断：field1为空时返回true
function canEdit(index){
	var rows = $('#tb').datagrid('getRows');
    if(rows[index]['field1'].trim() == ''){
        return true;
    }else{
        return false;
    }
}