表格操作laytpl

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./layui/css/layui.css">


</head>

<body>
  <table id="demoTreeTb" class="layui-hide" lay-filter="demoTableFilter">
  </table>
  <div class="demoDetailDiv" style="display:none;padding:10px;">
    <div id="detailDiv"></div>
  </div>
  <div class="wenjian"></div>
  <script src="./jquery/dist/jquery.js"></script>
  <script src="./layui/layui.js"></script>
  <script src="./treetable-lay/dist/treeTable.js"></script>

  <script>
    layui.use(['table', 'laytpl'], function () {
      var table = layui.table;
      var layer = layui.layer;
      var laytpl = layui.laytpl;
      // 渲染树形表格
      var insTb = table.render({
        elem: '#demoTreeTb',
        url: './main.json',
        tree: {
          iconIndex: 2,           // 折叠图标显示在第几列
          isPidData: true,        // 是否是id、pid形式数据
          idName: 'authorityId',  // id字段名称
          pidName: 'parentId'     // pid字段名称
        },
        cols: [[
          { type: 'numbers' },
          { type: 'checkbox' },
          { field: 'authorityName', title: '菜单名称' },
          { field: 'menuUrl', title: '菜单地址' },
          { field: 'authority', title: '权限标识' },
          { title: '操作', toolbar: '#barDemo' }
        ]]
      });
      table.on('tool(demoTableFilter)', function (obj) {
        var data = obj.data;
        console.log(data)
        if (obj.event === 'detail') {
          index = layer.open({
            title: '查看详情',
            type: 1,
            move: false,
            content: $('.demoDetailDiv'),
            area: ['750px', '300px'],
            resize: false,
            scrollbar: false
          });
          var demoDetailTpl = demoDetail.innerHTML  //获取模板,
            , detailDiv = document.getElementById('detailDiv');  //视图 
          laytpl(demoDetailTpl).render(obj.data, function (html) { //渲染视图
            detailDiv.innerHTML = html;
          });
        }
      });
    });
  </script>

  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
  <script type="text/html" id="demoDetail">
    <div>
        <div class="disF">
            <div class="flex1">
                <div class="disF">
                    <label>姓名:</label>
                    <p class="flex1">{{d.username}}</p>
                </div>                    
            </div>
            <div class="flex1">
                <div class="disF">
                    <label>邮箱:</label>
                    <p class="flex1">{{d.email}}</p>
                </div>
            </div>
            <div class="flex1">
                <div class="disF">
                    <label>签名:</label>
                    <p class="flex1">{{d.sign}}</p>
                </div>
            </div>
        </div>
        <div class="disF">
            <div class="flex1">
                <div class="disF">
                    <label>性别:</label>
                    <p class="flex1">{{d.sex}}</p>
                </div>
            </div>
            <div class="flex1">
                <div class="disF">
                    <label>城市:</label>
                    <p class="flex1">{{d.city}}</p>
                </div>
            </div>
            <div class="flex1">
                <div class="disF">
                    <label>积分:</label>
                    <p class="flex1">{{d.experience}}</p>
                </div>
            </div>
        </div>
    </div>
</script>
</body>

</html>

 

上一篇:android“强制关闭”内存究竟发生了什么


下一篇:layui模板引擎如何使用