关闭

jquery easyui treegrid 实例

标签: jqueryeasyui实例
914人阅读 评论(0) 收藏 举报
分类:

最近在做一个数据字典的功能。因为是字典是多级的,并且需要以表格的形式展示,所以就用到了 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) ;
            }
        }
    }
}


 

最后是效果图

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4149次
    • 积分:119
    • 等级:
    • 排名:千里之外
    • 原创:7篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类