当前位置：首页 > article >正文

浅谈LigerUi Tree（树）

article 2025/8/27 5:30:43

新到公司后，使用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;
}
最后的运行效果：
这里写图片描述
数据库：