easyui的异步树tree

easyUI 的 Tree组件在大部分时候都要从数据库读取数据，本文基于Java语言来实现easyUI tree的异步加载。

先看一下实现的效果：

整个过程采用的是简单三层架构，无论采用哪种模式，只要弄懂tree的原理，都是可以实现的。使用其他语言的也可以作为参考。

话不多说直接上代码：

HTML代码：

js代码：

url地址为：web层的servlet地址。 最基本的异步加载树只需要获取数据的地址即可。

 注意 ：jsp页面一定不要忘记引入easyUI的css样式和js库

无论何种架构，只需要明白tree请求的参数是该行数据的id即可，响应的是json格式数据。

接下来我们从底层先一步步的介绍代码，最后再统一的梳理。

一、首先，数据库为：

text为显示的内容，即名称；url为地址；seq为排序列   都是非必要字段。

二、其次：domain层用来存放实体类，domain层我们建两个实体类：一个是menu类对应着数据库，一个是treenode类对应的是easyUI tree需要的数据类型。

       1、menu类：对应着数据库的字段

public class Menu {private String id;private String pid;private String text;private String status;private String url;/*   get   set 方法  此处省略*/｝

2、treenode类：对应着easyUI tree需要的数据类型

public class TreeNode implements java.io.Serializable{private String id;private String text; // 树节点名称private String iconCls; // 前面的小图标样式private Boolean checked = false; // 是否勾选状态private Map attributes; // 其他参数private List children; // 子节点private String state = "open"; // 是否展开（open,closed）/*   get   set 方法  此处省略*/｝

三、dao层：获取数据库表中的数据

public class MenuDao {QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());//查询树节点数据public List selectTreeData(String id) throws SQLException {String sql = "select * from menu where pid = ?";if (id == null || id.trim().equals("")) {id = "00000000-0000-0000-0000-000000000000";}return runner.query(sql, new BeanListHandler(Menu.class),id);}//获取子级节点的数量public int menuCountChildren(String id) throws SQLException {String sql = "select count(*) from menu where pid = ?";Long query = (Long) runner.query(sql, new ScalarHandler(),id);return query.intValue();}
}

selectTreeData()方法为获取数据库的数据，tree插件第一次请求时的参数id为null，所以需要根据null去数据寻找第一级节点，因为表中第一级pid为00000000-0000-0000-0000-000000000000，所以给id赋初始值。

menuCountChildren()方法为判断该节点下是否还有子级节点。

四、service层：业务层只起到一个数据传递的作用。

public class MenuService {MenuDao dao = new MenuDao();//获取树节点数据public List selectTreeData(String id){List list = null;try {list = dao.selectTreeData(id);} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}return list;}//获取子级节点的数量public int menuCountChildren(String id) {int count = 0;try {count = dao.menuCountChildren(id);} catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace();}return count;}
}

五、web层：接收请求作出响应。

public class MenuServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//引用service层MenuService service = new MenuService();//接收树上传来的ID参数String id = request.getParameter("id");               // 接收tree插件请求的参数  参数名为：id  第一次请求时为null  之后请求时                                                                                           为该节点的id值 ////接收后台传来的查询数据List menu = service.selectTreeData(id);          // 获取后台查询的数据库数据，如果直接将menu转成json格式响应                                                                                          给tree插件，因为不是tree插件需要的数据样式，显示不出来树形结构 ////封装成easyUI tree的数据格式List treeNodes = new ArrayList();             // 转换成tree插件需要的数据样式 //for(Menu item : menu){TreeNode treeNode = new TreeNode();treeNode.setId(item.getId()); // 封装idtreeNode.setText(item.getText()); // 封装text//创建一个容器，存放其他的参数Map attributes = new HashMap();                        // 创建Map容易，存放其他的参数，以备不时之需 //attributes.put("url", item.getUrl());treeNode.setAttributes(attributes);//封装stateif (service.menuCountChildren(treeNode.getId()) > 0) {           // 判断该级是否还有子级  如果有  默认不展开 //treeNode.setState("closed");}treeNodes.add(treeNode);}Gson gson = new Gson();String json = gson.toJson(treeNodes);                  //  将封装好的数据转换成json格式，响应给tree插件  //response.setContentType("text/html;charset=UTF-8");response.getWriter().write(json);}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}

至此，整个easyUI tree插件的异步加载数据就大功告成了。

前端传给后端的

* 当展开一个关闭的节点时，如果该节点没有子节点加载，它将通过上面定义的 URL 向服务器发送节点的 id 值作为名为 'id' 的 http 请求参数，以便检索子节点。 * 所以这里的参数value必须是id，若是其他值则接收不到。缺省值是0，表示初始化一级菜单。

@RequestMapping("/async")@ResponseBodyprivate List getAsyncCatList(@RequestParam(value="id",defaultValue="0") int parentId) {List results = categoryService.getCategoryList(parentId);return results;}

转载地址：

https://blog.csdn.net/tianzhen620/article/details/86599673

https://segmentfault.com/a/1190000012086183

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！