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);
            });

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章