easyui的异步树tree 末蓝、 2022-11-01 05:58 218阅读 0赞 easyUI 的 Tree组件在大部分时候都要从数据库读取数据,本文基于Java语言来实现easyUI tree的异步加载。 先看一下实现的效果: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpYW56aGVuNjIw_size_16_color_FFFFFF_t_70][] 整个过程采用的是简单三层架构,无论采用哪种模式,只要弄懂tree的原理,都是可以实现的。使用其他语言的也可以作为参考。 话不多说直接上代码: HTML代码: <body> <ul id='menu'></ul> </body> js代码: <script type="text/javascript"> $(function() { $('#menu').tree({ url : '${pageContext.request.contextPath}/menu' }); }); </script> url地址为:web层的servlet地址。 最基本的异步加载树只需要获取数据的地址即可。 注意 :jsp页面一定不要忘记引入easyUI的css样式和js库 无论何种架构,只需要明白tree请求的参数是该行数据的id即可,响应的是json格式数据。 接下来我们从底层先一步步的介绍代码,最后再统一的梳理。 一、首先,数据库为: ![20190122191222432.png][] 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<String, Object> attributes; // 其他参数 private List<TreeNode> children; // 子节点 private String state = "open"; // 是否展开(open,closed) /* get set 方法 此处省略*/ } 三、dao层:获取数据库表中的数据 public class MenuDao { QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource()); //查询树节点数据 public List<Menu> 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>(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赋初始值。 ![20190122193211504.png][] menuCountChildren()方法为判断该节点下是否还有子级节点。 四、service层:业务层只起到一个数据传递的作用。 public class MenuService { MenuDao dao = new MenuDao(); //获取树节点数据 public List<Menu> selectTreeData(String id){ List<Menu> list = null; try { list = dao.selectTreeData(id); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return list; } //获取子级节点的数量 public int menuCountChildren(String id) { int count = 0; try { count = dao.menuCountChildren(id); } catch (SQLException e) { // TODO Auto-generated catch block e.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> menu = service.selectTreeData(id); // 获取后台查询的数据库数据,如果直接将menu转成json格式响应 给tree插件,因为不是tree插件需要的数据样式,显示不出来树形结构 // //封装成easyUI tree的数据格式 List<TreeNode> treeNodes = new ArrayList<TreeNode>(); // 转换成tree插件需要的数据样式 // for(Menu item : menu){ TreeNode treeNode = new TreeNode(); treeNode.setId(item.getId()); // 封装id treeNode.setText(item.getText()); // 封装text //创建一个容器,存放其他的参数 Map attributes = new HashMap(); // 创建Map容易,存放其他的参数,以备不时之需 // attributes.put("url", item.getUrl()); treeNode.setAttributes(attributes); //封装state if (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") @ResponseBody private List<EUTreeNode> getAsyncCatList(@RequestParam(value="id",defaultValue="0") int parentId) { List<EUTreeNode> results = categoryService.getCategoryList(parentId); return results; } 转载地址: [https://blog.csdn.net/tianzhen620/article/details/86599673][https_blog.csdn.net_tianzhen620_article_details_86599673] [https://segmentfault.com/a/1190000012086183][https_segmentfault.com_a_1190000012086183] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpYW56aGVuNjIw_size_16_color_FFFFFF_t_70]: /images/20221024/a372089c439543b58211e4dd45234402.png [20190122191222432.png]: /images/20221024/f9031a1d7f6c4dd9a796eab0911f973a.png [20190122193211504.png]: /images/20221024/d9f296c6c923479f9af3e61aabbb21ac.png [https_blog.csdn.net_tianzhen620_article_details_86599673]: https://blog.csdn.net/tianzhen620/article/details/86599673 [https_segmentfault.com_a_1190000012086183]: https://segmentfault.com/a/1190000012086183
还没有评论,来说两句吧...