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(); }); } }
保存的实现要修改数据库,所以发送请求---
时间: 2024-10-15 12:14:28