JZTXT

记录使用Layui中一些常用的api

发布时间 2023-04-25 12:03:31作者: o李一波o
获取当前操作行数据
var cols = [
    [
      {
          title: '操作',
          toolbar: '#option',
          align: 'center',
          height: 80,
          width: 120,
          fixed: 'right'
      }
    ]
]
<script type="text/html" id="option">
  <div style="padding-top:5px">
      <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-submit lay-filter="Detail">
          <i class="layui-icon layui-icon-template"></i>详情
      </button>
  </div>
</script>

form.on('submit(detail)', function (data) {// 点击详情
    let tableData = layui.table.getData('table');// 这里的table是table元素上绑定的lay-filter
    let tableIndex = $(data.elem).parents('tr').data('index');
    let dataField = tableData[tableIndex];
    dataField.OptionTitle = '详情';
    initAddDetail(dataField);
    return false;
});
实现这种效果


一、每行功能按钮一样

// 1.定义模板
<script type="text/html" id="option">
    <div style="padding-top:5px">
        <div id="moreContainer">
          <button type="button" class="layui-btn layui-btn-primary layui-btn-xs More">
            <i class="layui-icon layui-icon-down layui-font-12"></i>'更多'
          </button>
        </div>
    </div>
</script>

// 引入dropdown
let dropdown = layui.dropdown;
// dropdown初始化

// 刷新列表
function reloadTable(where) {
    dropdown.render({
        elem: '.More'//
        , trigger: 'hover'// 鼠标移入触发
        , data: dropdownData
        , click: function (data, othis) {// 更多下面的功能按钮点击触发
            let tableData = layui.table.getData('table');
            let tableIndex = this.elem.parents('tr').data('index');
            let dataField = tableData[tableIndex];
            initOrderDetail(dataField.OrderId);//渲染订单详情页
        }
    });
    tbl.reload({
        url: '/WorkOrder/GetRecords'
        , where: where
        , page: { curr: 1 }
        , limit: 50
    });
}

二、每行功能按钮不一样

// 1.引入dropdown
let dropdown = layui.dropdown;

// 2.定义table，并且在done里面调用[更多功能按钮初始化]
var tbl = table.render({
  elem: '#table'
  , page: true
  , limits: [10,50, 100, 150, 200, 500, 1000]
  , autoSort: false
  , cols: cols
  , done: function (res, curr, count) {
      if (where.WorkOrderQueryType == 'ExportQueryData') {
          where.page = 1;
          where.limit = 50000;
          location.href = "/WorkOrder/ExportQueryData";
          resetRefresh();
      }
      $('#AllCount').text(res.AllCount);
      $('#DraftCount').text(res.DraftCount);
      $('#ReplyCount').text(res.ReplyCount);
      $('#ReplyedCount').text(res.ReplyedCount);
      $('#HandlingCount').text(res.HandlingCount);
      $('#ClosuredCount').text(res.ClosuredCount);
      $('#ClosureFailCount').text(res.ClosureFailCount);
      $('#ClosureSuccessCount').text(res.ClosureSuccessCount);
      $('#ClosureUnknownCount').text(res.ClosureUnknownCount);
      $('#CanceledCount').text(res.CanceledCount);
      initMoreOption(res.data);
  }
});

// dropdown初始化

// 刷新列表
function reloadTable(where) {
    initMore();// 注意要在获取数据之前
    tbl.reload({
        url: '/WorkOrder/GetRecords'
        , where: where
        , page: { curr: 1 }
        , limit: 50
    });
}

// 初始化更多(注意要在获取数据之前)
function initMore() {
    var moreContainer = $('#moreContainer');
    if (typeof moreContainer != 'undefined') {
        $('#moreContainer').remove();
        $('#option').find('div[id=moreContainer]').remove();
    }

    moreContainer = $([
        , '<div id="moreContainer">'
        , '<div style="padding-top:5px">'
        , '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs More">'
        , '<i class="layui-icon layui-icon-down layui-font-12"></i>'
        , '更多'
        , '</button>'
        , '</div>'
        , '</div>'
    ].join(''));
    $('#option').append(moreContainer)
}

// 初始化更过操作按钮
function initMoreOption(data) {
    dropdownData = [];
    var record = data[0];
    if (typeof record != 'undefined') {
        dropdownData.push({ title: '复制新增' });
        dropdownData.push({ title: '取消' });
        dropdownData.push({ title: '日志' });
        dropdownData.push({ title: '售后信息' });
        dropdownData.push({ title: '转指派' });
        dropdown.render({
            elem: '.More'
            , trigger: 'hover'
            , data: dropdownData
            , ready: function (elemPanel, elem) {
                let lis = elemPanel.find('li');
                let tableData = layui.table.getData('table');
                let tableIndex = this.elem.parents('tr').data('index');
                let dataField = tableData[tableIndex];
                // 所有功能按钮先隐藏
                for (var i = 0; i < lis.length; i++) {
                    let li = lis[i];
                    $(li).hide();
                }
                // 遍历所有功能按钮，按需求展示
                for (var i = 0; i < lis.length; i++) {
                    let li = lis[i];
                    let txt = li.innerText;
                    if (dataField.StatusStr == null) {
                        if (txt == '售后信息' || txt == '日志') {
                            $(li).show();
                        }
                    }
                    if (dataField.StatusStr == '草稿') {
                        if (txt == '售后信息' || txt == '日志') {
                            $(li).show();
                        }
                        if (txt == '复制新增' && dataField.CopyAction) {
                            $(li).show();
                        }
                    }
                    if (dataField.StatusStr == '待回复' || dataField.StatusStr == '已回复' || dataField.StatusStr == '售后处理中') {
                        if (txt == '售后信息' || txt == '日志') {
                            $(li).show();
                        }
                        if (txt == '转指派' && dataField.TurnReplyAction) {
                            $(li).show();
                        }
                        if (txt == '复制新增' && dataField.CopyAction) {
                            $(li).show();
                        }
                        if (txt == '取消' && dataField.CancelAction) {
                            $(li).show();
                        }
                    }
                    if (dataField.StatusStr == '已结案') {
                        if (txt == '售后信息' || txt == '日志') {
                            $(li).show();
                        }
                        if (txt == '复制新增' && dataField.CopyAction) {
                            $(li).show();
                        }
                    }
                    if (dataField.StatusStr == '已结案未解决') {
                        if (txt == '售后信息' || txt == '日志') {
                            $(li).show();
                        }
                        if (txt == '复制新增' && dataField.CopyAction) {
                            $(li).show();
                        }
                    }
                    if (dataField.StatusStr == '已结案已解决') {
                        if (txt == '售后信息' || txt == '日志') {
                            $(li).show();
                        }
                        if (txt == '复制新增' && dataField.CopyAction) {
                            $(li).show();
                        }
                    }
                    if (dataField.StatusStr == '已结案未知') {
                        if (txt == '售后信息' || txt == '日志') {
                            $(li).show();
                        }
                        if (txt == '复制新增' && dataField.CopyAction) {
                            $(li).show();
                        }
                    }
                    if (dataField.StatusStr == '已取消') {
                        if (txt == '售后信息' || txt == '日志') {
                            $(li).show();
                        }
                    }

                }
            }
            , click: function (data, othis) {
                let tableData = layui.table.getData('table');
                let tableIndex = this.elem.parents('tr').data('index');
                let dataField = tableData[tableIndex];

                dataField.OptionTitle = data.title;
                if (data.title == '订单详情') {
                    initOrderDetail(dataField.OrderId);
                } else if (data.title == '复制新增') {
                    initAddDetail(dataField);
                } else if (data.title == '日志') {
                    showLog(dataField.Id);
                } else if (data.title == '详情') {
                    initAddDetail(dataField);
                } else if (data.title == '编辑') {
                    initAddDetail(dataField);
                } else if (data.title == '回复') {
                    initReply(dataField.Id, data.title);
                } else if (data.title == '售后信息') {
                    initAfterSale(dataField.OrderId);
                } else if (data.title == '取消') {
                    initCancel(dataField.Id, dataField.Version);
                } else if (data.title == '转指派') {
                    initReply(dataField.Id, data.title);
                }
            }
        });
    }
}