layui 树形组件复选框

第一步：导入的layui必须是2.5后的版本，2.5之前的 弄不了

前端代码：

1、这是图片第一步的搜索框

       <div class="layui-form-item">
                <label class="layui-form-label" style="width: 120px;">通知用户</label>
                <div class="layui-input-inline" style="margin-left: 20px; width: 450px;">
                    <input type="text" name="noticUser" autocomplete="on" placeholder="请输入通知用户" class="layui-input">
                    <i class="layui-icon iconSerch">&#xe615;</i>
                </div>
         </div>

2、这是树形容器，也就是图片右边弹出的选择框

  <div class="showChooseDiv" style="display: none;  padding: 20px">
                <div id="dept_main" style="margin-right: 2%;">
                    <div id="dept_tree">
                    </div>
                    <div class="layui-form-item float-right">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal layui-btn-sm" id="lay-submit-Choose">确定</button>
                        </div>
                    </div>
                </div>
      </div>

以上是页面代码

 

3、然后写页面的js，也就是控制树形复选框那些

<script>
    var files;
    var form;
    var layer;
    var $;
      var transfer;
    layui.use(['layer','tree'], function() {
        var $ = layui.jquery;
         layer = layui.layer;
         var tree = layui.tree;
        //树形组件复选框
         tree.render({
             elem: '#dept_tree',
             data: getData(),
             id: 'treeId',
             showCheckbox: true,     //是否显示复选框
             onlyIconControl: true
         });
         function getData(){
                var data = [];
                $.ajax({
                    url : "/PtRole/allRole",//后台数据请求地址
                    dataType : 'json',
                    type : 'GET',
                    async : false,
                    success: function(resut){
                        data = resut;
                    }
                });
                return data;
        }
            
        //打开选择页
                $("body").on("click", ".iconSerch", function() {
                    debugger;
                    var dataInto=$(this).prev().attr("name");
                    $("#lay-submit-Choose").attr("data-into",dataInto);
                    var dataDicType="";
                    if(dataInto.lastIndexOf('.')==-1){
                        dataDicType=dataInto;
                    }else{
                        dataDicType=dataInto.substr(dataInto.lastIndexOf('.')+1)
                    }
                
                    layer.open({
                        type: 1,
                        title: "选择",
                        area: ['18%', '50%'],
                        content: $(".showChooseDiv"),
                        maxmin: false,
                        shadeClose: true,
                        shade: false,
                    });
                });
                //选择页确定
                 $("#lay-submit-Choose").on("click", function() {
                     var getData = tree.getChecked('treeId');
                      var item="";
                      for (var i = 0; i < getData.length; i++) {
                          for (var j = 0; j < getData[i].children.length; j++) {
                              item += getData[i].children[j].title +",";
                          }
                      }
                      item=(item.substring(item.length-1)==',')?item.substring(0,item.length-1):item;
                    if (getData.length<1) {
                        layer.alert("请选择一项");
                    }else{
                        var dataInto=$(this).attr("data-into");
                        //$("[name='"+dataInto+"']").val(getData[0].title);
                        getData
                    $("[name='noticUser']").val(item);
                        layer.close(layer.index);
                    }
                    return false;
                });
                //渲染字典项选择
                function renderChoose(dataDicType) {
                    layer.alert("请选择一项");
                };
    });
</script>

以上是写树形的js，记得到layui2.5之后的layui.js

---

4、最后写后台代码层，记得返回json格式的代码

  @RequestMapping(value = "/allRole", produces={"application/json; charset=UTF-8"})
  @ResponseBody
    public String allRole(HttpServletRequest req, HttpServletResponse resp) {
        Map<String, Object> result = createLayMap();

//查询父节点的SQL，SQL的方式查询
        Query query = entityManager.createNativeQuery("SELECT * FROM T_Role", PtRole.class);
         List<PtRole> list = query.getResultList();
         List<PtUserTree> ptUserTreeList = new ArrayList<>();

//遍历父节点查询出来的数据
         for (PtRole ptRole : list) {

//根据父节点的id查询子节点数据
             PtUserTree ptUserTree = getTree(ptRole);
             if (null != ptUserTree) {
                 ptUserTreeList.add(ptUserTree);
             }
        }
        String resultJson = JSON.toJSONString(ptUserTreeList);
        return resultJson;
    }
      /**
       * 获取树节点
       */
      private PtUserTree getTree(PtRole ptRole) {

//父节点id
          String roleCode=ptRole.getRoleCode();
          //根据父节点id查询所有子类数据,hibernate的方式查询
            Query query = entityManager
                    .createQuery("SELECT a FROM PtUser a where role='" + roleCode + "'");
            List<PtUser> ptUserlist = query.getResultList();
            PtUserTree treeDto = new PtUserTree();
            treeDto.setId(ptRole.getRoleId());
            treeDto.setTitle(ptRole.getRoleName());
            List<PtUserTree> children = new ArrayList<>();
         for (PtUser ptUser : ptUserlist) {
                 PtUserTree b = new PtUserTree();
                b.setId(ptUser.getUserId());
                b.setTitle(ptUser.getUserName());
                children.add(b);
        }
          treeDto.setChildren(children);
           return treeDto;
      }