layui_jxs.html 3.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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>解析管理</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
  <link rel="stylesheet" href="/static/plugin/layui/ext/soulTable/soulTable.css" media="all"/>
</head>
<body>
<table id="myTable" ></table>
<script type="text/html" id="toolbar">
  <div>
<!--    <button class="layui-btn layui-btn-sm" lay-event="clearFilter">清除所有筛选条件</button>-->
    <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
  </div>
</script>
<script type="text/html" id="bar">
  <a class="layui-btn layui-btn-xs" lay-event="set_top"></a>
  <a class="layui-btn layui-btn-xs" lay-event="set_bottom"></a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"></a>
</script>
<script src="/static/plugin/layui/layui.js"></script>
<script>
  // 自定义模块
  layui.config({
    base: '/static/plugin/layui/ext/',   // 模块目录
    version: 'v1.6.4'
  }).extend({
    soulTable: 'soulTable/soulTable',
    tableChild: 'soulTable/tableChild',
    tableMerge: 'soulTable/tableMerge',
    tableFilter: 'soulTable/tableFilter',
    excel: 'soulTable/excel',
  });

  layui.use(['form', 'table','soulTable'], function () {
    var table = layui.table, soulTable = layui.soulTable;
    soulTable.config({
          rowDrag: true
    });
    // 后台分页
    table.render({
      elem: '#myTable'
      ,id: 'myTable'
      ,url: '/layui/api/jx_list'
      ,height: 1000
      ,toolbar: '#toolbar'
      ,page: true
      ,limit:100
    ,limits:[20,40,60,80,100,150,200,300,500]
      ,cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'name', title: '名称', width: 200, sort: true, filter: true},
        {field: 'url', title: '接口', minWidth: 200, sort: true, filter: true},
        {field: 'type', title: '类型', width: 100 , filter: true},
        // {field: 'header', title: '请求头', width: 112,  filter: {split:','}, sort:true},
        {field: 'header', title: '请求头', width: 200, sort:true},
        {field: 'ext', title: '扩展信息', minWidth: 200, sort:true},
        {title: '操作', width: 156, fixed: 'right', templet: '#bar'}
      ]]
      ,done: function () {
        soulTable.render(this)
      }
    });

    // 工具栏事件
    table.on('toolbar(myTable)', function(obj){
      var id = obj.config.id;
      console.log(id);
      if (obj.event === 'clearFilter') {
        // 清除所有筛选条件并重载表格
        // 参数: tableId
        soulTable.clearFilter('myTable')
      }else if(obj.event === 'getData'){
        var getData = table.getData(id);
        console.log(getData);
        layer.alert(layui.util.escape(JSON.stringify(getData)));
      }
    });

    //触发单元格工具事件
    table.on('tool(bar)', function(obj) { // 双击 toolDouble
      console.log(obj);
      if(obj.event === 'del'){
        alert('删除...')
      }
    });
  // }, null, 'define');
  });


</script>
</body>
</html>