layui的table在reload之后工具欄按鈕失效的問(wèn)題解決方案

layui的table在使用了toolbar工具欄后,刷新表格,工具欄的按鈕會(huì)失效,原因是表格重新加載后,沒(méi)有綁定工具欄按鈕的觸發(fā)事件,因此只需要在表格初始化完畢之后和刷新表格完畢后重新綁定一下所有按鈕的綁定事件就可以了,這里把事件處理集合到了一個(gè)方法中,請(qǐng)參照bindTableToolbarFunction,具體代碼如下:

松北網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),松北網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為松北上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的松北做網(wǎng)站的公司定做！

1. Html頁(yè)面

<section class="layui-fluid">
    <aside class="layui-card" id="queryDiv">
        <div class="layui-elem-quote">
            <form class="layui-form">
                    <div class="layui-inline">
                        <label>號(hào)碼:</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" id="phone" type="text">
                        </div>
                    <a class="layui-btn search_btn" data-type="reload">搜索</a>
                    </div>
            </form>
        </div>
    </aside>

    <article class="my-table">
        <table id="tableList" lay-filter="tableList"></table>
    </article>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container" id="tableNav">
            <button type="button" class="layui-btn layui-btn-sm" id="add">新增用戶(hù)</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="del">刪除用戶(hù)</button>
        </div>
    </script>
</section >

2. 對(duì)應(yīng)的js

layui.use(['form','layer','table'],function(){
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        table = layui.table;

    // 加載提示
    var loadingMsg = layer.msg('數(shù)據(jù)請(qǐng)求中', {icon: 16,scrollbar: false,time: 0});
    // 初始化表格及數(shù)據(jù)
    var tableIns = table.render({
        elem: '#tableList',
        url : 'sysUser/list',
        where :{
            phone : $("#phone").val()
        },
        cellMinWidth : 95,
        toolbar: "#toolbarDemo", //讓工具欄左側(cè)顯示默認(rèn)的內(nèi)置模板
        defaultToolbar: ['filter'], // 工具欄右側(cè)的圖標(biāo)按鈕['filter', 'print', 'exports']
        even: true, // 開(kāi)啟斑馬線(xiàn)效果
        page : true,
//        height : "full-125",//放置在頁(yè)面底部
        limits : myLimits,
        limit : myLimit,
        id : "tableListTable",
        cols : [[
            {field: 'userId', title: 'ID', width:100, align:"center"},
            {field: 'userName', title: '用戶(hù)名', minWidth:150, align:"center"},
            {field: 'state', title: '狀態(tài)', width:80, align:"center", templet: stateFormat},
            {field: 'sex', title: '性別', width:80, align:"center", templet: sexFormat},
            {field: 'remark', title: '備注', align:"center"}
        ]],
        done: function(res, curr, count){
            // 關(guān)閉提示層
            layer.close(loadingMsg);
            // 綁定表格工具欄按鈕的觸發(fā)事件
            bindTableToolbarFunction();
        }
    });

    // ==================== 定義常規(guī)函數(shù) ====================
    // 刷新表格數(shù)據(jù)
    function reloadTable(){
        // 加載提示
        loadingMsg = layer.msg('數(shù)據(jù)請(qǐng)求中', {icon: 16,scrollbar: false,time: 0});
        // 重新加載數(shù)據(jù)
        table.reload("tableListTable",{
            page: {
                curr: 1 //重新從第 1 頁(yè)開(kāi)始
            },
            where: {
                phone : $("#phone").val()
            },
            done: function(res, curr, count){
                layer.close(loadingMsg);
                bindTableToolbarFunction()
            }
        });
    }

    // 搜索【此功能需要后臺(tái)配合，所以暫時(shí)沒(méi)有動(dòng)態(tài)效果演示】
    $(".search_btn").on("click",function(){
        // 刷新表格
        reloadTable();
    });

    // 格式化顯示用戶(hù)狀態(tài)信息
    function stateFormat(d){
        var str;
        if (d.state == 0) {
            str = '<span class="fontColor_red">禁用</span>';
        } else if(d.state == 1) {
            str = '<span class="fontColor_green">正常</span>';
        } else {
            str = '<span class="fontColor_darkOrange">鎖定</span>';
        }
        return str;
    }

    // 格式化顯示sex信息
    function sexFormat(d){
        var str;
        if (d.sex == 0) {
            str = '女';
        } else if(d.sex == 1) {
            str = '男';
        } else {
            str = '<span class="fontColor_red">未知</span>';
        }
        return str;
    }

    // ==================== 定義事件處理 ====================
    // 綁定事件集合處理(表格加載完畢和表格刷新的時(shí)候調(diào)用)
    function bindTableToolbarFunction() {
        // 綁定新增用戶(hù)事件
        $("#add").on("click", function() {
            layer.alert("新增用戶(hù)被調(diào)用了", {icon: 6});
        });

        // 綁定刪除用戶(hù)事件
        $("#del").on("click", function() {
            layer.alert("刪除用戶(hù)被調(diào)用了", {icon: 6});
        });
    }
})

本文標(biāo)題：layui的table在reload之后工具欄按鈕失效的問(wèn)題解決方案
轉(zhuǎn)載源于：http://muchs.cn/article36/jpiopg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、App開(kāi)發(fā)、定制開(kāi)發(fā)、響應(yīng)式網(wǎng)站、搜索引擎優(yōu)化、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)