qTable v0.3.2

jquery.qtable.js 是一个table插件，基于jquery。

需求

• jQuery
• Bootstrap3
• Font Awesome - 图标：fa-square-o fa-check-square-o fa-minus-square-o
• jsrender - 模版工具

API

初始化

默认

<div id="qtable" class="qt-content"></div>

<!-- tmpl https://github.com/BorisMoore/jsrender -->
<script class="qt-tmpl" type="text/x-jsrender">
    <table class="table table-hover table-condensed table-bordered">
        <thead>
            <tr>
                <th>用户名</th>
                <th>邮箱</th>
                <th>创建日期</th>
                <th>是否激活</th>
                <th>注解</th>
            </tr>
        </thead>
        <tbody>
            {{for #data}}
                <tr>
                    <td>{{>name}}</td>
                    <td>{{>email}}</td>
                    <td>{{>createDate}}</td>
                    <td>{{>isApproved}}</td>
                    <td>{{>comment}}</td>
                </tr>
            {{/for}}
        </tbody>
    </table>
</script>

$('#qtable').qtable();

参数初始化

$('#qtable').qtable({ url: "" });

Data attributes 初始化

<div id="qtable" class="qt-content" data-url=""></div>

$('#qtable').qtable();

设置参数

$('#qtable').qtable("option", "url", "");

设置多个参数

$('#qtable').qtable("option", { url: "" });

获取参数

var url = $('#qtable').qtable("option", "url");

Options

url

ajax远程地址

• 默认值："" 默认意味着：不启用远程

sort

ajax远程调用时提供的字段排序参数

• 默认值：{ field: "id", order: "desc" }

pager

启用远程：分页参数

• 默认值：pager: { size: 20, index: 0 }

不启用远程：本地数据分页规则

• 默认值: false 默认不分页

predicate

启用远程时的条件谓词参数。由服务器端代码决定

• 默认值：{}
• 举例：
• { fuzzy: "" }
• { exacts: [{ name: "", value: "" },{ name: "", value: "" }] }
• { customs: [{ name: "", value: "" },{ name: "", value: "" }] }

tmpl or tmplThead tmplTbody

模板的id

• 默认值：""

renderhelpers

模板帮助对象: Sample: Passing helpers with a render() call

• 默认值：{}

data

不启用远程时，表示本地数据

• 默认值：[]

check

表格每行前的选择框

• 默认值： true

nest

表格嵌套时提供展开功能

• 默认值：true