layui table自定义模板

富贵儿别怕

已于 2023-04-01 09:09:21 修改

阅读量643

点赞数

文章标签： layui javascript html

于 2023-04-01 09:07:31 首次发布

本文链接：https://blog.csdn.net/zhao3756/article/details/129892543

版权

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="http://unpkg.com/layui@2.6.8/dist/css/layui.css">
  <!-- 引入 layui.js -->
  <script src="http://unpkg.com/layui@2.6.8/dist/layui.js"></script>

  <style>
    .layui-form-checkbox {
      padding-right: 0 !important;
    }

    .layui-table-view .layui-form-checkbox i {
      height: 18px !important;
    }


    .layui-form-checkbox i {
      width: 18px !important;
      font-size: 18px !important;
      border-width: 1px !important;
      border-style: solid !important;
      border-color: rgb(210, 210, 210) !important;
    }

    .layui-form-checked i {
      border-color: #5FB878 !important;
      background-color: #5FB878 !important;
      color: #fff !important;
    }

    .laytable-cell-1-0-3 {
      height: 60px !important;
      line-height: 25px !important;
      padding: 0 15px !important;
      position: relative !important;
      box-sizing: border-box !important;
    }

    .layui-table tr {
      height: 60px;
      /* line-height: 60px; */
    }

    .layui-table-view .layui-table th[data-field='action'] .laytable-cell-1-0-3 {
      line-height: 60px !important;
    }
  </style>

</head>

<body>
  <!-- 测试列表 -->
  <table class="test-table" id="test-table" lay-size="lg" lay-filter="testFilter"></table>
  <button id="getBtn">查看选中数据</button>

  <!-- 自定义cell 指定id -->
  <script type="text/html" id="test-table-action">
    {{#  if(d.hobby1==1){ }}
    <input type="checkbox" name="hobby1" id={{d.id}} checked value={{ d.hobby1 }} lay-event="hobby1"
      lay-filter="hobby1"><span style="margin-left: 10px;">篮球</span><br />
  
    {{# } else { }}
    <input type="checkbox" name="hobby1" id={{d.id}} value={{ d.hobby1 }} lay-event="hobby1"
    lay-filter="hobby1"><span style="margin-left: 10px;">篮球</span><br />
    {{# } }}
  
    {{# if(d.hobby2==1){ }}
    <input type="checkbox" name="hobby2" id={{d.id}}  checked value={{ d.hobby2 }} lay-event="hobby2"
    lay-filter="hobby2"><span style="margin-left: 10px;">背带裤</span><br />
    {{# } else { }}
    <input type="checkbox" name="hobby2" id={{d.id}} value={{ d.hobby2 }} lay-event="hobby2"
    lay-filter="hobby2"><span style="margin-left: 10px;">背带裤</span><br />
    {{# } }}
  </script>

  <script>
    window.onload = function () {
      const tableData = [
        { "id": 1, "name": '鸡哥', "age": '22', "hobby1": 0, "hobby2": 0 },
        { "id": 2, "name": '狗哥', "age": '30', "hobby1": 0, "hobby2": 0 },
        { "id": 3, "name": '猫弟', "age": '12', "hobby1": 0, "hobby2": 0 },
        { "id": 4, "name": '喜羊羊', "age": '55', "hobby1": 0, "hobby2": 0 },
      ]
      layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        table.render({
          id: 'testTable',
          elem: '#test-table',
          cols: [[
            { type: 'checkbox' },
            { field: 'name', width: 92, title: '姓名', align: 'center' },
            { field: 'age', width: 92, title: '年龄', align: 'center' },
            { field: 'action', width: 120, title: '爱好', align: 'center', templet: '#test-table-action' }
          ]],
          data: tableData,
          page: false
        });

        //监听表格复选框选择
        table.on('checkbox(testFilter)', function (obj) {
          console.log(obj)
        });

        form.on('checkbox(hobby1)', function (data) {
          var status = data.elem.checked ? 1 : 0;
          console.log(">>>>>>>>>>>>>>", status);
          console.log(data.elem.id)
          const currentId = data.elem.id
          tableData.forEach(element => {
            if (element.id == currentId) {
              element.hobby1 = status
              return
            }
          });
        });

        form.on('checkbox(hobby2)', function (data) {
          var status = data.elem.checked ? 1 : 0;
          console.log(">>>>>>>>>>>>>>", status);
          console.log(data.elem.id)
          const currentId = data.elem.id
          tableData.forEach(element => {
            if (element.id == currentId) {
              element.hobby2 = status
              return
            }
          });
        });

        var btn = document.getElementById('getBtn');
        btn.addEventListener('click', function () {
          console.log('选中的数据>>>')
          var checkStatus = table.checkStatus('testTable')
          const data = checkStatus.data;
          console.log(JSON.stringify(data))
        }, false)

      });

    }
  </script>


</body>

</html>