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

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

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

Jquery easyui treegrid实现树形表格的行拖拽

前几天修改了系统的一个功能——实现树形列列表的行拖拽,以达到排序的目的.现在基本上功能实现,现做一个简单的总结. 1.拿到这个直接网上搜,有好多,但是看了后都觉得不是太复杂就是些不是特别想看的例子,自己太懒(对自己不是很熟悉的东西是不愿意第一去看的).结果选择良久,还是jquery easyui treegrid这个例子自己看起来比较熟悉.于是就专心研究了,从官方网站http://www.jeasyui.net/下载了demo,开始研读.先把jsp页面一些代码贴出 <link rel="s

easyUI拖拽功能讲解以及多选拖拽的实现

首先我们考虑这样一个业务场景:一个维修部门中分了N个维修组,维修部门的负责人需要将这个部门的维修人员分配到这些组里去. 当然,他可以选中一个维修人员,然后给他分配维修组,但是从人性化角度考虑,若利用拖拽是否更加的快捷和明确呢? 比如我们可以将维修组和维修人员都列出来,然后只需要将维修人员拖动到对应的组里即可完成分组. 另外,由于一个个拖还是太繁琐,还需要实现选中多个维修人员一起分组.那么我们下面一步步来,先实现单个的拖拽功能,再加入多选拖动支持~ 单选拖动 首先,根据我们刚才描述的场景,简单设计

用easyui从servlet传递json数据到前端页面的两种方法

用easyui从servlet传递json数据到前端页面的两种方法 两种方法获取的数据在servlet层传递的方法相同,下面为Servlet中代码,以查询表中所有信息为例. //重写doGet方法 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stu

EasyUI, Dialog 在框架页(ifrmae)的Top页面弹出时,拖拽Dialog边缘(以改变窗口大小),UI界面被卡死的解决办法

将Dialog的modal属性设置为true,可以解决卡死的问题(但会给用户使用体验带来影响) 1 var par = { 2 title: This.title, 3 width: This.width, 4 height: This.height, 5 cache: This.cache, 6 modal: This.modal, 7 resizable: This.resizable, 8 maximizable: This.maximizable, 9 onResize: This.on

Easyui datagrid 实现表格记录拖拽

datagrid 实现表格记录拖拽 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 jquery-easyui-datagrid-dnd 下载地址: http://www.jeasyui.net/demo/193.html 实现 编辑datagrid-dnd.js,注释头尾两行代码,如下 //(function($){ //})(jQuery); 关键代码 引入js文件 <script type="text/javascript" src

拖拽生成组织架构

因为项目需要 找了下网上可以拖拽生成组织架构的资料 找到了 jOrgChart这个控件 花半天自己实现了拖拽生成 用的EASYUI Draggable Droppable 当然熟悉 JQUERYUI 的 也可以用 JQUERY UI 的 拖拽 功能 只完成很基本的功能 但愿能帮到需要用的人^^ <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="tex

基于EasyUI Treegrid的权限管理资源列表

1. 前言 最近在开发系统权限管理相关的功能,主要包含用户管理,资源管理,角色管理,组类别管理等小的模块.之前的Web开发中也用过jQueryEasyUI插件,感觉这款插件简单易用,上手很快.以前用到的主要是Datagrid组件,这次为了区分资源的父子关系,打造更好的用户体验,遂探索一下Treegrid组件. 2.jQueryEasyUI简介 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的U

easyUI中treegrid组件构造树形表格(简单数据类型)+ssm后台

这几天做的项目要求用树形表格的形式展示一部分数据,于是就想到了使用easyUI的treegrid组件,但几经翻查各种资料,发现数据类型大多采取标准数据类型,即包含children元素的数据类型,小编查遍各种资料,几经实验,小编找到了一种使用简单数据类型的展示树形表格的方法.在这里介绍给大家,仅供参考: 框架使用的是ssm框架,数据库用的是oracle,其中数据库中要展示的表设计成大致如下的样子: 参考了一下easyUI的demo中给出的数据类型,如下格式: 打开里面显示如下: 这是一个json串

C#生成easyui tree-grid中的json字符串

最近项目用到EasyUI的treegrid控件实现树形Table,实现效果如下: treegrid需要的json字符串样式如下 [{ "id":1, "name":"C", "size":"", "date":"02/19/2010", "children":[{ "id":2, "name":"P