获取当前操作行数据
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);
}
}
});
}
}