@@include("../_include/head.html")
<div class="wqFrame">
    @@include("../_include/nav.html")
    <div class="wqFrame-main">
        @@include("../_include/leftmenu.html")
        <style>
            body {
                overflow-y: scroll;
            }
        </style>
        <div class="wqFrame-panelRight">
            <div class="wqFrameui-panelRight-topNav">
                <a class="pull-left wqFrameui-backUp" href="index.html">
                    <span class="wqIcon-backUp"></span>返回上一页
                </a>数据表格的重载
            </div>
            <div class="wqFrameui-panelRight-mainWrap mCustomScrollbar" data-mcs-theme="dark-thin">
                <div class="demoTable">
                    搜索ID：
                    <div class="form-inline">
                        <input class="form-control" name="id" id="demoReload" autocomplete="off">
                    </div>
                    <button class="btn" data-type="reload">搜索</button>
                </div>

                <table class="hide" id="WQ_table_user" wq-filter="user"></table>
                <script>
                    //方法级渲染
                    table.render({
                        elem: '#WQ_table_user',
                        url: '../../json/table/demo1.json',
                        cols: [
                            [{
                                checkbox: true,
                                fixed: true
                            }, {
                                field: 'id',
                                title: 'ID',
                                width: 80,
                                sort: true,
                                fixed: true
                            }, {
                                field: 'username',
                                title: '用户名',
                                width: 80
                            }, {
                                field: 'sex',
                                title: '性别',
                                width: 80,
                                sort: true
                            }, {
                                field: 'city',
                                title: '城市',
                                width: 80
                            }, {
                                field: 'sign',
                                title: '签名'
                            }, {
                                field: 'experience',
                                title: '积分',
                                sort: true,
                                width: 80
                            }, {
                                field: 'score',
                                title: '评分',
                                sort: true,
                                width: 80
                            }, {
                                field: 'classify',
                                title: '职业',
                                width: 80
                            }, {
                                field: 'wealth',
                                title: '财富',
                                sort: true,
                                width: 135
                            }]
                        ],
                        id: 'testReload',
                        page: true,
                        height: 315
                    });

                    var active = {
                        reload: function () {
                            var demoReload = $('#demoReload');

                            //执行重载
                            table.reload('testReload', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                },
                                where: {
                                    key: {
                                        id: demoReload.val()
                                    }
                                }
                            });
                        }
                    };

                    $('.demoTable .btn').on('click', function () {
                        var type = $(this).data('type');
                        active[type] ? active[type].call(this) : '';
                    });
                </script>
            </div>
            @@include("../_include/foot.html")
        </div>
    </div>
</div>