hogo18
/
drpy
cermin dari https://github.com/hjdhnx/dr_py/


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

  <meta charset="utf-8">
<!--  <title>layui规则管理</title>-->
  <title>规则管控</title>
  <meta name="description" content="不会写前端只好用layui">
  <meta name="author" content="道长"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="icon" href="/static/img/logo.png" type="image/x-icon">
  <script src="/static/plugin/layui/layui.js"></script>
  <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li>
      </ul>
    </div>
  </div>

  <div class="layui-body">
    <table class="layui-hide" id="test"></table>
  </div>
    <div id="page"></div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
  </div>
</script>
<script>
//JS
layui.use(['element', 'layer', 'util','table','laypage'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$
  ,laypage = layui.laypage

  var table = layui.table;

  // table.render({
  //    elem: '#test'
  //   ,url: '/layui/api/list'
  //   ,cellMinWidth: 80
  //   ,totalRow: true // 开启合计行
  //   ,page: true //是否显示分页
  //   ,limit: 10
  //   , request: {
  //       pageName: 'page' //页码的参数名称，默认：page
  //         ,limitName: 'limit' //每页数据量的参数名，默认：limit
  //   }
  //   ,cols: [[ //标题栏
  //     {type: 'checkbox', fixed: 'left'}
  //     ,{field: 'id', title: 'ID', width: 80, sort: true}
  //     ,{field: 'name', title: '名称', width: 120}
  //     ,{field: 'key', title: '唯一标识', width: 120}
  //     ,{field: 'type', title: '类型', minWidth: 150}
  //     ,{field: 'searchable', title: '可搜索', minWidth: 150}
  //     ,{field: 'quickSearch', title: '可快速搜索', minWidth: 150}
  //     ,{field: 'filterable', title: '可筛选', minWidth: 150}
  //   ]]
  //   ,skin: 'line' //表格风格
  //   ,toolbar: '#toolbarDemo'
  //   ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
  //     return {
  //       "code": res.code, //解析接口状态
  //       "msg": res.message, //解析提示文本
  //       "count": res.total, //解析数据长度
  //       "data": res.data //解析数据列表
  //     };
  //   }
  // });

  table.render({
      elem: '#test'
    ,url: '/layui/api/list' // 此处为静态模拟数据，实际使用时需换成真实接口
    ,toolbar: '#toolbarDemo'
    ,defaultToolbar: ['filter', 'exports', 'print', {
      title: '帮助'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,height: 'full-200' // 最大高度减去其他容器已占有的高度差
    ,cellMinWidth: 80
    // ,totalRow: true // 开启合计行
    ,page: true
    ,limit:10
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}


      ,{field: 'id', title: 'ID', width: 80, sort: true}
      ,{field: 'name', title: '名称', width: 120}
      ,{field: 'key', title: '唯一标识', width: 120}
      ,{field: 'type', title: '类型', minWidth: 150}
      ,{field: 'searchable', title: '可搜索', minWidth: 150}
      ,{field: 'quickSearch', title: '可快速搜索', minWidth: 150}
      ,{field: 'filterable', title: '可筛选', minWidth: 150}

      // ,{field: 'id', fixed: 'left',title: 'ID', width: 80, sort: true,totalRowText: '合计：'}
      // ,{field: 'name', title: '名称', width: 120}
      // ,{field: 'key', title: '唯一标识', width: 120}
      // ,{field: 'type', title: '<i class="layui-icon layui-icon-email">类型</i>', minWidth: 150}
      // ,{field: 'searchable', title: '可搜索', minWidth: 150}
      // ,{field: 'quickSearch', title: '可快速搜索', minWidth: 150}
      // ,{field: 'filterable', title: '可筛选', minWidth: 150}
      // ,{field:'city', width:115, title: '城市', minWidth:115, templet: '#cityTpl', exportTemplet: function(d, obj){
      //   //console.log(obj)
      //   // 处理该字段的导出数据
      //   var td = obj.td(this.field); //获取当前 td
      //   return td.find('select').val();
      // }}
      // ,{fixed: 'right', title:'操作', width: 125, minWidth: 125, toolbar: '#barDemo'}
    ]]
  });

  //头部事件
  util.event('lay-header-event', {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg('展开左侧菜单的操作', {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
        ,area: ['260px', '100%']
        ,offset: 'rt'
        ,anim: 5
        ,shadeClose: true
      });
    }
  });

   table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;  //获取选中行数据
        layer.alert(JSON.stringify(data));
      break;
    }
  });

});
</script>


</body>
</html>