Skip to content

dr_py
dr_py

pgl99 / dr_py
与 Fork 源项目一致
2023-03-02 03:36:06同步失败

Fork自 晚风拂柳颜 / dr_py

通知 1
Star 0
Fork 0
dr_py
dr_py

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
layui_index.html 7.1 KB
Newer Older
H
增加未来功能  
hjdhnx 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 
<!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>