easyui datagrid 编辑

最新推荐文章于 2022-05-20 13:49:48 发布

转载最新推荐文章于 2022-05-20 13:49:48 发布 · 350 阅读

js 同时被 2 个专栏收录

3 篇文章

订阅专栏

easyui

2 篇文章

订阅专栏

本文介绍了一种使用 jQuery EasyUI 扩展实现数据表格单元格编辑的方法。通过自定义方法 `editCell`，可以实现在点击单元格时仅编辑指定字段的功能。此扩展适用于需要在数据网格中进行局部编辑的应用场景。

$.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;
			}
		}