java ztree treegrid_使用ztree.js，受益一生，十分钟学会使用tree树形结构插件

看到ztree.js，这几个字眼，毋庸置疑，那肯定就是tree树形结构了，曾经的swing年代有jtree，后来jquery年代有jstree和treeview，虽然我没写过，但是我见过，一些小功能做起来比较繁琐，几个功能做了一个月，当然了有能力的关系，也有插件易用度的关系

最近要实现的功能用tree树形结构来做是最好的，就是资源的分配，来简单讲讲ztree吧，这是目前国内很火的一个插件，百度一下就能了解，使用起来十分简单

小编我用过3年的jqgrid，在此还是要再次感谢当年的王组让我去跟jqgrid深入浅出，多用了jqgrid后，再看ztree，那就十分简单了，不知道ztree作者是否也参考过jqgrid

首先你需要引入js以及css吧

然后你需要定义一个id="treePermission"，这点和jqgrid一样

定义一下数据结构和基本配置

var setting ={

async: {

enable:true,

url: getAsyncUrl,

autoParam: ["id"]

},

data: {

simpleData: {

enable:true,

idKey:"id",

pIdKey:"pId",

rootPId:0}

}

};//查询子节点

functiongetAsyncUrl(treeId, treeNode) {return "/auth/permission/getTreeSubNode";

}var zNodes =[

{ id:1, pId:0, name:"父节点1 - 展开", open:true},

{ id:11, pId:1, name:"父节点11 - 折叠"},

{ id:111, pId:11, name:"叶子节点111"},

{ id:112, pId:11, name:"叶子节点112"},

{ id:113, pId:11, name:"叶子节点113"},

{ id:114, pId:11, name:"叶子节点114"},

{ id:12, pId:1, name:"父节点12 - 折叠"},

{ id:121, pId:12, name:"叶子节点121"},

{ id:122, pId:12, name:"叶子节点122"},

{ id:123, pId:12, name:"叶子节点123"},

{ id:124, pId:12, name:"叶子节点124"},

{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},

{ id:2, pId:0, name:"父节点2 - 折叠"},

{ id:21, pId:2, name:"父节点21 - 展开", open:true},

{ id:211, pId:21, name:"叶子节点211"},

{ id:212, pId:21, name:"叶子节点212"},

{ id:213, pId:21, name:"叶子节点213"},

{ id:214, pId:21, name:"叶子节点214"},

{ id:22, pId:2, name:"父节点22 - 折叠"},

{ id:221, pId:22, name:"叶子节点221"},

{ id:222, pId:22, name:"叶子节点222"},

{ id:223, pId:22, name:"叶子节点223"},

{ id:224, pId:22, name:"叶子节点224"},

{ id:23, pId:2, name:"父节点23 - 折叠"},

{ id:231, pId:23, name:"叶子节点231"},

{ id:232, pId:23, name:"叶子节点232"},

{ id:233, pId:23, name:"叶子节点233"},

{ id:234, pId:23, name:"叶子节点234"},

{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}

];

$(document).ready(function(){

$.post("/auth/permission/getTreeRootNode",{},function(jsonResult){

$.fn.zTree.init($("#treePermission"), setting, jsonResult.data);

});

});

zNodes是初始化的静态数据，可以不用，这里为了方便贴了出来，初始化的时候放入$.fn.zTree.init($("#treePermission"), setting, zNodes);即可

znodes我没有使用，在初始化的时候会预先加载根目录，然后点击再次加载子目录

@Overridepublic ListqueryNode(Integer parentId) {

SysPermissionExample example= newSysPermissionExample();

Criteria criteria=example.createCriteria();

criteria.andParentidEqualTo(parentId);

List permissions =sysPermissionMapper.selectByExample(example);//如果为空，说明没有根权限，需要创建一个

if(permissions.isEmpty()) {return null;

}//获得根权限返回出去

List rootNodeList = new ArrayList();for(SysPermission p : permissions) {

TreeNode rootNode= newTreeNode(p.getId(), p.getParentid(), p.getName(),

p.getType()== ShiroPermissionTypeEnum.MENU.value ? true : false,

p.getType()== ShiroPermissionTypeEnum.MENU.value ? true : false);

rootNodeList.add(rootNode);

}returnrootNodeList;

}

@RequestMapping(value="/permission/getTreeSubNode")

@ResponseBodypublic List getTreeSubNode(TreeNode node) throwsException{

List rootNodeList =systemAuthService.queryNode(node.getId());returnrootNodeList;

}

好了，调用后就直接可以使用了，非常简单，还有一些简单配置请参考官网吧~