如何使用EasyUI Tree控制元件
阿新 • • 發佈：2018-12-16
樹狀資料結構是專案開發中經常使用的，使用EasyUI開發前端介面最好使用EasyUI提供的Tree控制元件，使用起來非常容易。
樹狀資料結構遍歷有兩種方法：
一是：使用遞迴呼叫窮舉資料結構的每一級節點，程式設計比較麻煩，
二是：使用非同步載入的方式，每次點選滑鼠展開當前節點的下一級節點，程式設計比較簡單。
EasyUI樹控制元件
建立頁面使用佈局管理器分為左右兩部分
<body class="easyui-layout"> <div data-options="region:'west',title:'部門導航'" style="width:200px;padding:0px;"> <ul id="tree" class="easyui-tree"> </ul> </div> <div data-options="region:'center',title:'部門管理'"> </div> </body>
在頁面就緒事件初始Tree控制元件資料
根節點使用了靜態資料
<script>
$(document).ready(function()
{
$('#tree').tree({
data:[{'id':'1','text':'集團公司','state':'closed',
'attributes':{"priority":null,"parentId":null,"isload":"false"}}]
})
}
);
</script>
設計資料庫表
CMD>mysql -uroot -proot create database w1 character set utf8; use w1; //開啟資料庫w1 create table ORGMODEL_ORG (id int auto_increment primary key, name varchar(200),priority int,parentid int, path varchar(200),fullname varchar(500)); charset gbk; insert into ORGMODEL_ORG(name,priority,parentid) values('集團公司',0,null); insert into ORGMODEL_ORG(name,priority,parentid) values('銷售公司',1,1); insert into ORGMODEL_ORG(name,priority,parentid) values('生產公司',2,1); insert into ORGMODEL_ORG(name,priority,parentid) values('財務部',1,2); insert into ORGMODEL_ORG(name,priority,parentid) values('審計科',1,4); insert into ORGMODEL_ORG(name,priority,parentid) values('生產車間',2,3);
在這裡插入程式碼片
設計部門實體類OrgInfo
package com.test.model; import java.io.Serializable; import java.sql.Date; /** * 部門實體類 * @author ChenQiXiang * */ public class OrgInfo implements Serializable{ //部門ID，部門的唯一標識 private Integer id = null; //部門名稱 private String name = null; //部門父ID private Integer parentId = null; //部門排序 private Integer priority = 0; //部門路徑 private String path = null; //部門全名稱 private String fullName = null; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Integer getParentId() { return parentId; } public void setParentId(Integer parentId) { this.parentId = parentId; } public Integer getPriority() { return priority; } public void setPriority(Integer priority) { this.priority = priority; } public String getPath() { return path; } public void setPath(String path) { this.path = path; } public String getFullName() { return fullName; } public void setFullName(String fullName) { this.fullName = fullName; } }
樹控制元件資料類
package com.test.model;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class TreeInfo {
public String id = null;
private String text = null;
private String iconCls = null;
private String url = null;
private String state = null;
private Map attributes = new HashMap();
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
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 getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public void addProp(String key,String value)
{
attributes.put(key,value);
}
public Map getAttributes() {
return attributes;
}
public void setAttributes(Map attributes) {
this.attributes = attributes;
}
}
設計操作資料庫方法
Mapper.xml
<select id="getOrgList" resultType="com.test.model.OrgInfo">
select * from ORGMODEL_ORG
</select>
<select id="getRootOrg" resultType="com.test.model.OrgInfo">
select * from ORGMODEL_ORG where parentid is null
</select>
<select id="getOrgById" resultType="com.test.model.OrgInfo">
select * from ORGMODEL_ORG where id=#{id}
</select>
<select id="getChildOrg" resultType="com.test.model.OrgInfo">
select * from ORGMODEL_ORG where parentid=#{id}
</select>
<insert id="saveOrg" parameterType="com.test.model.OrgInfo"
useGeneratedKeys="true" keyColumn="id" keyProperty="id">
insert into ORGMODEL_ORG(name,parentId,priority,path,fullname)
values(#{name},#{parentId},#{priority},#{path},#{fullName})
</insert>
Mapper介面
//獲取所有部門列表
public List<OrgInfo> getOrgList();
//根據部門ID獲取部門物件
public OrgInfo getOrgById(@Param("id") Integer id);
//根據部門ID獲取下屬部門列表
public List<OrgInfo> getChildOrg(@Param("id") Integer id);
//獲取根部門
public OrgInfo getRootOrg();
public void saveOrg(OrgInfo oi);
服務介面
/**
* 獲取所有部門列表
*
* @return List<UserInfo>
*/
public List<OrgInfo> getOrgList() throws Exception;
/**
* 根據部門ID獲取部門物件
* @param id 部門ID
* @return List<UserInfo>
*/
public OrgInfo getOrgById(@Param("id") Integer id) throws Exception;
//根據部門ID獲取下屬部門列表
public List<OrgInfo> getChildOrg(Integer id);
//獲取根部門
public OrgInfo getRootOrg();
public void saveOrg(OrgInfo oi);
服務實現類
@Override
public List<OrgInfo> getOrgList() throws Exception{
try
{
return mapper.getOrgList();
}
catch(Exception e)
{
throw e;
}
}
@Override
public OrgInfo getOrgById(Integer id) throws Exception{
try
{
return mapper.getOrgById(id);
}
catch(Exception e)
{
throw e;
}
}
@Override
public List<OrgInfo> getChildOrg(Integer id) {
try
{
return mapper.getChildOrg(id);
}
catch(Exception e)
{
e.printStackTrace();
}
return null;
}
@Override
public OrgInfo getRootOrg() {
try
{
return mapper.getRootOrg();
}
catch(Exception e)
{
e.printStackTrace();
}
return null;
}
@Override
public void saveOrg(OrgInfo oi) {
try
{
mapper.saveOrg(oi);
}
catch(Exception e)
{
e.printStackTrace();
}
}
定義頁面Tree控制元件節點展開前事件
每次展開介面從後臺載入當前節點的下一級節點，並新增到本節點上。
$(document).ready(function()
{
$('#tree').tree({
data:[{'id':'1','text':'集團公司','state':'closed',
'attributes':{"priority":null,"parentId":null,"isload":"false"}}],
onBeforeExpand:function(node,param)
{
if(node.attributes.isload=='false')
{
$.ajaxSettings.async = false;
var url = '/orgchild?id='+node.id;
$.get(url,function(data)
{
$('#tree').tree('append', {
parent: node.target,
data: data
});
}
)
$.ajaxSettings.async = true;
node.attributes.isload = 'true';
}
}
})
}
);
Controller層新增相應的
方法
@ResponseBody
@RequestMapping("/orgroot")
public List<TreeInfo> orgroot()
{
OrgInfo root = orgmodel.getRootOrg();
List<TreeInfo> trees = new ArrayList<TreeInfo>();
TreeInfo rootTree = new TreeInfo();
rootTree.setId(root.getId().toString());
rootTree.setText(root.getName());
rootTree.setState("closed");
Map attributes = new HashMap();
attributes.put("parentId",root.getParentId());
attributes.put("priority", root.getPriority());
attributes.put("path", "/");
attributes.put("fullName", "/"+root.getName());
rootTree.setAttributes(attributes);
trees.add(rootTree);
return trees;
}
@ResponseBody
@RequestMapping("/orgchild")
public List<TreeInfo> orgchild(Integer id)
{
List<OrgInfo> child = orgmodel.getChildOrg(id);
List<TreeInfo> trees = new ArrayList<TreeInfo>();
for(OrgInfo oi:child)
{
TreeInfo rootTree = new TreeInfo();
rootTree.setId(oi.getId().toString());
rootTree.setText(oi.getName());
rootTree.setState("closed");
Map attributes = new HashMap();
attributes.put("parentId", oi.getParentId());
attributes.put("priority", oi.getPriority());
attributes.put("path", oi.getPath());
attributes.put("fullName", oi.getFullName());
attributes.put("isload", "false");
rootTree.setAttributes(attributes);
trees.add(rootTree);
}
return trees;
}
點選節點事件處理
$(document).ready(function()
{
$('#tree').tree({
data:[{'id':'1','text':'集團公司','state':'closed',
'attributes':{"priority":null,"parentId":null,"isload":"false"}}],
onBeforeExpand:function(node,param)
{
if(node.attributes.isload=='false')
{
$.ajaxSettings.async = false;
var url = '/orgchild?id='+node.id;
$.get(url,function(data)
{
$('#tree').tree('append', {
parent: node.target,
data: data
});
}
)
$.ajaxSettings.async = true;
node.attributes.isload = 'true';
}
},
onExpand: function(node){
},
onClick: function(node){
$('#id').val(node.id);
$('#name').textbox('setValue',node.text);
$('#priority').textbox('setValue',node.attributes.priority);
$('#parentId').val(node.attributes.parentId);
}
})
}
);
新增Form表單
<body class="easyui-layout">
<div data-options="region:'west',title:'部門導航'" style="width:200px;padding:0px;">
<ul id="tree" class="easyui-tree">
</ul>
</div>
<div data-options="region:'center',title:'部門管理'">
<form id="frm" method="post">
<input type="hidden" id="id" name="id"/>
<input type="hidden" id="parentId" name="parentId"/>
<div style="margin-left:50px;margin-top:30px">
<input class="easyui-textbox" type="text" id="name" name="name" data-options="label:'部門名稱:'" />
</div>
<div style="margin-left:50px;margin-top:30px">
<input class="easyui-textbox" type="text" id="priority" name="priority" data-options="label:'部門優先順序:'" />
</div>
<div style="margin-left:50px;margin-top:30px">
<a id="btn" onclick="addsuborg()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增子部門</a>
<a id="btn" onclick="updatesuborg()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">修改部門</a>
<a id="btn" onclick="deletesuborg()" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">刪除部門</a>
</div>
</form>
</div>
</body>
新增子節點功能
JS事件
<script>
function addsuborg()
{
var frmdata = $('#frm').serialize();
$.ajax(
{
url:'/orgsubsave',
data:frmdata,
success:function(data){
if(data == true)
{
$('#tree').tree({
data:[{'id':'1','text':'集團公司','state':'closed',
'attributes':{"priority":null,"parentId":null,"isload":"false"}}],
});
}
}
})
}
</script>
Controller儲存方法
@ResponseBody
@RequestMapping("/orgsubsave")
public boolean orgsubsave(OrgInfo oi)
{
Integer parentId = oi.getId();
oi.setId(null);
oi.setParentId(parentId);
boolean rtn = sendmsg.sendSyncMsg(oi);
return rtn;
}
