layui实现树状多级表格操作示例代码

代码语言:html

所属分类:表格

代码描述:layui实现树状多级表格操作示例代码

代码标签: layui 树状 多级 表格 操作 示例 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/layui.2.8.9.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui.2.8.9.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
</head>
<body>
<table class="layui-hide" id="ID-treeTable-demo"></table>
<script type="text/html" id="TPL-treeTable-demo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>
  </div>
</script>
<script type="text/html" id="TPL-treeTable-demo-tools">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
  </div>
</script>
<script>
   Mock.mock(/\/demo[\s\S]*?/,
            {
                "code": 0,
                "msg": "",
                "count": 40,
                "data|5": [{

"id|":10000,"name":"User-1","type":4,"status":2,"score":28,"experience":54981,"sex":"男","city":"丽江市","description":"-","createTime":"2014-06-04 12:29:55","parentId":null,"children":[{"id":2,"name":"User-2","type":2,"status":3,"score":75,"experience":43884,"sex":"女","city":"大理白族自治州","description":"-","createTime":"1971-11-03 19:15:43","parentId":null,"children":[{"id":3,"name":"User-3","type":2,"status":3,"score":72,"experience":75912,"sex":"女","city":"渭南市","description":"-","createTime":"2022-01-17 01:48:02","parentId":null,"children":[{"id":4,"name":"User-4","type":3,"status":3,"score":21,"experience":23198,"sex":"男","city":"海外","description":"-","createTime":"1986-11-06 23:56:45","parentId":null,"children":[],"isParent":false},{"id":5,"name":"User-5","type":3,"status":3,"score":89,"experience":25710,"sex":"女","city":"盐城市","description":"-","createTime":"2007-10-03 21:44:59","parentId":null,"children":[],"isParent":false},{"id":6,"name":"User-6","type":2,"status":4,"score":70,"experience":51144,"sex":"男","city":"益阳市","description":"-","createTime":"2017-02-21 00:26:02","parentId":null,"children":[],"isParent":false}],"isParent":true},{"id":7,"name":"User-7","type":5,"status":3,"score":24,"experience":64919,"sex":"男","city":"贵港市","description":"-","createTime":"1981-05-14 17:52:03","parentId":null,"children":[{"id":8,"name":"User-8","type":6,"status":2,"score":2,"exp.........完整代码请登录后点击上方下载按钮下载查看

网友评论0