Skip to content

dr_py
dr_py

tianxiawei / dr_py
与 Fork 源项目一致

Fork自 晚风拂柳颜 / dr_py

通知 1
Star 0
Fork 0
dr_py
dr_py

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
layui_list.html 9.8 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 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 
<!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>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
    <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
      重载测试
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="multi-row">
      多行
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="default-row">
      单行
    </button>
    <button class="layui-btn layui-btn-sm" id="moreTest">
      更多测试
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
  </div>
</script>

<script type="text/html" id="cityTpl">
  <select id="demoCity1" class="layui-border" lay-ignore>
    <option value="浙江杭州">浙江杭州</option>
    <option value="江西南昌">江西南昌</option>
    <option value="湖北武汉">湖北武汉</option>
  </select>
</script>

<script type="text/html" id="barDemo">
  <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>
layui.use(['table', 'dropdown'], function(){
  var table = layui.table;
  var dropdown = layui.dropdown;
  layer.msg('本页面展示数据为未来功能，<br>可能并没有实际作用,等道长弃坑后续有缘人补上。', {
    closeBtn: 1,
    icon: 6,
    time: 21*1000,
    offset: '21px'
  });

  // 创建渲染实例
  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:12
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      // ,{field: 'id', fixed: 'left',title: 'ID', width: 20, sort: true,totalRowText: '合计：'}
      ,{field: 'id',title: 'ID', width: 20, sort: true}
      ,{field: 'name', title: '名称', width: 120}
      ,{field: 'key', title: '唯一标识', width: 120}
      ,{field: 'type', title: '<i class="layui-icon layui-icon-email">类型</i>', minWidth: 80}
      ,{field: 'searchable', title: '可搜索', minWidth: 80}
      ,{field: 'quickSearch', title: '可快搜', minWidth: 80}
      ,{field: 'filterable', title: '可筛选', minWidth: 80}
      // ,{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'}
    ]]
    ,done: function(){
      var id = this.id;

      // 重载测试
      dropdown.render({
        elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
        ,data: [{
          id: 'reload',
          title: '重载'
        },{
          id: 'reload-deep',
          title: '重载 - 参数叠加'
        },{
          id: 'reloadData',
          title: '仅重载数据'
        },{
          id: 'reloadData-deep',
          title: '仅重载数据 - 参数叠加'
        }]
        // 菜单被点击的事件
        ,click: function(obj){
          switch(obj.id){
            case 'reload':
              // 重载 - 默认（参数重置）
              table.reload('test', {
                where: {
                  abc: '123456'
                  //,test: '新的 test2'
                  //,token: '新的 token2'
                }
              });
            break;
            case 'reload-deep':
              // 重载 - 深度（参数叠加）
              table.reload('test', {
                where: {
                  abc: 123
                  ,test: '新的 test1'
                }
                //,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
                //,cols: ins1.config.cols
              }, true);
            break;
            case 'reloadData':
              // 数据重载 - 参数重置
              table.reloadData('test', {
                where: {
                  abc: '123456'
                  //,test: '新的 test2'
                  //,token: '新的 token2'
                }
                ,scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                ,height: 2000 // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                //,url: '404'
                //,page: {curr: 1, limit: 30} // 重新指向分页
              });
            break;
            case 'reloadData-deep':
              // 数据重载 - 参数叠加
              table.reloadData('test', {
                where: {
                  abc: 123
                  ,test: '新的 test1'
                }
              }, true);
            break;
          }
          layer.msg('可观察 Network 请求参数的变化');
        }
      });

      // 更多测试
      dropdown.render({
        elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
        ,data: [{
          id: 'add',
          title: '添加'
        },{
          id: 'update',
          title: '编辑'
        },{
          id: 'delete',
          title: '删除'
        }]
        //菜单被点击的事件
        ,click: function(obj){
          var checkStatus = table.checkStatus(id)
          var data = checkStatus.data; // 获取选中的数据
          switch(obj.id){
            case 'add':
              layer.open({
                title: '添加',
                type: 1,
                area: ['80%','80%'],
                content: '<div style="padding: 16px;">自定义表单元素</div>'
              });
            break;
            case 'update':
              if(data.length !== 1) return layer.msg('请选择一行');
              layer.open({
                title: '编辑',
                type: 1,
                area: ['80%','80%'],
                content: '<div style="padding: 16px;">自定义表单元素</div>'
              });
            break;
            case 'delete':
              if(data.length === 0){
                return layer.msg('请选择一行');
              }
              layer.msg('delete event');
            break;
          }
        }
      });
    }
    ,error: function(res, msg){
      console.log(res, msg)
    }
  });

  // 工具栏事件
  table.on('toolbar(test)', function(obj){
    var id = obj.config.id;
    var checkStatus = table.checkStatus(id);
    var othis = lay(this);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(layui.util.escape(JSON.stringify(data)));
      break;
      case 'getData':
        var getData = table.getData(id);
        console.log(getData);
        layer.alert(layui.util.escape(JSON.stringify(getData)));
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选')
      break;
      case 'multi-row':
        table.reload('test', {
          // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
          lineStyle: 'height: 95px;'
        });
        layer.msg('即通过设置 lineStyle 参数可开启多行');
      break;
      case 'default-row':
        table.reload('test', {
          lineStyle: null // 恢复单行
        });
        layer.msg('已设为单行');
      break;
      case 'LAYTABLE_TIPS':
        layer.alert('Table for layui-v'+ layui.v);
      break;
    };
  });

  //触发单元格工具事件
  table.on('tool(test)', function(obj){ // 双击 toolDouble
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('真的隐藏行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.open({
        title: '编辑',
        type: 1,
        area: ['80%','80%'],
        content: '<div style="padding: 16px;">自定义表单元素</div>'
      });
    }
  });

  //触发表格复选框选择
  table.on('checkbox(test)', function(obj){
    console.log(obj)
  });

  //触发表格单选框选择
  table.on('radio(test)', function(obj){
    console.log(obj)
  });

  // 行单击事件
  table.on('row(test)', function(obj){
    //console.log(obj);
    //layer.closeAll('tips');
  });
  // 行双击事件
  table.on('rowDouble(test)', function(obj){
    console.log(obj);
  });

  // 单元格编辑事件
  table.on('edit(test)', function(obj){
    var field = obj.field //得到字段
    ,value = obj.value //得到修改后的值
    ,data = obj.data; //得到所在行所有键值

    var update = {};
    update[field] = value;
    obj.update(update);
  });
});
</script>

</body>
</html>