EasyUI数据表格（datagird）可编辑

「爱情、让人受尽委屈。」 2022-01-12 15:17 560阅读 0赞

<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
    <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);
    			var ed = $(this).datagrid('getEditor', param);
    			if (ed){ 
    				if ($(ed.target).hasClass('textbox-f')){ 
    					$(ed.target).textbox('textbox').focus();
    				} else { 
    					$(ed.target).focus();
    				}
    			}
    			for(var i=0; i<fields.length; i++){ 
    				var col = $(this).datagrid('getColumnOption', fields[i]);
    				col.editor = col.editor1;
    			}
    		});
    	},
    	enableCellEditing: function(jq){ 
    		return jq.each(function(){ 
    			var dg = $(this);
    			var opts = dg.datagrid('options');
    			opts.oldOnClickCell = opts.onClickCell;
    			opts.onClickCell = function(index, field){ 
    				if (opts.editIndex != undefined){ 
    				if (dg.datagrid('validateRow', opts.editIndex)){ 
    					dg.datagrid('endEdit', opts.editIndex);
    					opts.editIndex = undefined;
    				} else { 
    					return;
    				}
    			}
    			dg.datagrid('selectRow', index).datagrid('editCell', { 
    				index: index,
    				field: field
    			});
    			opts.editIndex = index;
    			opts.oldOnClickCell.call(this, index, field);
    			}
    		});
    	}
    });
    $(function(){ 
    	$('#list').datagrid().datagrid('enableCellEditing');
    });
    </script>
    <body>
    <table id="list" title="公告信息" class="easyui-datagrid">
        <thead>
            <tr>
                <th field="ck" checkbox=true></th>
                <th field="id" width='10' resizable='false'>编号</th>
                <th field="title" width='50' resizable='false' data-options="editor:'text'">标题</th>
                <th field="content" width='150' resizable='false' data-options="editor:'text'">内容</th>
            </tr>
        </thead>
    </table>
    </body>

说明：  
  `data-options="editor:'text'"`：使单元格可编辑。  
![asd][]

[asd]: /images/20220112/c0b9b92e6332470892a48baeaf73d6a3.png