引入基础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;"></i></a>  ';
var addBtn='<a title="添加" href="javascript:void(0);" onclick="javascript:updateinfor();"><i class="layui-icon" style="color:green;"></i></a>  ';
var delBtn='<a title="删除" href="javascript:void(0);" onclick="javascript:updateinfor();"><i class="layui-icon" style="color:red;"></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;
}
最后效果图,默认下拉列表全部打开,暂时还没有找到如何设置该属性,如果有谁知道怎么解决该问题,欢迎留言,谢谢!
相对这个下拉表格而言,我更倾向于第一个