数据表格API (DataGrid.js)

数据表格是一个必不可少的元素，在选择这个选型的时候尝试了很多开源组件，最终选择jqGrid，只是因为它接近经典思维，用着还算顺手，最主要的是遇见什么问题都可以自行解决和修复问题，有人说jqGrid不好看，这没关系这完全而已自行编写CSS改造它。
支持：分页，排序，多表头，分组，子表，冻结，小计，合计，编辑行，树表表格等；

下面看看一个简单的例子：
```html
<% layout(... libs: ['dataGrid'] ...}){ %>
<#form:form id="searchForm" model="${config}" action="${ctx}/sys/config/listData" method="post" class="form-inline "
		data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
	参数名称：<#form:input path="configName" maxlength="100" class="form-control" />
	参数键名：<#form:input path="configKey_like" maxlength="100" class="form-control" />
	<button type="submit" class="btn btn-primary btn-sm">查询</button>
	<button type="reset" class="btn btn-default btn-sm">重置</button>
</#form:form>
<table id="dataGrid"></table>
<div id="dataGridPage"></div>
```
JS：
```javascript
// 初始化DataGrid对象
$('#dataGrid').dataGrid({
    // 查询数据表单
    searchForm: $('#searchForm'),
	// 设置数据表格列
	columnModel: [ 
		{header:'参数名称', name:'configName', index:'a.config_name', width:200, formatter: function(val, obj, row, act){
			return '<a href="${ctx}/sys/config/form?id='+row.id+'" class="btnList" data-title="编辑参数">'+val+'</a>';
		}},
		{header:'参数键名', name:'configKey', index:'a.config_key', width:200},
		{header:'参数键值', name:'configValue', sortable:false, width:260, classes:"nowrap"},
		{header:'操作', name:'actions', width:100, sortable:false, title:false, formatter: function(val, obj, row, act){
			var actions = [];
			<% if(hasPermi('sys:config:edit')){ %>
				actions.push('<a href="${ctx}/sys/config/form?id='+row.id+'" class="btnList" title="编辑参数"><i class="fa fa-pencil"></i></a>&nbsp;');
			<% } %>
			<% if(hasPermi('sys:config:delete')){ %>
				actions.push('<a href="${ctx}/sys/config/delete?id='+row.id+'" class="btnList" title="删除参数" data-confirm="确认要删除该参数吗？"><i class="fa fa-trash-o"></i></a>&nbsp;');
			<% } %>
			return actions.join('');
		}}
	],
	// 加载成功后执行事件
	ajaxSuccess: function(data){
		
	}
});
```
是不是比你使用foreach方便的多，封装后名字叫dataGrid，这只是展示了冰山一角，它支持所有jqGrid参数，即简化了代码编写，又不失功能

组件选项：
```
options = $.extend({
    // 数据表格参数
    url: searchForm.attr('action'),
    postData: searchForm.serializeArray(),
    mtype: "POST", datatype: "json",
    editurl: 'clientArray', // 单行编辑的时候使用本地数组形式
    rowNum: -1, 		// 显示行数，-1为显示全部
    rownumWidth: 30,	// 序号列宽
//	multiboxonly: true,	// 单击复选框时再多选
    altRows: true, 		// 斑马线样式，交替行altclass
    
    // 设置自定义列模型参数（columnModel包含colNames和colModel官方自带属性）
    columnModel: [], colNames: [], colModel: [],

// 设置数据表格扩展参数
    dataId: 'id', 		// 指定数据主键，当主键名称不是id的时候设置
    lazyLoad: false, 	// 是否懒加载Grid数据，默认初始列表后不及时加载数据，（仅对url远程请求数据有效），当调用 dataGrid.refresh()时再进行加载。
    shrinkToFit: true, 	// 是否按百分比自动调整列宽，当列比较多时可设置为false
    
    showRownum: true,	// 是否显示行号
    showCheckbox: false,// 是否显示复选框
    sortableColumn: true,// 列表是否允许排序（设置为false后，整个列表不允许排序）
    
    // 表格大小设置参数，autoGridHeight 和 autoGridWidth 可以是个函数，函数的返回值就是该表格的高度或宽度。
    autoGridHeight: true, // 自动表格高度（设置为false后，不自动调整表格高度），为函数时返回'100%',则自动高度。
    autoGridHeightFix: 0, // 自动表格高度宽度（自动调整高度时修正的高度值）
    autoGridWidth: true,  // 自动表格宽度（设置为false后，不自动调整表格宽度）
    autoGridWidthFix: 0,  // 自动表格修复宽度（自动调整宽度时修正的宽度值）
    
    // 窗体按钮绑定（不使用默认按钮或按钮ID不同时设置）
    btnSearch: $("#btnSearch"), 					// 查询按钮
    btnRefreshTree: $("#btnRefreshTree"), 			// 刷新树按钮
    btnExpandTreeNode: $("#btnExpandTreeNode"), 	// 展开树节点按钮
    btnCollapseTreeNode: $("#btnCollapseTreeNode"), // 折叠树节点按钮
    
    // 编辑表格参数
    editGrid: false,					// 是否是编辑表格
    editGridInitRowNum: 1,				// 编辑表格的初始化新增行数
    editGridInitAllRowEdit: true,		// 是否初始化就编辑所有行
    editGridAddRowBtn: $("#"+dataGridId+"AddRowBtn"),	// 子表增行按钮
    editGridAddRowInitData: {},			// 新增行的时候初始化的数据（支持函数或对象）
    
    // 编辑表格的提交数据参数
    editGridInputForm: dataGrid.parents('form'), // 提交表单的ID（当前grid所在表单）
    editGridInputFormListName: '', // 提交的数据列表名，例如：testDataChildList
    editGridInputFormListAttrs: '', // 提交数据列表的属性字段，例如：id,status,name,remarks
    
    // 树结构表格参数
    treeGrid: false,							// 启用树结构表格
    treeGridModel: 'adjacency',					// 启用简单结构模式
    treeColumn: null,							// 需要展开的列（默认第一列）
    ExpandColClick: true,						// 隐含参数，请不要设置，单击列可展开
    ExpandColumn: options.treeColumn,			// 隐含参数，请不要设置，需要展开的列
    defaultExpandLevel: 0,						// 默认展开的层次
    initExpandLevel: options.defaultExpandLevel,// 保存初始化是设置的展开层次
    expandNodeClearPostData: false, // 展开节点清理请求参数数据，设置为true请求地址只包含parentCode参数，设置为字符串参考（dictList.jsp）只清理指定的参数
    
    // 展开和折叠事件
//	onExpandNode: function(data){
//	},
//	onCollapseNode: function(data){
//	},
    
    // 分页相关字段（设置分页参数input对象）
    inputPageNo: $("#pageNo", searchForm),		// 当前页码字段
    inputPageSize: $("#pageSize", searchForm),	// 页面大小字段
    inputOrderBy: $("#orderBy", searchForm),	// 排序字段

// 设置多级表头
//	groupHeaders: {
//	 	twoLevel:[
//	 		{startColumnName: 'postCode', numberOfColumns: 2, titleText: '二级表头'},
//	 		{startColumnName: 'remarks', numberOfColumns:2, titleText:'二级表头2'}
//	 	],
//	 	threeLevel:[
//	 		{startColumnName: 'postCode', numberOfColumns:4, titleText:'三级表头'}
//	 	]
//	},
//	frozenCols: true, 	// 冻结列，在colModel指定frozen: true
//	showFooter: true,	// 是否显示底部合计行

// 行选择和双击事件
//	onSelectRow: function(id, isSelect, event) {
//	},
//	ondblClickRow: function(id, rownum, colnum, event){
//	},

ajaxLoad: function(data){ // 数据加载前执行方法
        
    },
    ajaxSuccess: function(data){ // 数据加载成功后执行方法
        
    },
    ajaxError: function(data){ // 数据加载失败后执行方法
        
    },
    complete: function(){ // 表格初始化完成后执行
        
    }
}, options);
```
组件方法：
```
return {
    
    /**
     * 直接调用jqGrid对象方法
     */
    jqGrid: function(option, value, v2, v3, v4, v5){
        return dataGrid.jqGrid(option, value, v2, v3, v4, v5);
    },
    
    /**
     * 设置参数
     */
    setParam: function(params, overwrite){
        return setParam(params, overwrite);
    },
    
    /**
     * 获取参数
     */
    getParam: function(paramName){
        return getParam(paramName);
    },
    
    /**
     * 获取所有数据ID
     */
    getDataIDs: function(){
        return getDataIDs();
    },
    
    /**
     * 获取行数据
     */
    getRowData: function(rowId){
        return getRowData(rowId);
    },
    
    /**
     * 获取选择行ID
     */
    getSelectRow: function(){
        return getSelectRow();  
    },
    
    /**
     * 获取选择行数组ID
     */
    getSelectRows: function(){
        return getSelectRows();  
    },
    
    /**
     * 设置选择行
     */
    setSelectRow: function(id, isCancel){
        return setSelectRow(id, isCancel);
    },
    
    /**
     * 刷新表格（带分页）
     */
    refresh: function(pageNo, pageSize){
        return refresh(pageNo, pageSize);
    },
    
    /**
     * 只刷新表格
     */
    reloadGrid: function(){
        return reloadGrid();
    },
    
    /**
     * 删除当前行
     */
    delRowData: function(id){
        return delRowData(id);
    },
    
    /**
     * 删除树节点
     */
    delTreeNode: function(id){
        return delTreeNode(id);
    },
    
    /**
     * 展开树节点
     * @param level 一次展开的层次
     */
    expandTreeNode: function(level){
        return expandTreeNode(level);
    },

/**
     * 折叠树节点
     */
    collapseTreeNode: function(){
        collapseTreeNode();
    },
    
    /**
     * 刷新树表格
     */
    refreshTree: function(expandLevel, parentCode){
        return refreshTree(expandLevel, parentCode);
    },
    
    /**
     * 刷新树的子节点
     * @param rowid 行号
     * @param currentRowid 当前节点id，然后再重新加载新的父节点
     */
    refreshTreeChildren: function(rowid, currentRowid){
        return refreshTreeChildren(rowid, currentRowid);
    },
    
    /**
     * 合并单元格
     * @param cellNames：需要合并的列名，多个用逗号分隔，如：'company.companyNameSimple,office.officeName'
     */
    mergeCell: function(cellNames) {
        return mergeCell(cellNames);
    },
    
    /**
     * 提交前更新列表字段名字，以方便后台接受（多行编辑）
     * @param fieldNames：多个用逗号分隔，如：'id,name,remarks'
     */
    updateListFieldName: function(listName, fieldNames){
        updateListFieldName(listName, fieldNames);
    }
    
};
```

方法调用示例：
```
var rowId = $('#dataGrid').dataGrid('getSelectRow'); // 获取选择行
var rowData = $('#dataGrid').dataGrid('getRowData', rowId); // 获取行数据
```

删除按钮弹出自定义回调举例：
```
actions.push('<a href="${ctx}/sys/config/delete?id='+row.id+'" class="btnList" title="删除参数" data-confirm="确认要删除该参数吗？" data-confirmSuccess="alert('我是回调')"><i class="fa fa-trash-o"></i></a>&nbsp;');
```