评鉴通 UI （PUI）

    <!-- 只说说大概结构 -->
    <div class="query-form">
        <form class="pui-form" id="queryForm">
            <!-- 这里填写各种查询标签，譬如选项，搜索关键字，高级搜索，日期等 -->
        </form>
    </div>
    <!-- 下面表格结构 -->
    <div class="page-table hasPagination">
        <div class="overflow-table">
            <table class="table table-center table-song table-relative table-big" id="tableObj">
                <thead>
                    <tr class="header">
                        <th class="tl">管理员帐号</th>
                        <th>总人次</th>
                        <th>完成人次</th>
                        <th>外完成人次</th>
                        <th>剩余必填人次</th>
                        <th>完成比例</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 渲染后数据填充位置 -->
                </tbody>
            </table>
        </div>
    </div>

    var tableObj = $('#tableObj');
    var tableTmpl = $('#tableTmpl');
    var queryform = $('#queryForm');
    var queryformurl = 'assets/admin/v4.0.3/json/glysytj.json'; // 查询接口

    var tablesimple = new TableSimple(tableObj, tableTmpl, {
        bgcCtrl: true,      // 是否控制表格行背景色
        hoverColor: '#ffc',
        oddColor: '#fff',
        evenColor: '#fff',
        datastyle: 'local',     // 首屏数据来源，local（首屏本地），url（远程请求）
        dataSource: tabledata,      // 首屏数据
        isBase64: false,        // 数据是否 base64（首屏及翻页、查询）
        isquery: true,          // 是否支持查询
        pageCtrl: true,        // 是否有分页
        container: $('tbody', tableObj),    // 数据dom容器
        queryObj: queryform,        // 如果带查询，这里提供查询form的 $(id)
        queryUrl: queryformurl,     // 数据接口
        suppBack: false,        // 是否支持浏览器【返回】按钮
        firstLoadCallback: function() {},   // 首次渲染完回调
        afterLoadCallback: function() {},   // 每次渲染完回调
        afterPage: function() {},   // 每次翻页后回调
        afterQuery: function(){}    // 每次查询后回调
    })