在layui表格的操作中如何实现按钮的切换

知道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就可以了。

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值