Ztree分级插件的使用总结

最新推荐文章于 2019-08-26 16:20:52 发布

半城、孤影

最新推荐文章于 2019-08-26 16:20:52 发布

阅读量1k

点赞数

文章标签： ztree 插件 json

本文链接：https://blog.csdn.net/ZDarling/article/details/64126620

版权

===================下载插件===================

http://www.treejs.cn/v3/main.php#_zTreeInfo 导入CSS 和JS

===================前台======================

<link rel="stylesheet" href="css/plugins/zTreeStyle/demo.css" type="text/css">

<link rel="stylesheet" href="css/plugins/zTreeStyle/zTreeStyle.css" type="text/css">


1.<!-- 引入 ztree 文件 -->

    <script type="text/javascript" src="js/plugins/zTreeStyle/jquery.ztree.core.js"></script>


2. <div class="dd" id="nestable2">
          <ul id="treeDemo" class="ztree"></ul>
   </div>


3.

       var setting = {
                view: {
                    showLine: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },

               //设置点击事件

                callback: {
                    onClick: zTreeOnClick
                }
            };
            
            var pie_ary=jQuery.parseJSON('${pie_ary}');
            var zNodes=[];
            for(var k=0,klen=pie_ary.length;k<klen;k++){
                
                var id=pie_ary[k].id;
                zNodes.push({id:pie_ary[k].id, pId:pie_ary[k].pid, name:pie_ary[k].name+(pie_ary[k].number), open:true});
            }
            
            $(document).ready(function(){
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            });

            <%--设置点击事件跳转--%>
            function zTreeOnClick(event, treeId, treeNode) {
                var change="change";
                window.location.href = "setting/deptManage?id="+treeNode.id+"&change="+change;
            };

==================后台==================

@RequestMapping(value = "/setting/deptManage")
    public String deptManage(Model model, HttpServletRequest request) throws ParseException {
        
        List<Sys_standard_dept> ss_deptList=deptwhService.getStandardDeptList();
        model.addAttribute("ss_deptList", ss_deptList);
        
        JSONArray pie_ary=new JSONArray();
        List<Sys_standard_dept>  senderpulst= new ArrayList<Sys_standard_dept>();
        for (int i = 0; i < ss_deptList.size(); i++) {
            Sys_standard_dept proportion = ss_deptList.get(i);
            senderpulst.add(proportion);

            JSONObject o=new JSONObject();
            o.put("id", proportion.getId());
            o.put("pid", proportion.getParent_id());
            o.put("name", proportion.getName());
           
            pie_ary.add(o);
        }
        model.addAttribute("pie_ary", pie_ary.toString());        
       
        
        //显示标准科室下对应的院方科室
        String change=request.getParameter("change");
        if(change!=null){
            String standard_dept_id=request.getParameter("id");
            List<Sys_dept>  sysDeptlist= sysdeptService.getDeptListById(standard_dept_id);
            model.addAttribute("sysDeptlist", sysDeptlist);
            model.addAttribute("change", change);
        }else{
            model.addAttribute("change",null);
        }
        
        return "/setting/deptManage";
        
    }

============================================

附一张我的效果图，这里只是讲解ztree的使用，所以效果图中的某些代码没写。

前端UI大家需要的效果也不一样，按自己需求的设计吧。