layui table render渲染的問題

 

使用layui的table.render 來渲染頁面

js

table.render({
            elem: '#member_data',//利用類或者id選擇器找到元素
            url:'/inf/venue/search/get',//接口地址
            method: 'post',
            id: 'table',//為重載等其他操作找到初始化的table控件
            where: {searchValue: input.val()},//額外參數
            contentType: 'application/x-www-form-urlencoded',
            cols: [[
                {type: 'numbers', title: '序號',minWidth: 50},//numbers 是前端自生成的遞增的序號
                {field:'hotelcode', title:'編號', width:120},//對應數據的字段名
                {field:'bak04', title:'場地類型', width:180},
                {field:'hotelname', title:'場地名稱'},
                {title:'操作', toolbar: '#barDemo', width:180}
            ]],
            page: true//開啟分頁
        });

　html

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>

<table class="layui-hide" id="member_data" lay-filter="member_data"></table>

　　監聽修改和刪除

table.on('tool(member_data)', function(obj){ //注：tool 是工具條事件名，member_data是 table 原始容器的屬性 lay-filter="對應的值"
            var data = obj.data; //獲得當前行數據
            var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 參數對應的值）
            var tr = obj.tr; //獲得當前行 tr 的 DOM 對象
            console.log(obj);
    
            if(layEvent === 'del'){ //刪除
                $('.member_del_box').show()
            } else if(layEvent === 'edit'){ //編輯 和模板中 lay-event="edit"的值相同
                //do something
                editAddAlertInit();
                editSute(obj)
                edit=true;

            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，頭部工具欄擴展的右側圖標。');
            }
        });

　　重載

   table.reload('table', {//和render設置的id值一致
         where: {searchValue: “額外參數”}
   })