树形表格TreeGrid

た入场券 2023-05-22 06:38 95阅读 0赞

树形表格TreeGrid  
  
展开  
1.效果截图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1Y2FpZnUxOTg5_size_16_color_FFFFFF_t_70][]

![20200416150049945.png][]

2.数据结构

[{"mcode":"UI","mname":"页面开发模板","micon":"glyphicon glyphicon-th","murl":"","explains":"开发页面的常用组件和页面","parent":null,"sort":4,
        "children":[
            {"mcode":"Cssd","mname":"CSS动画","micon":"glyphicon glyphicon-briefcase","murl":"/css/aaa","explains":"aaaaa啊啊啊aaaaa","parent":"UI","sort":1,
                "children":[]}]}]
    
    //控制器         
    @ResponseBody
    @RequestMapping(value = "/selectZtreeModule", produces = {"application/json;charset=UTF-8"})
    public List<Module> selectZtreeModule(HttpServletRequest request){
        List<Module> modules = new ArrayList<Module>();
        try {
            HashMap param = new HashMap();
            //。。。前台搜索关键字searchText。。。
            modules= moduleService.selectModuleList(param);
            modules=putChildren(modules);
        } catch (Exception e) {
            modules=null;
        }
        return modules;
    }
    //循环遍历下级节点，添加到module实体中
    public List<Module> putChildren(List<Module> moduleList){
        if(moduleList.size()>0){
            for(Module mod2:moduleList){
                HashMap param = new HashMap();
                param.put("parent",mod2.getMcode());
                List<Module> res2 = moduleService.selectModuleList(param);
                if(res2.size()>0){res2=putChildren(res2);}
                mod2.setChildren(res2);
            }
        }
        return moduleList;
    }
    
    //实体
    public class Module {
        private String mcode;
        private String mname;
        private String micon;
        private String murl;
        private String explains;
        private String parent;
        private Integer sort;
        private List<Module> children;
    }
    
    //mapper
     SELECT mcode,mname,micon,murl,explains,parent,sort FROM sys_module
        <where>
          <if test="searchText!=null">
            (mcode like #{searchText} or mname like #{searchText})
          </if>
          <if test="parent==null">
            AND parent is null
          </if>
          <if test="parent!=null">
            AND parent=#{parent}
          </if>
        </where>

ORDER BY sort

3，关键js代码

4.页面引用

5.重点来了，核心js文件

TreeGrid.js  
————————————————  
版权声明：本文为CSDN博主「占星安啦」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/u012796085/article/details/80357317

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1Y2FpZnUxOTg5_size_16_color_FFFFFF_t_70]: /images/20230521/be9110abb6384786bdd7bf06fedb6712.png
[20200416150049945.png]: /images/20230521/2b9cbcb1ea994b738e0bc5f83edb40cf.png