layui框架中表格的操作放在工具栏

最新推荐文章于 2022-03-26 13:41:11 发布

原创最新推荐文章于 2022-03-26 13:41:11 发布 · 1.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #jquery #html5 #css #javascript

laravel 同时被 3 个专栏收录

61 篇文章

订阅专栏

ThinkPHP

34 篇文章

订阅专栏

前端

23 篇文章

订阅专栏

本文介绍了一种在不使用table.render()方法的情况下，将操作按钮从表格中独立出来的实现方式，通过具体代码示例展示了如何在layui框架下创建独立的操作按钮区域，包括添加、编辑和删除等操作。

想要将操作按钮单独提出来，不放在表格中操作，网上找了很多方式都是用的table.render()方法，但是并不能解决问题，查看底层代码后发现的解决方式，亲测有效

表格及工具栏的效果图：

操作代码：

<div  id="table-list">
        <div type="text/html" id="toolbarDemo" lay-filter="couponList">
          <div class="layui-btn-container">
            <button class="layui-btn" type="button" onclick="x_admin_show('添加道具','/Rbac.Coupon/addCoupon')"><i class="layui-icon"></i>添加</button>
            <button class="getId layui-btn layui-btn-sm layui-btn-normal edit-btn"  lay-event="" data-url="/Rbac.Coupon/editCoupon"><i class="layui-icon"></i>编辑</button>
            <button class="getId layui-btn layui-btn-sm layui-btn-danger  del-btn"  lay-event="" data-url="/Rbac.Coupon/couponProcess"><i class="layui-icon"></i>删除</button>
          </div>
        </div>
        <table class="layui-table" id="couponList"  lay-filter="couponList">
          <thead>
          <tr>
            <th lay-data="{field:'cu_id'}">ID</th>
            <th lay-data="{field:'type'}">类型</th>
            <th lay-data="{field:'coupon_name'}">名称</th>
            <th lay-data="{field:'unit'}">单位</th>
            <th lay-data="{field:'icon',width:80}">icon</th>
            <th lay-data="{field:'picture',width:80}">详情图</th>
            <!--<th lay-data="{field:'sp_name'}">投放渠道</th>-->
            <th lay-data="{field:'condition'}">使用说明</th>
            <th lay-data="{field:'start_time'}">开始时间</th>
            <th lay-data="{field:'end_time'}">结束时间</th>
            <th lay-data="{field:'admin_name'}">创建人</th>
          </thead>
          <tbody>
          {volist name="couponList" id="vo"}
          <tr>
            <td class="hidden-xs">{$vo.cu_id}</td>
            <td>{$vo.type}</td>
            <td class="hidden-xs">{$vo.coupon_name}</td>
            <td>{$vo.unit}</td>
            <td>{$vo.icon}</td>
            <td>{$vo.picture}</td>
            <!--<td>{$vo.sp_name}</td>-->
            <td>{$vo.condition}</td>
            <td>{$vo.start_time}</td>
            <td>{$vo.end_time}</td>
            <td>{$vo.admin_name}</td>
            <td></td>
          </tr>
          {/volist}
          </tbody>
        </table>
      </div>

选中当前行并获取数据以及修改当前行颜色的代码：

//监听工具条
            table.on('row(couponList)', function(obj){
              $(obj.tr).siblings().css("background-color","");//清除其他选中行
              obj.tr.css("background-color","#9BF9F3");//设置当前选中行

                var data = obj.data; //获得当前行数据
                $(".getId").attr('data-id',data.cu_id);
            });