EasyUI数据表格（datagird）可编辑

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

ronybo

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

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： EasyUI 文章标签： easyui datagird 单元格可编辑

本文链接：https://blog.youkuaiyun.com/weixin_43254907/article/details/92759662

EasyUI 专栏收录该内容

3 篇文章

订阅专栏

博客主要介绍了利用EasyUI使单元格可编辑的相关内容，聚焦于信息技术中前端开发方面的操作。

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

<!--引入easyui的样式 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<!-- js文件 -->
<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>