Layui數據表格/搜索重加載/分條件操作/工具條監聽

<div class="layui-layout layui-layout-admin" style="padding-left: 20px;">
    <div class="layui-row" style="margin-top: 20px;">
    
		//搜索開始
        <form class="layui-form" action="" onsubmit="return false;" >
            <div class="demoTable">
                <div class="layui-form-item">

                    <div class="layui-input-inline">
                        <input type="number" id="merchant_id" name="merchant_id" placeholder="商鋪ID" autocomplete="off" class="layui-input">
                    </div>

                    <div class="layui-input-inline">
                        <select name="status" id="status" lay-verify="">
                            <option value=-1>審覈狀態</option>
                            <option value=1>已同意</option>
                            <option value=2>已拒絕</option>
                        </select>
                    </div>

                    <div class="layui-col-xs1 search_text">
                        <button class="layui-btn" data-type="reload"><i class="layui-icon">&#xe615;查詢</i></button>
                    </div>
					//搜索結束，點擊查詢使用reload重加載表格
					
                </div>
            </div>
        </form>
    </div>
    <table class="layui-hide" id="table_list" lay-filter="table_filter"></table>
</div>

<script>
    layui.use(['table', 'form', 'element','layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;
        var layer = layui.layer;

        //渲染表格數據
        table.render({
            elem: '#table_list',
            url: '/withdrawal/checklogtable',
            cols: [[
                {field: 'id', title: '編號', sort: true},
                {title: '申請商鋪名(ID)',templet:function (d) {
                        return d.merchant_name+'('+d.merchant_id+')';
                    }},
                {field: 'balance', title: '賬戶餘額'},
                {field: 'already_withdraw', title: '賬戶已提現金額'},
                {field: 'amount', title: '本次申請提現金額'},
                {field: 'name',title: '提現名'},
                {field: 'bank',title: '提現銀行'},
                {field: 'bank_card', title: '提現卡號'},
                {field: 'status',title: '審覈結果'},
                {title: '審覈管理員',templet:function (d) {
                        return d.admin_name+'('+d.admin_id+')'
                    }},
                {field: 'update_time' ,title: '審覈時間'},
                {title: '操作',width:200,templet:function (d) {
                        var button;
                        var earndetail = '<a class="layui-btn layui-btn-xs" lay-event="earndetail">查看收益明細</a>';
                        var transfer= '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="transfer">打款</a>';
                        var reason= '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reason">拒絕理由</a>';
                        if(d.status==="已同意") {
                            button = earndetail+transfer;
                        }else{
                            button = earndetail+reason;
                        }
                        return button;
                    }}
            ]]
            , id: 'listReload'
            , page: true
            , limit: 10
            , height: "full-130"
        });

		//根據搜索條件重加載表格
        var $ = layui.$, active = {
            reload: function () {
                table.reload('listReload', {
                    where: {
                        merchant_id : $('#merchant_id').val(),
                        status : $('#status').val()
                    }
                });
            }
        };

        //監聽工具條(操作中的lay-event屬性)
        table.on('tool(table_filter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'earndetail') {
                x_admin_show('收益詳情', "/withdrawal/earndetaillist?merchant_id=" + data.merchant_id,1500,800)
            }else if (obj.event === 'transfer') {
                layer.prompt({
                    formType: 1,
                    value: '',
                    title: '請手動打款並輸入管理員密碼確認',
                }, function(value, index, elem){
                    var formData = new FormData();
                    formData.append("id",obj.data.id);
                    formData.append("admin_password",value);
                    $.ajax(
                        {
                            type:'post',
                            url: "/withdrawal/transfer",
                            data: formData,
                            contentType: false,
                            cache:false,
                            processData : false,
                            beforeSend: function () {
                            },
                            success: function(returndata){
                                if(returndata.code==200)
                                    layer.alert(returndata.msg, {icon: 6},function (thiswindow) {
                                        location.reload();
                                        layer.close(thiswindow);
                                    });
                                else
                                    layer.alert(returndata.msg, {icon: 5},function (thiswindow) {
                                        layer.close(thiswindow);
                                    });
                            },
                            error: function () {
                                layer.alert('請求錯誤.請稍後再試', {icon: 5},function (thiswindow) {
                                    layer.close(thiswindow);
                                });
                            }
                        }
                    )
                });
            }else if (obj.event === 'reason') {
                layer.alert(obj.data.refuse_reason);
            } else{
                layer.msg('操作不存在');
            }
        });

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

</script>

效果圖：