樹狀結構在項目中必不可少，這篇博客來學習一下Easyui的tree。
前臺JSP
<span style="font-size:14px;"><body>
<div id="leftDiv" class="easyui-layout" fit="true">
<div region="center" border="false" border="false">
<div id="grid"></div>
</div>
<div id="rightDiv" region="east" split="true" style="width:330px;">
<div style="padding-top: 5px;padding-bottom: 5px;position: relative;background-color: #F4F4F4;">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" οnclick="saveRoleNodes()">確定</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true" οnclick="selectAll()">全選</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no',plain:true" οnclick="unSelectAll()">全不選</a>
</div>
<span style="white-space:pre"> </span><div id="tree"></div>
</div>
</div>
</body>
<script type="text/javascript">
onload = function(){
$('#grid').datagrid({
url:getRootPath()+"/sysrole/roleList.do;"+$.now(),
columns:[[
{field:'id',title:'角色編號',width:100,align:'center',hidden:true},
{field:'crolename',title:'角色名稱',width:300,align:'center'},
{field:'biskeep',title:'是否禁用',width:200,align:'center',
formatter: function(value,row,index){
if (value=="N"){
return "否";
} else {
return "是";
}
}
},
{field:'cdiscription',title:'備註',width:300,align:'center'}
]],
singleSelect:true
});
}
$('#tree').tree({
url : getRootPath()+'/sysnode/nodeList.do',
lines:true,
checkbox:"true",
loadFilter : function(rows) {
return convert(rows);
}
});
function convert(rows){
function exists(rows, parentId){
for(var i=0; i<rows.length; i++){
if (rows[i].id == parentId) return true;
}
return false;
}
var nodes = [];
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (!exists(rows, row.parentId)){
nodes.push({
id:row.id,
text:row.name
});
}
}
var toDo = [];
for(var i=0; i<nodes.length; i++){
toDo.push(nodes[i]);
}
while(toDo.length){
var node = toDo.shift();
for(var i=0; i<rows.length; i++){
var row = rows[i];
if (row.parentId == node.id){
var child = {id:row.id,text:row.name};
if (node.children){
node.children.push(child);
} else {
node.children = [child];
}
toDo.push(child);
}
}
}
return nodes;
}
$('#grid').datagrid({
onClickRow: function(index,field,value){
$.ajax({
type: "POST",
async: false,
url: getRootPath()+"/sysrole2node/getNodeByRoleId.do",
data:{
sysRoleId: field.id
} ,
dataType: "json",
success: function(data){
var arrs=data;
uncheckALL();
nodeids=[];
if(arrs.length>0){
for(var i=0;i<arrs.length;i++){
//根據節點Id獲取節點
var node = $('#tree').tree('find', arrs[i].nodeid);
var childrens= $('#tree').tree('getChildren', node.target);
if(childrens.length==0){
$('#tree').tree('check', node.target);
}
nodeids.push(arrs[i].id);
}
}
}
});
}
});
//全選/反選
function checkALL(){
var roots = $('#tree').tree('getRoots');
for(var i=0;i<roots.length;i++){
var node=$('#tree').tree('find',roots[i].id);
$('#tree').tree('check', node.target);
}
}
function uncheckALL(){
var roots = $('#tree').tree('getRoots');
for(var i=0;i<roots.length;i++){
var node=$('#tree').tree('find',roots[i].id);
$('#tree').tree('uncheck', node.target);
}
}
//保存角色對應的節點信息
function saveRoleNodes(){
if($("#grid").datagrid("getSelected")==null||$("#grid").datagrid("getSelected")==""){
alert("請先選中一條角色記錄！");
return;
}
var sysRoleNodeList=[];
var selectedSysRole = $("#grid").datagrid("getSelected");
var selectedSysNode = $('#tree').tree("getChecked");
var sysRoleId=selectedSysRole.id;
for(var i=0;i<selectedSysNode.length;i++)
{
SysRole2node=new Object();
SysRole2node.nodeid=selectedSysNode[i].id;
SysRole2node.roleid=sysRoleId;
sysRoleNodeList.push(SysRole2node);
}
var sysRoleNodeString=JSON.stringify(sysRoleNodeList);
$.ajax({
type: "POST",
url: "http://localhost:8080/buildPrice/sysrole2node/saveRoleNode.do",
data: {
sysRoleNodeString: sysRoleNodeString,
sysRoleId:sysRoleId
},
dataType: "json",
success: function(data){
alert(data.message);
}
});
}
</script></span><span style="font-size:18px;">
</span>後臺Controller
<span style="font-size:18px;"> </span><span style="font-size:14px;">@Autowired
private SysRole2NodeService service;
// 張磊磊---------保存角色菜單對應信息---------begin
@RequestMapping("/saveRoleNode.do")
@ResponseBody
@Override
@SuppressWarnings("all")
public Object saveRoleNode(HttpServletRequest request) {
String sysRoleNodeString = CommonUtil.toNull(request.getParameter("sysRoleNodeString"));
String sysRoleId = CommonUtil.toNull(request.getParameter("sysRoleId"));
try {
JSONArray jsonArray = JSONArray.fromObject(sysRoleNodeString);
List<SysRole2node> role2nodelist = (List<SysRole2node>) JSONArray.toCollection(jsonArray, SysRole2node.class);
// 1、在SysRole2Node表中清空該RoleId爲sysRoleId的所有記錄
service.deleteR2NByRoleid(sysRoleId);
// 2、將實體集合添加到SysRole2Node表中
service.saveEntities(role2nodelist);
return createSuccessMessage("操作成功").toString();
} catch (Exception e) {
e.printStackTrace();
return createErrorMessage(e.getMessage()).toString();
}
}
// 張磊磊---------保存角色菜單對應信息---------end
// 張磊磊---------根據角色Id查詢對應的node集合---------start
@Override
@RequestMapping("getNodeByRoleId.do")
@ResponseBody
public String getNodeByRoleId(HttpServletRequest httpServletRequest) {
String result = "";
try {
String sysRoleId = CommonUtil.toNull(httpServletRequest.getParameter("sysRoleId"));
List<SysRole2node> sysRole2nodes = service.getNodeByRoleId(sysRoleId);
result = JSONArray.fromObject(sysRole2nodes).toString();
} catch (Exception e) {
e.printStackTrace();
result=createErrorMessage(e.getMessage()).toString();
}
return result;
}
// 張磊磊---------根據角色Id查詢對應的node集合---------end</span><span style="font-size:18px;">
</span>HQL查詢結構
<span style="font-size:14px;">public List<Object> nodeLists(){
<span style="white-space:pre"> </span>String hql="select new map(sysnode.id as id, sysnode.parentid as parentId,sysnode.cnodetext as name,sysnode.cnodecode)from SysNode sysnode";
<span style="white-space:pre"> </span>List<Object> nodeList=basedao.queryByHQL(hql, null, null);
<span style="white-space:pre"> </span>return nodeList;
}</span>備註：因爲這裏採用簡答格式的Json數據（Easyui的樹需要個一種格式），所以這裏用HQL進行查詢！
查出來的格式，如下：
[
{"id":1,"parendId":0,"name":"系統管理"},
{"id":2,"parentId":1,"name":"用戶管理"},
{"id":3,"parentId":1,"name":"菜單管理"}
]這種格式，和ztree的那種簡單Json的樹沒什麼區別，都是子節點Id+父節點Id+子節點名稱
