树状结构在项目中必不可少，这篇博客来学习一下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" onclick="saveRoleNodes()">确定</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true" onclick="selectAll()">全选</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no',plain:true" onclick="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+子节点名称
时间： 2024-12-24 22:40:26