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

标签：easyui   treegrid   _parentid   beginedit   canceledit   

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
        }
    ]
}

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

columns : [ [ {
			title : '名称',
			field : 'name',
			width : 120
		}, {
			field : 'tag',
			title : '标签',
			width : 60,
			align : 'center',
			editor : 'text'
		}, {
			field : 'introduction',
			title : '介绍',
			width : 180,
			editor : 'text'
		} ] ],

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拖拽

标签：easyui   treegrid   _parentid   beginedit   canceledit   

原文地址：http://blog.csdn.net/u010697983/article/details/39231849