天天看點

使用easyui動态生成數的過程

在一些項目中,尤其是背景管理的頁面,常常遇到需要用樹結構來清晰的表示資料結構的問題,最近在敲項目時了解了使用easyui來生成動态的樹,十分簡單。

easyui架構中已經對樹結構進行了定義,你隻要按照它的結構定義這麼一個類,定義一些必須的屬性即可,就可以直接生成相應的樹結構。

在架構中定義的樹的結點屬性有

  • id:節點ID,可以作為參數來異步向頁面位址擷取子節點資料
  • text:節點文本
  • state:節點狀态。取值為open(預設預設值)或close。當設定為close時,會自動異步擷取子節點的資料
  • checked:指明節點是否被選中。
  • attributes:自定義屬性
  • children:以數組的形式包含子節點

用eclipse建立一個web項目,我用的是springmvc架構,别的應該也可以,配置一些基本的配置資訊後,咱們寫一個TreeNode的類

TreeNode.java

package com.tree.pojo;

import java.util.List;

public class TreeNode {
	private int id;
	private String text;
	private List<TreeNode> children;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public List<TreeNode> getChildren() {
		return children;
	}
	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}
}

           

控制層的代碼:

package com.tree.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.tree.pojo.TreeNode;

@Controller
@RequestMapping("controller")
public class GetTree {

	@RequestMapping(value = "getTree")
	@ResponseBody
	public List<TreeNode> getTree() {
		System.out.println("fuck");
		TreeNode treeNode1 = new TreeNode();
		treeNode1.setId(1);
		treeNode1.setText("學生");
		
		TreeNode treeNode2 = new TreeNode();
		treeNode2.setId(2);
		treeNode2.setText("國小");
		treeNode2.setChildren(null);
		
		TreeNode treeNode3 = new TreeNode();
		treeNode3.setId(3);
		treeNode3.setText("國中");
		
		TreeNode treeNode4 = new TreeNode();
		treeNode4.setId(4);
		treeNode4.setText("高中");
		treeNode4.setChildren(null);
		
		
		TreeNode treeNode5 = new TreeNode();
		treeNode5.setId(5);
		treeNode5.setText("初一");
		treeNode5.setChildren(null);
		TreeNode treeNode6 = new TreeNode();
		treeNode6.setId(6);
		treeNode6.setText("初二");
		treeNode6.setChildren(null);
		TreeNode treeNode7 = new TreeNode();
		treeNode7.setId(7);
		treeNode7.setText("初三");
		treeNode7.setChildren(null);
		
		//學生的子節點
		List<TreeNode> list1 = new ArrayList<TreeNode>();
		list1.add(treeNode2);
		list1.add(treeNode3);
		list1.add(treeNode4);
		treeNode1.setChildren(list1);
		
		//國中的子節點
		List<TreeNode> list2 = new ArrayList<TreeNode>();
		list2.add(treeNode5);
		list2.add(treeNode6);
		list2.add(treeNode7);
		treeNode3.setChildren(list2);
		
		//傳回最後的整個結構
		List<TreeNode> tree = new ArrayList<TreeNode>();
		tree.add(treeNode1);
		
		return tree;
	}
}

           

前端代碼:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link href="EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
<link href="EasyUI/themes/icon.css" rel="stylesheet" type="text/css"/>
<link href="EasyUI/demo.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="EasyUI/jquery.min.js"></script>
<script type="text/javascript" src="EasyUI/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
</head>
<body>
	<div style="width: 180px;height:300px">
		<ul id="tt" class="easyui-tree"></ul>
	</div>
	<script type="text/javascript">
		$('#tt').tree({
			//url : 'controller/getTree'
			url : 'controller/getTree'
		});
	</script>
</body>
</html>
           

目錄結構:

使用easyui動态生成數的過程

除了架構必要的包,還引入了兩個json的包,主要是将背景傳來的資料以json格式傳回到前台

使用easyui動态生成數的過程

用jackson也可以。

最後的效果如圖:

使用easyui動态生成數的過程

繼續閱讀