原创

设置EasyUI的可编辑Treegrid单元格内容

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36785111/article/details/80041097

在使用EasyUI的可编辑Treegrid功能时,需要在代码中设置Treegrid的内容;
由于Treegrid没有完全继承DataGrid的方法,比如Treegrid不可以使用行索引,以及Treegrid没有updateRow函数,而此时我们需要设置它的值时应该怎么做呢?
现在我将我的解决方法给大家分享出来,如下:
1、请看下图需求:单击单元格设置第三列的值
这里写图片描述
2、代码如下:

<!--前端代码-->
<table class="easyui-treegrid" id="dg" data-options="border:false">
			<thead>
				<tr>
					<th data-options="field:'name'" width="40%">
						<font class="my-datagrid-header">事项</font>
					</th>
					<th data-options="field:'code',align:'center'" width="20%">
						<font class="my-datagrid-header">代码</font>
					</th>
					<th data-options="field:'num',align:'center',editor:'numberbox'" width="20%">
						<font class="my-datagrid-header">数量(只能填写数字)</font>
					</th>
					<th data-options="field:'dw',align:'center'" width="20%">
						<font class="my-datagrid-header">单位</font>
					</th>
				</tr>
			</thead>
		</table>
//初始化树形数据表格
initTreeGrid = function(){
		entryMess.dg = $("#dg");
		entryMess.dg.treegrid({
			url:url,//请求路径
			queryParams:{'proId':id},//请求参数
			fitColumns:true,
			idField: 'id',
			treeField: 'name',
			singleSelect: false,
			loadFilter: function(data){
				var li = data.treeData;
	       		return li;
			},
			onLoadSuccess:function(data){
				$("[node-id='ROOT']").hide();//隐藏ROOT节点
	        },
	        onClickCell:function(field,row){//单击单元格时进行内容编辑
	        	if(row != null){
        			if (editingId != undefined){
	    				entryMess.dg.treegrid('endEdit', editingId);
	    				editingId = undefined;
	    				entryMess.setParentValue(entryMess.row);//设置父节点的值为子节点相加
	    			}
	        	}
	        	entryMess.dg.treegrid('clearChecked')//单击取消之前选中行
	        	entryMess.dg.treegrid('select',row.id)//单击取消之前选中行
	        	entryMess.edit();//编辑函数
	        	
	        }
		});
	}
//编辑函数
var editingId;
	entryMess.edit = function(){
		if (editingId != undefined){
			entryMess.dg.treegrid('select', editingId);
			return;
		}
		var row = entryMess.dg.treegrid('getSelected');
		if (row){
			if(entryMess.dg.treegrid('getChildren',row.id).length==0){//子节点(孩子节点为0个)
				editingId = row.id
				entryMess.dg.treegrid('beginEdit', editingId);
				entryMess.row = row;
			}else{
				layer.alert("您只能给该项的下级项设置数额!");
			}
		}
	}
//设置父节点值
entryMess.setParentValue = function(row){
	var parent = entryMess.dg.treegrid('getParent',row.id);//获取上一个编辑的节点的父节点
	if(parent != null && parent.id !="ROOT"){
		var childs = entryMess.dg.treegrid('getChildren',parent.id);//获取孩子节点
		var num = 0//求得父节点num值
		for(var i=0; i<childs.length; i++){
			if(childs[i].num != null && childs[i].num != "" && childs[i].parent==parent.id)
				num = num + parseInt(childs[i].num);
		}
		if(num != 0){//修改父节点num值
			entryMess.dg.treegrid('select', parent.id).treegrid('beginEdit', parent.id);
			entryMess.dg.treegrid('beginEdit',parent.id);
			var options = {
				id: parent.id,
				field:'num'
			}
			var ed = entryMess.dg.treegrid('getEditor',options);
			$(ed.target).numberbox('setValue', num);
			entryMess.dg.treegrid('endEdit',parent.id);
		}
		entryMess.setParentValue(parent);//递归设置其父节点值
	}
}
文章最后发布于: 2018-04-22 18:05:11
展开阅读全文
0 个人打赏