浅谈LigerUi Tree（树）

新到公司后，使用ligerui做了一个小练习，期间也遇到了一些问题，现在总结出来，以后方便查阅：
一.ligerui—tree（树）
ligerui可以非常简单的显示树，具体如下：
要使用ligerui框架，在官网上下载最新的jar包框架，解压之后，将Source –> lib整个文件夹引入到项目WebContent目录下

1) 在jsp页面中引入ligerui所需要的jar包（要根据要实现的不同的功能引入不同的jar包，如tree引入LigerTree的jar包，grid引入LigerGrid的jar包。。）

2） js代码：（ligertree有两种数据绑定的类型，（1）：基于data, (2）基于url。）

 $("#tree1").ligerTree(  {    data:data    });

或者： $(“#tree1”).ligerTree({ url: ‘tree.json’, ajaxType: ‘get’ });

3） tree中引用的data格式或者后台返回的数据json的格式：
查看官方文档，必须是如下的格式：

也就是说，后台处理的数据返回之后要对数据进行拼凑，最后拼凑成这样的json格式返回前台。
按照以上的步骤，就可以显示完整的树了。
最终显示效果如下：

以下是我做的具体的小例子，（使用的是servlet+jsp，数据库设计，我是将父文件夹的id作为子文件夹的pid，具体见最下面的图），最后的结果是显示文件夹之间的层级：
// js代码：

    //显示树$("#treeDatas").ligerTree({url : 'getAllDirs?' + $.param({typeid : '1',parentid : '0'}),checkbox : false,slide : false,isleaf : false,//  onBeforeExpand : onBeforeExpand,onSelect :onSelect ,onClick : function(node) {if (node != null && node.data != null) {nodeid = node.data.id;//alert(nodeid);if (nodeid != -1 && node.data.typeid == -1) {gridManager.setOptions({parms : [ {name : 'organid',value : nodeid} ]});gridManager.loadData(true);}}}});

servlet：（查询数据库，将结果返回给前台，调用NodeUtil工具类中的treeDirList方法，将查到的list转换成前台data需要的数据格式返回前台）
private void findAllDir(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException {
req.setCharacterEncoding(“utf-8”);
resp.setContentType(“text/html;charset=UTF-8”);
PrintWriter printWriter = resp.getWriter();
List

list = new UploadFileDaoImpl().findAllDirs();
String s = req.getParameter(“typeid”);
String s1 = req.getParameter(“parentid”);
int xx = Integer.parseInt(s1);
//System.out.println(s);
//System.out.println(s1);

    JSONObject json = new JSONObject();String treeJson = "";int pid;NodeUtil nodeUtil = new NodeUtil();JSONArray jsonArray = new JSONArray();String jsonArray2 = null;for(int i=0;i<list.size();i++){jsonArray.add(list.get(i));}jsonArray2 = nodeUtil.treeDirList(jsonArray, xx).toString();String string = jsonArray2.replaceAll("dirName", "text");if (list != null && list.size() > 0) {for (Dir dir : list) {json.put("id", dir.getId());json.put("text", dir.getDirName());json.put("pid", dir.getPid());json.put("children", "[]");treeJson += json.toString() + ",";}}String string2 = "[{\"text\":\"upload\",\"id\":0,\"pid\":0,\"children\":"+string+"}]";printWriter.print(string2);printWriter.flush();printWriter.close();
}

工具类NodeUtil,用于通过递归算法，转换成前台需要的data格式，
public JSONArray treeDirList(JSONArray DirList, int parentId) {
JSONArray childDir = new JSONArray();
for (Object object : DirList) {
JSONObject jsonDir = JSONObject.fromObject(object);
int DirId = jsonDir.getInt(“id”);
int pid = jsonDir.getInt(“pid”);
if (parentId == pid) {
JSONArray c_node = treeDirList(DirList, DirId);
jsonDir.put(“children”, c_node);
childDir.add(jsonDir);
}
}
return childDir;
}
最后的运行效果：

数据库：

浅谈LigerUi Tree（树）相关推荐

HDU2966 In case of failure（浅谈k-d tree）
嘟嘟嘟题意:给定$n$个二维平面上的点$(x_i, y_i)$,求离每一个点最近的点得距离的平方.($n \leqslant 1e5$) 这就是k-d tree入门题了. k-d tre ...
【算法微解读】浅谈线段树
浅谈线段树 (来自TRTTG大佬的供图) 线段树个人理解和运用时,认为这个是一个比较实用的优化算法. 这个东西和区间树有点相似,是一棵二叉搜索树,也就是查找节点和节点所带值的一种算法. 使用线段树可以 ...
浅谈MySQL的B树索引与索引优化
转载自浅谈MySQL的B树索引与索引优化 MySQL的MyISAM.InnoDB引擎默认均使用B+树索引(查询时都显示为"BTREE"),本文讨论两个问题: 为什么MySQL ...
从MySQL Bug#67718浅谈B+树索引的分裂优化
从MySQL Bug#67718浅谈B+树索引的分裂优化 1月 6th, 2013 发表评论 | Trackback 问题背景今天,看到Twitter的DBA团队发布了其最新的MySQL分支:Cha ...
浅谈linux - 描述硬件的文件设备树
概述设备树(device tree),通俗的讲就是将设备描述信息抽象成树的结构.树的主干为系统总线,也就是根节点,根节点下是各种总线控制器,控制器下则是一系列硬件设备节点等. 在Linux2.6中, ...
C#结合Jquery LigerUI Tree插件构造树
Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的构建树形菜单.呵呵废话不说了,直入正题,下面介绍C#结合ligerui 构造树形菜单的两种方法 1 ...
浅谈oracle树状结构层级查询
oracle树状结构查询即层次递归查询,是sql语句经常用到的,在实际开发中组织结构实现及其层次化实现功能也是经常遇到的,虽然我是一个java程序开发者,我一直觉得只要精通数据库那么对于java开发你 ...
浅谈oracle树状结构层级查询测试数据
浅谈oracle树状结构层级查询 oracle树状结构查询即层次递归查询,是sql语句经常用到的,在实际开发中组织结构实现及其层次化实现功能也是经常遇到的,虽然我是一个java程序开发者,我一直觉得只 ...
HTTP协议漫谈 C#实现图（Graph) C#实现二叉查找树浅谈进程同步和互斥的概念 C#实现平衡多路查找树(B树)...
HTTP协议漫谈简介园子里已经有不少介绍HTTP的的好文章.对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将HTTP协议的元素进行分类讲解. ...
Ybtoj 最优密码单调队列(浅谈)树状数组两种解法
作者:hsez_yyh 链接:https://blog.csdn.net/yyh_getAC/article/details/123956399 来源:湖北省黄石二中竞赛组著作权归作者所有.商业 ...

浅谈LigerUi Tree（树）

浅谈LigerUi Tree（树）相关推荐

最新文章

热门文章