L.FlexGrid是以datatables为原型，是一个高度灵活的工具，具有丰富多样的option、强大的API、对前后端分页和各种不同数据源的支持可以满足用户的各种需求。同时，在保留原有功能的基础上，为了减少用户的前端配置、与框架后端数据的适配，对其进行封装。
Dom属性：
| 名称 |
说明 |
| width |
必设项，设置列宽 |
| data-field |
必设项，列所对应的属性名，以在该列显示属性的值 |
| data-sortable |
可设项，设置本列是否起用排序功能 |
| data-render |
可设项，自定义渲染列。包括三种类型的值：“checkbox”、“radio”、“函数名” |
options:
名称|类型|默认值|功能
—|—|—|—|—
paging| boolean|true| 是否开启分页功能
ordering| boolean|true| 是否开启排序功能
order| array| []| 设置默认的排序列，可为多列，如：[[0, ‘asc’], [ 1, ‘asc’ ]]
serverSide| boolean| true| 是否开启服务器端模式
autoWidth| boolean| false| 是否开启列宽度自适应功能
info|boolean|true|是否显示左下角记录数信息
scrollX|boolean|false|是否显示水平滚动条
scrollY|string|“”|设置表格的高度，超过所设置高度则出现垂直滚动条
btnDefs| array或function（data）(data为每行的数据对象)| |自定义每行的操作按钮。array类型用于每行渲染的操作按钮一致的情况;function类型用于每行所需要渲染操作按钮不一致的情况。
drawCallback|function||表格重绘时调用
initComplete| function| |表格初始化完成后调用
rowCallback |function| |表格每行初始化时调用
createRow| function| | 表格行被创建时调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <!--表格结构的定义-->
<table id="userList" class="table table-bordered table-hover">
<thead>
<tr>
<th width="10%" data-field="userId" data-sortable= "false" data-render="rendercheckbox">
</th>
<th width="15%" data-field="userId" data-sortable="false">账号</th>
<th width="25%" data-field="userName">姓名</th>
<th width="25%" data-field="nickname">昵称</th>
<th width="25%" data-field="status" data-render="renderstatus">账号状态</th>
</tr>
</thead>
</table>
<!--自定义列-->
function rendercheckbox(data, type, full) {
return '<input type="checkbox" value="' + data + '" title="' + data + '" id="checkbox" name="checkboxlist"/>';
};
function renderoptions(data, type, full) {
var delBtn = "<a class=\"del\" >删除</a>";
var editBtn = "<a class=\"modify\">编辑</a>";
return delBtn + " " + editBtn;
}
function renderstatus(data,type,full){
if(data != "" || data != null)
{
if(data == "N"){
data = "启用";
}
if(data == "X"){
data = "停用";
}
}
return data;
}
2.定义表格对象并初始化表格，定义表格对象时需要传入表格的id及请求数据的url两个参数，代码如下：
var options = {
<!--所需的option-->
};
var url = context+"/service/framework/demo/user/data";
grid = new L.FlexGrid("userList",url);
grid.init(options); //初始化
|
效果展示：
打赏
