easyui里面的加載tree的兩種方式


第一種:

符合EasyUI中Tree的Json格式,我們先看一下,格式是如何的

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":22,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

 

第一次看了之后,由於沒有思路就給放棄了,就采取了Tree中的老大ZTree,可以問題接踵而至,它與前台的EasyUi有時會發生沖突,沒辦法最后還是只能采取EasyUi中Tree,仔細分析一下,貌似可以采用算法中的遞歸來實現,於是乎小編就有了以下的解決思路。

 

1.先創建一個符合EasyUi中樹形格式的類

/*  樹的節點類
       id:節點id,對載入遠程數據很重要。
       text:顯示在節點的文本。
       state:節點狀態,'open' or 'closed',默認為'open'。當設置為'closed'時,擁有子節點的節點將會從遠程站點載入它們。
       checked:表明節點是否被選擇。
       children:子節點,必須用數組定義。
    */
    public class TreeNode
    {
        public string id { get; set; }  //節點的id值
        public string text { get; set; }  //節點顯示的名稱
        public string state { get; set; }//節點的狀態

              // 請在整個樹轉換成jsonString時,將字符串Checked換成checked,否則easyui不認

              public bool Checked { get; set; } //注意:轉成JsonTreeString時,將"Checked"替換成"checked",否則選中效果出不來的

 public List<TreeNode> children { get; set; } //集合屬性,可以保存子節點 }

 

2.把從后台查出來的對象,轉換成為EasyUi中格式

#region 2.0 將當前組織 對象 轉成 樹節點對象 +TreeNode ToNode()
        /// <summary>
        /// 將當前組織 對象 轉成 樹節點對象
        /// </summary>
        /// <returns></returns>
        public TreeNode ToNode()
        {
            TreeNode node = new TreeNode()
            {
                id = this.pid,
                text = this.OrganizationName,
                state = "open",
                Checked = false,           
                children = new List<TreeNode>()
            };
            return node;
        }
        #endregion

3.第三步通過遞歸轉換好的樹形節點,來找到自己的子節點,然后放到自己默認的屬性中

  #region 2.0 將 組織集合 轉成 樹節點集合 +List<MODEL.EasyUIModel.TreeNode> ToTreeNodes(List<Ou_Permission> listPer)
        /// <summary>
        /// 將 組織集合 轉成 樹節點集合
        /// </summary>
        /// <param name="listPer"></param>
        /// <returns></returns>
        public static List<TreeNode> ToTreeNodes(List<Organization> listPer)
        {
            List<TreeNode> listNodes = new List<TreeNode>();
            //生成 樹節點時,根據 pid=0的根節點 來生成
            LoadTreeNode(listPer, listNodes, "0");


        //if (listCurrentPermissions.Count > 0)
        //listNodes[0].Checked = false;

        SetFathersUnchecked(listNodes, argPId);

            return listNodes;
        }
        #endregion

        #region 3.0 遞歸組織集合 創建 樹節點集合
        /// <summary>
        /// 遞歸組織集合 創建 樹節點集合
        /// </summary>
        /// <param name="listPer">組織集合</param>
        /// <param name="listNodes">節點集合</param>
        /// <param name="pid">節點父id</param>
        public static void LoadTreeNode(List<Organization> listPer, List<TreeNode> listNodes, string pid)
        {
            foreach (var permission in listPer)
            {
                //如果組織父id=參數
                if (permission.pParent == pid)
                {
                    //將 組織轉成 樹節點
                    TreeNode node = permission.ToNode();
                    //將節點 加入到 樹節點集合
                    listNodes.Add(node);
                    //遞歸 為這個新創建的 樹節點找 子節點
                    LoadTreeNode(listPer, node.children, node.id);
                }
            }
        }
        #endregion

 

public static void SetFathersUnchecked(List<TreeNode> listNodes, string pid)
{
      //葉子節點,則取消父節點的勾選狀態,讓其變成不確定狀態 (否則會自動勾選父下的所有節點而顯示不正確)
     foreach (var node in listNodes)
     {
          if (node.children.Count > 0)
          {
               SetFathersUnchecked(node.children, node.id);

         if (node.children.Exists(c => c.Checked)//如果節點A下有勾選的子節點,則節點A取消勾選(界面上會自動變成不確定狀態)

|| node.children.TrueForAll(c => !c.Checked))//都未勾選,則父取消勾選
               node.Checked = false;
          }
          else
          {
               //葉子節點
          }
     }
}

public static class Extensions
{
   /// <summary>
   /// 轉換成Json串,供界面easyui使用
   /// </summary>
   public static string ToJson(this List<TreeNode> list)
   {
        string res = DataHelper.Obj2Json(list);
        res = res.Replace("\"Checked\"", "\"checked\"");
        return res;
   }
}

通過以上操作最終就返回了類似樹形結構的集合,只要在轉換為Json串就OK了,當然也可以采用strbuilder的形式來拼接,但是那樣操作起來有點太麻煩了,所以采取了遞歸的形式。

 

第二種方式:

前端頁面就不用介紹了,現在只介紹后台的代碼:

package com.ynbd.apply.entity;

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

import net.sf.json.JSONObject;
/**
* 在easyui中的tree_data.json數據中,只能有一個root節點
*
* [{
* "id":1,
* "text":"folder1",
* "iconCls":"icon-save",
* "children":[{
* "text":"File1",
* "checked":true
* }]
* }]
*
* easyui里面提供靜態方法formatTree(List<TreeJson> list)返回結果
*
* TreeJson.formatTree(treeJsonList);
* @author PTTD
*
*/

@SuppressWarnings("serial")
public class TreeJson implements Serializable{
private String id;//節點id
private String pid;//父節點id
private String text;//文本內容,節點里面的內容
private String iconCls;//easyui里面的樣式
private String state;//easyui里面節點的狀態
private String checked;//easyui里面是否被選中
private JSONObject attribute=new JSONObject();//easyui里面綁定該節點自定義屬性
private List<TreeJson> children=new ArrayList<TreeJson>();


//設置TreeJson里面的set/get方法
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 getAttribute() {
return attribute;
}
public void setAttribute(JSONObject attribute) {
this.attribute = attribute;
}
public List<TreeJson> getChildren() {
return children;
}
public void setChildren(List<TreeJson> children) {
this.children = children;
}

/*
* 編寫里面的方法
*/
public static List<TreeJson> formatTree(List<TreeJson> list){
//定義根節點
TreeJson root=new TreeJson();
//定義子節點
TreeJson node=new TreeJson();
//定義樹集合
List<TreeJson> treeList=new ArrayList<TreeJson>();
//定義存放所有父節點的parentNodes
List<TreeJson> parentNodes=new ArrayList<TreeJson>();

if(list.size()>0 && list !=null){
//獲取根節點
root=list.get(0);
//循環遍歷oracle數據庫中所有節點
for( int i = 1 ; i< list.size(); i++ ){
//獲取根節點下面的子節點
node =list.get(i);
if(node.getPid().equals(root.getId())){
//為root(根)節點增加子節點
parentNodes.add(node);
root.getChildren().add(node);
}else{
getChildrenNodes(parentNodes, node);
parentNodes.add(node) ;
}
}
}
treeList.add(root);
return treeList;
}

/*
* 循環遍歷所有的節點,確定節點與父節點之間的父子關系
*/
public static void getChildrenNodes(List<TreeJson> parentNodes, TreeJson node){
/*
* 循環遍歷所有的父節點和node里面的所有節點
*
* for循環里面的循環條件,循環變量的初始化,和循環變量的更新是否可以更改為
* 自增型的,驗證完這個以后就驗證循環變量的自增型
*/
for(int i=parentNodes.size()-1; i >= 0; i--){
//獲取當前的節點
TreeJson pnode=parentNodes.get(i);

if(pnode.getId().equals(node.getPid())){
//將獲取出來的子節點添加到相應的父節點里面去
pnode.getChildren().add(node);
//添加子節點后關閉子節點的樹形,關閉二級樹
pnode.setState("closed");
//退出本次循環
return ;
}else{
/*
* 如果查詢出來不是父子關系,就在上一級節點中刪除該節點棧
* 里面的當前的節點
*
* 繼續循環,直到檢查出該節點的子節點或者該節點里面不存在
* 子節點后才退出for循環
*/
parentNodes.remove(i);
}
}
}
}

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM