layui根据条件隐藏列,且去掉占用

在业务中要求查询到某个数据时不展示某一列。但是发现使用$(".layui-table-box").find("[data-field='stay']").remove();无法填充整个页面。

最后使用一下方法完美解决且可保证填充后数据的居中展示。

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <div class="layui-form toolbar">
        <div class="layui-form-item" id="searchPosId"></div>
        <div
          class="layui-form-item"
          id="toolBtnId"
          style="margin-bottom: 0px"
        ></div>
      </div>
      <table
        class="layui-table"
        id="TrackWarnTable"
        lay-filter="TrackWarnTable"
      ></table>
    </div>
  </div>
</div>

<script type="text/html" id="itemStatus">
  <input type="checkbox" lay-filter="itemStatus" value="{{d.id}}"
  lay-skin="switch" lay-text="是|否" {{d.status==1?'checked':''}}/>
</script>

<script type="text/html" id="itemContent">
  <input type="checkbox" lay-filter="itemContent" value="{{d.id}}"
  lay-skin="switch" lay-text="是|否" {{d.isContent==1?'checked':''}}/>
</script>
<style>
/*表头居中*/
.layui-table-header thead .layui-table-cell{text-align: center}
</style>
<script>
  layui.use(
    ["syTableSet", "syCrudUtil", "syDialogUtil", "syTableSimpleSet"],
    function () {
      var $ = layui.jquery;
      var opt1 = {
        key: "TrackWarn",
        tableOptions: {
          url: "warn/warn/studentTrackWarn",
          id: "TrackWarnTable",
          fixed: "right",
          idAutoSort: true,
          page: false,
          limit: 5000,
          cols: [
            [
              { type: "numbers" },
              { field: "departCode", hide: true },
              { field: "areano", hide: true },
              {
                field: "departName",
                title: "学院 ",
                minWidth:200,
                align: "center",
              },
              {
                field: "allnum",
                title: "总人数",
                width: "15%",
                align: "center",
                templet: function (data) {
                  return (
                    "<div style='cursor:pointer;color:#4f98ed;' onclick=\"showAll('" +
                    data.departCode +
                    "','" +
                    data.areano +
                    "');\">" +
                    data.allnum +
                    "</div>"
                  );
                },
              },
              {
                field: "stay",
                title: "在校人数",
                width: 0,
                align: "center",
                templet: function (data) {
                    return (
                      "<div style='cursor:pointer;color:#4f98ed;' onclick=\"showStay('" +
                      data.departCode +
                      "','" +
                      data.areano +
                      "');\">" +
                      data.stay +
                      "</div>"
                    );
                },
              },
              {
                field: "tf",
                title: "24小时异常人数",
                width: "15%",
                align: "center",
                templet: function (data) {
                  return (
                    "<div style='cursor:pointer;color:#4f98ed;' onclick=\"showTf('" +
                    data.departCode +
                    "','" +
                    data.areano +
                    "');\">" +
                    data.tf +
                    "</div>"
                  );
                },
              },
              {
                field: "fe",
                title: "48小时异常人数",
                width: "15%",
                align: "center",
                templet: function (data) {
                  return (
                    "<div style='cursor:pointer;color:#4f98ed;' onclick=\"showFe('" +
                    data.departCode +
                    "','" +
                    data.areano +
                    "');\">" +
                    data.fe +
                    "</div>"
                  );
                },
              },
              {
                field: "leaves",
                title: "请假人数",
                width: "15%",
                align: "center",
                templet: function (data) {
                  return (
                    "<div style='cursor:pointer;color:#4f98ed;' onclick=\"showLeave('" +
                    data.departCode +
                    "','" +
                    data.areano +
                    "');\">" +
                    data.leaves +
                    "</div>"
                  );
                },
              },
            ],
          ],
          sort: {
            field: "to_number(sortNo)",
            type: "asc",
          },
          done: function (data) {
            //根据条件隐藏相关列
            if (data.data[0].areano == "1") {
              $(".layui-table-box").find("[data-field='stay']").remove();
            }
            //填充整个页面保持居中展示
            $('.layui-table').css("width", "100%");
            $(".layui-table").find("[data-field]").css("text-align", "center");
   			$("th[data-field='delete']").css("border-right", 'none');
          },
          isOperate: false,
        },
      };
      
      if (layui.syconf.renderMethod == "simple") {
      	console.log(111111111);
        layui.syTableSimpleSet.initTableSet(opt1);
      } else {
        layui.syTableSet.initTableSet(opt1);
      }

      window.showAll = function (departCode, areaNo) {
        layui.syDialogUtil.popupRight(
          "xy-queryRole",
          1000,
          "business/student/track/warn/userList",
          { departCode: departCode, type: "1", areaNo: areaNo }
        );
      };
      window.showStay = function (departCode, areaNo) {
        layui.syDialogUtil.popupRight(
          "xy-queryRole",
          1000,
          "business/student/track/warn/userList",
          { departCode: departCode, type: "2", areaNo: areaNo }
        );
      };
      window.showTf = function (departCode, areaNo) {
        layui.syDialogUtil.popupRight(
          "xy-queryRole",
          1000,
          "business/student/track/warn/userList",
          { departCode: departCode, type: "3", areaNo: areaNo }
        );
      };
      window.showFe = function (departCode, areaNo) {
        layui.syDialogUtil.popupRight(
          "xy-queryRole",
          1000,
          "business/student/track/warn/userList",
          { departCode: departCode, type: "4", areaNo: areaNo }
        );
      };
      window.showLeave = function (departCode, areaNo) {
        layui.syDialogUtil.popupRight(
          "xy-queryRole",
          1000,
          "business/student/track/warn/userList",
          { departCode: departCode, type: "5", areaNo: areaNo }
        );
      };
      
    }
  );
</script>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值