3.1FlexGrid

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| | 表格行被创建时调用

<!--表格结构的定义-->
<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 + "&nbsp;&nbsp;&nbsp;" + 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); //初始化

效果展示：

打赏