想要將操作按鈕單獨提出來,不放在表格中操作,網上找了很多方式都是用的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);
});