jquery easyui treegrid 实例

原创 2015年07月06日 16:44:10

最近在做一个数据字典的功能。因为是字典是多级的,并且需要以表格的形式展示,所以就用到了 treegrid空间。

 

首先 jsp页面

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<link href="css/style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="js/zTree/css/zTreeStyle/zTreeStyle.css" />
<title>字典管理</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/dialog/dialog.min.js"></script>
<script type="text/javascript" src="js/mydialog.js"></script>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/zTree/js/jquery.ztree.all-3.5.min.js"></script>

<!-- title提示 -->
<link href="js/poshytip/tip-skyblue/tip-skyblue.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="js/poshytip/jquery.poshytip.min.js"></script>
<!-- treegrid -->
<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="js/easyui/demo/demo.css">
<script type="text/javascript" src="js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<script>
$(function(){
	$('#dictTree').treegrid({
		    url:'<%=path%>/dictionary/findDictTreeGrid?dictTypeId=${dictTypeId}',
		  	idField:'id',
		    treeField:'text',
		  	columns:[[
				{field:'text',title:'字典名称',width:200,align:'left'},
				{field:'dictStatus',title:'是否有效',width:80},
				{field:'dictRemark',title:'备注',width:200}
		    ]],
		    toolbar:[{
				id:'btnedit',
				text:'编辑',
				iconCls:'icon-edit',
				handler:function(){
					$('#btnsave').linkbutton('enable');
					edit();
				}
			},{
				id:'btncut',
				text:'删除',
				iconCls:'icon-no',
				handler:function(){
					$('#btnsave').linkbutton('enable');
					dele();
				}
			}]
		});
})
function edit(){
	var node = $('#dictTree').treegrid('getSelected');
	if(node.pid==-1){
		window.parent.parent.showTip("根节点不允许编辑!");
		return;
	}
	window.parent.location.href = "<%=path%>/dictionary/dictionaryEditUI?dictNo="+node.id;
}

function dictionaryDelete(dictNo,dictTypeId) {
	//alert(depNo,depParentNo);
	if(confirm('确定删除吗?')){
		$.ajax({
			url: "<%=path%>/dictionary/dictionaryDelete",
			type: "POST",
			dataType : 'json',//返回数据格式
			async:true,//是否异步请求,true:异步,false:同步; 默认值: true
			data: {
				dictNo:dictNo,
				dictTypeId:dictTypeId
			},
			success: function(result){
				//result = eval(result);
				//alert(result.success);
				if(result.success!=true){
					//window.parent.parent.showAlert(result.msg,"warning");
				}else{
					//刷新页面
					refreshByDel();
					//提示信息
					window.parent.parent.showTip(result.msg);
					//window.parent.parent.showtips("删除成功");
					window.parent.location.href="<%=path%>/dictionary/dictionaryList?dictTypeId="
												+ dictTypeId;
									}
								},
				error : function(XMLHttpRequest, textStatus,
						errorThrown) {
					window.location.href = CONSTANTS.PATH
							+ '/common/goErrorPage';
				}
			});
	}
}
//*********************************************************************************删除
		function dele(){
			 var node = $('#dictTree').treegrid('getSelected');
			 dictionaryDelete(node.id,"");
		}
</script>
</head>
<body>
	<table id="dictTree" class="easyui-treegrid" style="width:700px;height:600px">
	</table>
</body>
</html>
 


然后action  (这里我们系统用的是 springmvc框架) 在这里发现一个很好的地方  List<TreeJson> treeList = TreeJson.formatTree(list); 不需要转换成string形式的json了 list可以直接传到jsp页面

 

	@RequestMapping(value = "/findDictTreeGrid", method = RequestMethod.POST)
	@ResponseBody
	public List<TreeJson> findDictTreeGrid(String dictTypeId) throws Exception {

		List<TreeJson> list = dictionaryService.findDictTreeGrid(dictTypeId);
		List<TreeJson> treeList = TreeJson.formatTree(list);
		return treeList;
	}


最后是 easyui-treegrid插件 所需要的 json 后台组装 的java代码。一开始没有思路  最后在网上找到了一串代码 稍微改动了一些使其更适合我的数据   在这里感谢这段代码的原作者。源地址为:http://www.cnblogs.com/lwenbo/archive/2012/12/19/2824959.html

 

有一点需要注意的是 sql的查询字段要和实体类(TreeJson.java)属性一直

	<select id="queryDictTreeGrid"  resultMap="TreeJsonResultMap">
		select dict_no id,dict_parent_no pid,dict_name text,dict_status,dict_remark from T_Dictionary where 1=1
		<if test="dictTypeId != null  and dictTypeId !=''">
		 and dict_type_id = #{dictTypeId,jdbcType=VARCHAR}
		</if>
		 order by dict_no
	</select>

 

这里是我稍加改动后的组装 json 的java代码

package com.glodon.crm.entity;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONObject;
public class TreeJson {
    private String id ; 
    private String pid ; 
    private String text ; 
    private String iconCls ;
    private String state ; 
    private String checked ; 
    private String dictStatus;
    private String dictRemark;
    private JSONObject attributes = new JSONObject() ; 
    private List<TreeJson> children = new ArrayList<TreeJson>() ;
    
    /******** setter and getter **********/
    public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}

	public String getPid() {
		return pid;
	}

	public void setPid(String pid) {
		this.pid = pid;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public String getIconCls() {
		return iconCls;
	}

	public void setIconCls(String iconCls) {
		this.iconCls = iconCls;
	}

	public String getState() {
		return state;
	}

	public void setState(String state) {
		this.state = state;
	}

	public String getChecked() {
		return checked;
	}

	public void setChecked(String checked) {
		this.checked = checked;
	}

	public JSONObject getAttributes() {
		return attributes;
	}

	public void setAttributes(JSONObject attributes) {
		this.attributes = attributes;
	}

	public List<TreeJson> getChildren() {
		return children;
	}

	public void setChildren(List<TreeJson> children) {
		this.children = children;
	}

	public static long getSerialversionuid() {
		return serialVersionUID;
	}
	
	
	public String getDictStatus() {
		return dictStatus;
	}

	public void setDictStatus(String dictStatus) {
		this.dictStatus = dictStatus;
	}

	public String getDictRemark() {
		return dictRemark;
	}

	public void setDictRemark(String dictRemark) {
		this.dictRemark = dictRemark;
	}

public static List<TreeJson> formatTree(List<TreeJson> list) {

        TreeJson root = new TreeJson();
        TreeJson node = new TreeJson();
        List<TreeJson> treelist = new ArrayList<TreeJson>();// 拼凑好的json格式的数据
        List<TreeJson> parentnodes = new ArrayList<TreeJson>();// parentnodes存放所有的父节点
        
        if (list != null && list.size() > 0) {
            root = list.get(0) ;
            //循环遍历oracle树查询的所有节点
            for (int i = 1; i < list.size(); i++) {
                node = list.get(i);
                if(node.getPid().equals(root.getId())){
                    //为tree root 增加子节点
                    parentnodes.add(node) ;
                    root.getChildren().add(node) ;
                }else{//获取root子节点的孩子节点
                    getChildrenNodes(parentnodes, node);
                    parentnodes.add(node) ;
                }
            }    
        }
        treelist.add(root) ;
        return treelist ;

    }

	private static void getChildrenNodes(List<TreeJson> parentnodes, TreeJson node) {
        //循环遍历所有父节点和node进行匹配,确定父子关系
        for (int i = parentnodes.size() - 1; i >= 0; i--) {
            
            TreeJson pnode = parentnodes.get(i);
            //如果是父子关系,为父节点增加子节点,退出for循环
            if (pnode.getId().equals(node.getPid())) {
                pnode.setState("closed") ;//关闭二级树
                pnode.getChildren().add(node) ;
                return ;
            } else {
                //如果不是父子关系,删除父节点栈里当前的节点,
                //继续此次循环,直到确定父子关系或不存在退出for循环
               // parentnodes.remove(i) ;
            }
        }
    }
}


 

最后是效果图

 

easyui的treegrid开发使用

资源引用问题因为目前的项目中已经有了许多其他的js插件,有一些插件与easyui不兼容,所以考虑将easyui的资源进行懒加载。懒加载就是在页面一开始加载时候不加载easyui的资源文件,等到使用的时...

jquery easyui:EasyUI Treegrid 树形网格

用jquery easyui 的 Treegrid 树形网格 进行数据展示

easyUI treegrid的使用

前段时间,实习时候接到一个任务,jiang

Jquery easyUI_treegrid学习总结

EasyUI简单实用,虽没有bootstrap界面框架漂亮,但对于没有UE的程序员开发和对公司内部网站已经是很不错的选择了。前阶段工作中,需要实现表格树,我想到了用Easyui中的Treegrid组件...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

easyUI TreeGrid

@author YHC 从$.fn.datagrid.defaults.继承,覆盖默认值$.fn.treegrid.defaults. treegrid 是使用显示分层数据在grid中,tre...

jquery easyui treegrid使用小结:二

在实际应用中可能会碰到不同的需求,比如会根据每行不同的参数或属性设置来设置同列不同的editor类型,这时原有的例子就显的有点太过简单,不能实现我们的需求,现在应用我在项目中的操作为例,显示下实现同列...
  • educast
  • educast
  • 2012年04月13日 09:23
  • 33119

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

EasyUI的TreeGrid应用

权限系统的菜单管理采用了EasyUI的TreeGrid,实现了菜单管理的新增、删除、修改、初始化、拖拽改变顺序或层级等,贴出代码: 1、view页面 $(function...

jquery treegrid实例

function organDatagrid(){ $organ_treegrid = $('#organ_treegrid').treegrid({ url:ctx+'/petition...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery easyui treegrid 实例
举报原因:
原因补充:

(最多只允许输入30个字)