layui下拉树形表格 基于layui2.5.6版本

引入基础CSS和JS脚本 版本号layui2.5.6

<link rel="stylesheet" href="../../../js/layuidesign/css/layui.css">
<link rel="stylesheet" href="../../../sysmanage/organization/depart/design/extend/treeGrid.css">
   
<script src="../../../js/jquery/jquery-1.11.3.min.js"></script>
<script src="../../../js/layuidesign/layui.js"></script>

HTML代码

<table class="layui-table" id="treeTable"></table>

JQuery代码

标注：base后面的意思是引入treeGrid.js，但是路径必须是design下的extend文件夹，而且design文件夹必须和你的页面在同一级目录，不然的话样式无效。

如果谁知道怎么结果这个固定路径的问题，欢迎留言,谢谢！

JQuery 中url的路径是后台向前台传递的JSON格式字符串

<script>
    var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;
    layui.config({
        base: '../../../design/extend/'
    }).extend({
        treeGrid:'treeGrid'
    }).use(['jquery','treeGrid','layer'], function(){
        var $=layui.jquery;
        treeGrid = layui.treeGrid;//很重要
        layer=layui.layer;
        ptable=treeGrid.render({
            id:tableId,
            spreadable: false
            ,elem: '#'+tableId
            ,idField:'id'
            ,url:'http://localhost:6688/sysmanage/organization/depart/smsverticalsend'
            ,cellMinWidth: 100
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'pId'//树形父id字段名称
            ,treeShowName:'name'//以树形式显示的字段
            
            ,cols: [[
            	{field:'num', width:80, title: '序号'}//edit:'text',用于列表修改
                ,{field:'name', width:300, title: '水果名称'}
                ,{field:'id',width:100, title: 'id'}
                ,{field:'pId', width:200,title: 'pid'}
                ,{field:'status', width:100,title: '状态'}
                ,{field:'updatetime', width:100,title: '更新时间'}
                ,{width:250,title: '操作', align:'center'/*toolbar: '#barDemo'*/
                    ,templet: function(row){
                    var html='';
                    var upBtn='<a title="编辑" href="javascript:void(0);" onclick="javascript:updateinfor(" + row + ");"><i class="layui-icon" style="color:red;">&#xe642;</i></a>&nbsp&nbsp';
                    var addBtn='<a title="添加" href="javascript:void(0);" onclick="javascript:updateinfor();"><i class="layui-icon" style="color:green;">&#xe61f;</i></a>&nbsp&nbsp';
                    var delBtn='<a title="删除" href="javascript:void(0);" onclick="javascript:updateinfor();"><i class="layui-icon" style="color:red;">&#xe640;</i></a>';
                    return upBtn+addBtn+delBtn;
                	}
                }
                
            ]]
            ,page:false
        });

        treeGrid.on('tool('+tableId+')',function (obj) {
            if(obj.event === 'del'){//删除行
                del(obj);
            }else if(obj.event==="add"){//添加行
                add(obj.data);
            }
        });
    });

</script>

后台传递的JSON格式数据代码

@RequestMapping(value = "smsverticalsend",method=RequestMethod.POST)
	 @ResponseBody
	    public String smsverticalsend(HttpServletRequest request, HttpServletResponse response, HttpSession session){
	  String resNull = "";
	  resNull += "{";
	  resNull += "\"msg\": \"\",";
	  resNull += "\"code\": 0,";
	  resNull += "\"data\": [";
	  resNull += "{\"id\":\"1\", \"pId\":\"0\", \"name\":\"水果\"},";
	  resNull += "{\"id\":\"101\", \"pId\":\"1\", \"name\":\"苹果\"},";
	  resNull += "{\"id\":\"102\", \"pId\":\"1\", \"name\":\"香蕉\"},";
	  resNull += "{\"id\":\"103\", \"pId\":\"1\", \"name\":\"梨\"},";
	  resNull += "{\"id\":\"10101\", \"pId\":\"101\", \"name\":\"红富士苹果\"},";
	  resNull += "{\"id\":\"10102\", \"pId\":\"101\", \"name\":\"红星苹果\"},";
	  resNull += "{\"id\":\"10103\", \"pId\":\"101\", \"name\":\"嘎拉\"},";
	  resNull += "{\"id\":\"10104\", \"pId\":\"101\", \"name\":\"桑萨\"},";
	  resNull += "{\"id\":\"10201\", \"pId\":\"102\", \"name\":\"千层蕉\"},";
	  resNull += "{\"id\":\"10202\", \"pId\":\"102\", \"name\":\"仙人蕉\"},";
	  resNull += "{\"id\":\"10203\", \"pId\":\"102\", \"name\":\"吕宋蕉\"}";
	  resNull += "],";
	  resNull += "\"count\": 924,";
	  resNull += "\"is\": true,";
	  resNull += "\"tip\": \"操作成功！\"";
	  resNull += "}";
	  return resNull;
	 }

最后效果图，默认下拉列表全部打开，暂时还没有找到如何设置该属性，如果有谁知道怎么解决该问题，欢迎留言，谢谢！

相对这个下拉表格而言，我更倾向于第一个