码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-09-12 17:11:03      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:easyui   treegrid   _parentid   beginedit   canceledit   

1、描述需求:

bubuko.com,布布扣

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

主要功能: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

bubuko.com,布布扣

选中一行,点击“更新”,可进行对标签和介绍两列的修改:注意: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拖拽

标签:easyui   treegrid   _parentid   beginedit   canceledit   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!