首页 > 代码库 > easyUI treeGrid 实现（一）---_parentId、beginEdit、cancelEdit、enableDnd....以及实现两个treeGrid拖拽

easyUI treeGrid 实现（一）---_parentId、beginEdit、cancelEdit、enableDnd....以及实现两个treeGrid拖拽

2024-07-22 06:51:33   213人阅读

1、描述需求：

左边树结构：省份->地市->医院->科室   右边树：科室

主要功能：1）左边树列出各级之间的关联信息 ；

    2）实现根据省份和地市进行对左边树的查询 ；

    3）选中科室行，进行对标签和介绍的修改、保存；

      4）右边数的节点拖拽到左边树的医院节点下，保存到数据库

2、所有功能实现花了近一个星期，因为之前对easyUI不了解，遇到好多问题：如下：

1）因为左边树显示的信息很多，之前数据库设计根本没有设想过要树的形式展示，_parentId出现了冲突的问题，最后无奈，在每个id加了字符串进行区分，部分json如下：

{
    "footer": [
        {
            "name": "ToTal:",
            "id": null,
            "type": null,
            "tag": "129",
            "cityId": null,
            "provinceId": null,
            "_parentId": null,
            "hospId": null,
            "introduction": null,
            "iconCls": "icon-sum",
            "deptId": null
        }
    ],
    "total": 29,
    "rows": [
        {
            "name": "北京",
            "id": "1",
            "type": null,
            "tag": null,
            "cityId": null,
            "provinceId": null,
            "_parentId": null,
            "hospId": null,
            "introduction": null,
            "iconCls": "icon-ok",
            "deptId": null
        },
        {
            "name": "海淀区",
            "id": "c1",
            "type": null,
            "tag": null,
            "cityId": null,
            "provinceId": null,
            "_parentId": "1",
            "hospId": null,
            "introduction": null,
            "iconCls": "tree-folder",
            "deptId": null
        },
        {
            "name": "海淀医院",
            "id": "h12",
            "type": "3",
            "tag": null,
            "cityId": null,
            "provinceId": null,
            "_parentId": "c1",
            "hospId": null,
            "introduction": null,
            "iconCls": "tree-folder",
            "deptId": null
        }
    ]
}
注意：_parentId固定写法，还没找到如何修改，请高手指教
2）实现编辑-beginEdit


选中一行，点击“更新”，可进行对标签和介绍两列的修改：注意：treeGrid初始化的代码:

columns : [ [ {
			title : '名称',
			field : 'name',
			width : 120
		}, {
			field : 'tag',
			title : '标签',
			width : 60,
			align : 'center',
			editor : 'text'
		}, {
			field : 'introduction',
			title : '介绍',
			width : 180,
			editor : 'text'
		} ] ],
因为名称不需要修改，所以editor的值可以不设置。更新、取消按钮的代码，是参考官网的Demo的代码，保存是根据需求实现的：

var editingId;
function edit() {
	if (editingId != undefined) {
		$('#tg').treegrid('select', editingId);
		return;
	}
	var row = $('#tg').treegrid('getSelected');
	if (row) {
		if (4 == row.type) {
			editingId = row.id;
			$('#tg').treegrid('beginEdit', editingId);
		} else {
			$.messager.alert('警告', '只能编辑科室信息！');
			return;
		}
	}
}
function cancel() {
	if (editingId != undefined) {
		$('#tg').treegrid('cancelEdit', editingId);
		editingId = undefined;
	}
}
function save() {
	if (editingId != undefined) {
		var t = $('#tg');
		t.treegrid('endEdit', editingId);
		var row = t.treegrid('getSelected');
		var treeNode = {
			'hospId' : row._parentId,
			'id' : row.id,
			'tag' : row.tag,
			'introduction' : row.introduction
		};
		$.post("hospidept_tree/update.action", treeNode, function(data) {
			cancel();
			search_event();
		});
	}
}
保存的实现要修改数据库，所以发送请求---



easyUI treeGrid 实现（一）---_parentId、beginEdit、cancelEdit、enableDnd....以及实现两个treeGrid拖拽


联系
我们