知道layui的朋友们都很熟悉layui的基本结构,所以在layui表格里面的操作列是放置按钮的,例图如下:
在这里是根据审核状态来切换按钮的,当我选中行的数据,将选中的数据审核,然后编辑的按钮就会切换为转销售的按钮,当我点击反审核的时候,转销售的按钮又变成编辑的按钮,这个其实很简单,我们来看一下吧!
首先是先创建表格,再设置操作按钮以及样式,然后就进行判断就可以了。
1、创建表格
$(function () {
//加载和初始化layui表格
layui.use(['layer', 'table'], function () {
layer = layui.layer;
layuiTable = layui.table;
tabSellIndentHistory = layuiTable.render({
elem: '#tabSellIndentHistory',
url: "selectSellIndentAll",
cols: [[//表头
{ type: "checkbox", fixed: "left" },
{ type: "numbers", title: "序号",fixed:"left" },
{ title: "操作", templet: setOperate, align: "center", width: 260, fixed: "left" },
{ field: "SaleLndentID", title: "SaleLndentID", hide: true },
{ field: "SaleLndentDeta", title: "业务日期", align: "center", width: 135 },
{ field: "SaleLndentNum", title: "单据编号", align: "center", width: 159 },
{ templet: setState, title: "处理状态", width: 146, align: "center" }
]],
});
});
2、设置操作按钮(其它按钮就不一一写了)
//设置操作按钮
function setOperate(data) {
var saleLndentID = data.SaleLndentID;
var SaleLndentState = data.SaleLndentState; //获取处理状态
var btn = "";
btn += '<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="openDetailModal(' + saleLndentID + ')">详情</button>';
btn += '<button class="layui-btn layui-btn-xs" onclick="openCopyInsertModal(' + saleLndentID + ')">复制新增</button>';
//如果处理状态为审核的话按钮就是转销售
if (SaleLndentState == true) {
btn += '<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="openTurnModal(' + saleLndentID + ')">转销售</button>';
}
//当处理状态为未审核的话按钮就是编辑
else {
btn += '<button class="layui-btn layui-btn-xs layui-btn-warm" style="width:46px;" onclick="openUpdateModal(' + saleLndentID + ')">编辑</button>';
}
btn += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="delsaleLndent(' + saleLndentID + ')">删除</button>';
return btn;
}
在这里我是通过处理状态来切换按钮的,因为状态在数据库中设置的是bit类型,所以只有true或者false,true为审核,false为未审核,所以在判断的时候只需要判断true或false就可以了。