EasyUI uses ul and li tags to complete the combination of the tree structure. A ul can be regarded as a parent node, li as a child node of the tree structure, and the ul tag nested in the li tag can be used as a parent node. Repeat to achieve the function of completing the complex tree structure.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 必须引用的css文件 -->
<link rel="stylesheet" href="/static/js/easyui/themes/default.css"/>
<link rel="stylesheet" href="/static/css/module.css"/>
<!-- 引入公用js文件 -->
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/easyui/jquery.easyui.min.js"></script>
<title>easyui tree的使用</title>
</head>
<body>
<ul class="easyui-tree">
<li><span>红楼梦</span>
<ul>
<li>第1回 甄士隐梦幻识通灵 贾雨村风尘怀闺秀</li>
<li>第2回 贾夫人仙逝扬州城 冷子兴演说荣国府</li>
<li>第3回 托内兄如海荐西宾 接外孙贾母惜孤女</li>
<li>第4回 薄命女偏逢薄命郎 葫芦僧判断葫芦案</li>
<li>第5回 贾宝玉神游太虚境 警幻仙曲演红楼梦</li>
</ul>
</li>
<li><span>水浒传</span></li>
<li><span>三国演义</span>
<ul>
<li>第001回 宴桃园豪杰三结义 斩黄巾英雄首立功</li>
<li>第002回 张翼德怒鞭督邮 何国舅谋诛宦竖</li>
<li>第003回 议温明董卓叱丁原 馈金珠李肃说吕布</li>
<li>第004回 废汉帝陈留践位 谋董贼孟德献刀</li>
<li>第005回 发矫诏诸镇应曹公 破关兵三英战吕布</li>
</ul>
</li>
<li><span>西游记</span></li>
</ul>
</body>
</html>
This is the simplest tree structure diagram, you can freely modify the nested ul, li. The following example will show if the nodes of the tree structure are loaded from remote.
<body>
<ul class="easyui-tree" id="tree" url="tree_data.json">
</ul>
</body>Here I omit the content of the header of the head tag, because the content here is exactly the same as the previous case, and this case does not add additional css, js files and additional js code. You just need to add your url address, your json data definition should be like:
[
{
"id":"1",
"text":"北京",
"children":[
{
"id":"2",
"text":"朝阳"
},{
"id":"6",
"text":"东城",
"children":[
{
"id":"8",
"text":"王府井"
},{
"id":"9",
"text":"西单"
}
]
},{
"id":"7",
"text":"西城"
}
]
},{
"id":"3",
"text":"天津"
},{
"id":"4",
"text":"上海"
},{
"id":"5",
"text":"深圳"
}
]
We first prepare the tree structure data to be displayed at one time, and wrap the data we want to display in a pair of curly brackets []. The node is given in the form of a key-value pair with curly brackets {}, and the id is The id and text of each node are the text displayed for each node. Of course, I know that this method of loading data at one time is not enough for daily work, so let's see this case if you want to dynamically add child nodes to nodes.
<body>
<div style="margin-bottom: 10px;">
<a href="javascript:void(0);" onclick="appendnodes()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加节点</a>
</div>
<div style="width:200px;height:auto;border:1px solid #ccc;">
<ul id="tt" class="easyui-tree" url="fruit_data.json"></ul>
</div>
</body>
<script type="text/javascript">
function appendnodes() {
var node = $("#tt").tree("getSelected");
if(node) {
var nodes = [{
"id":"1",
"text":"pear"
},{
"id":"2",
"text":"grape"
}];
$('#tt').tree('append', {
parent:node.target,
data:nodes
});
}
}
</script>This case shows a tree diagram of fruit types, and the loaded json string is as follows:
[{
"id":0,
"text":"Foods",
"children":[{
"id":1,
"text":"Fruits",
"children":[{
"id":11,
"text":"apple"
},{
"id":12,
"text":"orange"
}]
},{
"id":2,
"text":"Vegetables",
"state":"closed",
"children":[{
"id":21,
"text":"tomato"
},{
"id":22,
"text":"carrot"
},{
"id":23,
"text":"cabbage"
},{
"id":24,
"text":"potato"
},{
"id":25,
"text":"lettuce"
}]
}]
}]When you click the "Add Node" button, the appendnodes function will be triggered. This function first determines whether you have selected a node, and if it is not selected, it will not be processed. If a node is selected, append child nodes to that node. The key code statements are:
$('#tt').tree('append', {
parent:node.target,
data:nodes
});
Although this case can dynamically add nodes, I know it still can't satisfy your daily work, you want to interact with the background. The following is an example of interacting with EasyUi with Java as the background.
<body>
<div style="margin-bottom: 10px;">
<a href="javascript:void(0);" onclick="appendnodes()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加节点</a>
</div>
<div style="width:300px;height:auto;border:1px solid #ccc;">
<ul id="tt" class="easyui-tree" url="company_data.json"></ul>
</div>
</body>
<script type="text/javascript">
function appendnodes() {
var node = $("#tt").tree("getSelected");
if(node) {
$.get("/drill/demo/wellInfo/tree","key="+node.text,function(data,status,xhr){
$("#tt").tree('append',{
parent:node.target,
data:data.rows
});
},"json");
}
}
</script> @RequestMapping(value="/tree", method={RequestMethod.GET})
public PageInfo tree(HttpServletRequest request) {
String key = request.getParameter("key");
PageInfo pageInfo = new PageInfo();
List<Map<String, String>> rows = new LinkedList<Map<String, String>>();
Map<String, String> e = new HashMap<String, String>();
e.put("id", "1");
e.put("text", key+"子公司1");
rows.add(e);
Map<String, String> e1 = new HashMap<String, String>();
e1.put("id", "2");
e1.put("text", key+"子公司2");
rows.add(e1);
pageInfo.setRows(rows);
pageInfo.setTotal(rows.size());
return pageInfo;
}The only difference between the html code of this example and the previous example is that there is an additional $.get(url, data, callback, dataType) code that interacts with ajax. When the ajax request successfully calls the echo function, add a child node to on the parent node. Of course, my background is passed back through Java's Spring MVC framework. I didn't write @ResponseBody here because the @RestCotroller annotation has been written in my Controller class . If your Controller class does not have this annotation, please add it in your Controller class. Add the @ResponseBody annotation to the method , so that Spring MVC will automatically convert your returned data to json format instead of jumping to the view.
As for the paging class I encapsulated, you can also refer to it, after all, this is not the most important.
public class PageInfo<T> {
private int pageNum;
private int pageSize;
private List<T> rows;
private Page<T> page;
public PageInfo() {
super();
}
public PageInfo(int pageNum, int pageSize) {
super();
this.pageNum = pageNum;
this.pageSize = pageSize;
}
public void startPage() {
page = PageHelper.startPage(pageNum, pageSize);
}
public long getTotal() {
return page.getTotal();
}
public void setTotal(long total) {
if(page == null) {
page = new Page<T>();
}
page.setTotal(total);
}
public List<T> getRows() {
return rows;
}
public void setRows(List<T> rows) {
this.rows = rows;
}
@JsonIgnore
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
@JsonIgnore
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
}