bsgrid插件参数说明

1, 皮肤样式

文件: builds/css/skins/grid_*.min.css, 源码: source/css/skins/grid_*.css

本地化脚本

文件: builds/js/lang/grid.*.min.js, 源码: source/js/lang/grid.*.js

2, 配置参数: $.fn.bsgrid.defaults 或 $.fn.bsgrid.init(gridId, settings) 第二个参数

dataType: 'json', 'jsonp', 'xml', 默认值'json'

dataTrim: true, false, 是否trim单元格值

ajaxType: 'post', 'get', 默认值 'post'

localData: json数据, xml数据, 默认值false

url: 分页请求URL

otherParames: 额外的参数, 可设值: false, 字符查询查询串, Object对象或jquery序列化数组, 默认值false

格式 一: 'param1=val1&m2=val2'

二: {'param1': 'val1', 'param2': 'val2'}

三: $('#searchForm').serializeArray()

autoLoad: 是否自动加载数据, 默认值true即初始化表格后自动加载localData或请求URL的数据

pageAll: 是否显示全部数据, 显示全部数据时只显示总数据行数不加载分页工具条, 默认值false

showPageToolbar: 是否显示分页工具条， 默认值true

pageSize: 分页大小, 如果设置值小于1则不分页且展示全部数据(即自动将pageAll设置为true), 默认值20

pageSizeSelect: 是否显示分页大小选择下拉框, 配合参数pageSizeForGrid, 默认值false

pageSizeForGrid: 分页大小选择下拉框显示的值数组

pageIncorrectTurnAlert: 翻页是是否显示无页可翻的提示(首页, 上一页, 下一页, 末页), 默认值true

multiSort: 是否支持多列排序, 默认值false

displayBlankRows: 是否显示空白行, 默认值true

lineWrap: 单元格值是否自动换行, 默认值false, 设置false对单元格起效果的样式是: grid.css -> .bsgrid td.lineNoWrap

设置true对单元格起效果的样式是: grid.css -> .bsgrid td.lineWrap

stripeRows: 隔行变色, 默认值false, 对应样式是: grid.css -> .bsgrid tr.even_index_row td

rowHoverColor: 划过行变色, 默认值false, 对应样式是: grid.css -> .bsgrid tr.row_hover td

rowSelectedColor: 是否显示选中行背景色, 默认值true, 对应样式是: grid.css -> .bsgrid tr.selected.selected_color td

pagingLittleToolbar: 是否显示精简的图标按钮分页工具条, 默认值false

pagingToolbarAlign: 分页工具条的显示位置, 默认值'right'居右, 其他值'left', 'center'

pagingBtnClass: 分页工具条按钮的样式, 默认值'pagingBtn', 样式在文件grid.paging.css中

displayPagingToolbarOnlyMultiPages: 仅当多页时才显示分页工具条, 默认值false

isProcessLockScreen: 数据请求加载过程中是否显示遮罩, 默认值true

longLengthAotoSubAndTip: 单元格需要被渲染内容超长时是否截断并tip显示完整内容, 默认值true

截断算法: content.substring(0, MaxLength-3) + '...'. 如果单元格自定义render方法则此配置无意义

截断及tip方法: $.fn.bsgrid.longLengthSubAndTip, 这是一个全局方法

beforeSend: Ajax请求提交前执行方法, 参数: options, XMLHttpRequest

complete: Ajax请求完成后执行方法, 参数: options, XMLHttpRequest, textStatus

processUserdata: 处理userdata的方法, 在表格渲染数据之前执行, 参数: userdata, options

extend.settings: supportGridEdit: 是否支持表格编辑, 默认值false

supportGridEditTriggerEvent: 触发表格编辑的事件: ''(直接显示编辑状态), 'rowClick', 'rowDoubleClick', 'cellClick', 'cellDoubleClick', 默认值'rowClick'

supportColumnMove: 是否支持拖动表头改变表头宽度, 默认值false

searchConditions: 构造下拉框查询表单存放的容器ID, 默认值''

fixedGridHeader: 是否固定表格表头并滚动表体数据, 默认值false

fixedGridHeight: 固定表格的高度, 默认值'320px'

扩展方法, 此系列各方法在additional系列同义方法前执行, 内置扩展写在grid.extend.js文件中:

extend.initGridMethods: 初始化表格完成后额外执行的方法

extend.beforeRenderGridMethods: 在渲染表格数据前执行的方法

extend.renderPerColumnMethods: 渲染单元格数据执行方法, 不论此单元格是否为空单元格(即无数据渲染)

extend.renderPerRowMethods: 渲染行数据执行方法, 不论此行是否为空行(即无数据渲染), 在渲染单元格数据方法执行后执行

extend.afterRenderGridMethods: 在渲染表格数据后执行的方法

additional render methods:

additionalBeforeRenderGrid: 在渲染表格数据前执行的方法

additionalRenderPerColumn: 渲染单元格数据执行方法, 不论此单元格是否为空单元格(即无数据渲染)

additionalRenderPerRow: 渲染行数据执行方法, 不论此行是否为空行(即无数据渲染), 在渲染单元格数据方法执行后执行

additionalAfterRenderGrid: 在渲染表格数据后执行的方法

3, 列/表头属性

w_index: 列index, 对应加载数据的列key, 区分大小写

w_sort: 类似值"id", "id,desc", "id,asc", 其中"id"是列index

w_align: 表格单元格数据的对齐方式, 非表头

w_length: 单元格需要被渲染内容超过此长度则截断并tip显示完整内容,

截断算法: content.substring(0, MaxLength-3) + '...'

如果单元格自定义render方法则此配置无意义

w_render: 自定义列单元格渲染方法名, 插件使用eval(funName)执行此方法, 具有的四个参数是record, rowIndex, colIndex, options

注意如果列有w_render属性设置w_index则无意义. 列可以无w_index或w_render属性

w_hidden: 设置为"true"则隐藏此列

w_tip: 设置为"true"则同时tip单元格内容, 而不论其长度是否超过w_length设置的长度

tip方法: $.fn.bsgrid.columnTip, 这是一个全局方法

列/表头扩展属性

w_num: 行号, 值为line, total_line, 分别表示当前页的数据行号, 所有记录的数据行号

w_check: 设置为true时为列渲染checkbox以选中行

w_edit: 单元格编辑, 值: text, hidden, password, radio, button, checkbox, textarea

表底扩展属性

w_agg: 聚合, 值: count, countNotNone, sum, avg, max, min, concat, custom

4, 获取分页相关、 行记录值、 单元格值以及userdata值的方法, 在表格数据渲染后使用

gridObj.getPageSize(): 获取分页大小

gridObj.getTotalRows(): 获取总行数

gridObj.getTotalPages(): 获取总页数

gridObj.getCurPage(): 获取当前页码

gridObj.getCurPageRowsNum(): 获取当前页记录条数

gridObj.getStartRow(): 获取当前页记录起始行数, 从1开始

gridObj.getEndRow(): 获取当前页技术行数

gridObj.getSortName(): 获取排序属性name

gridObj.getSortOrder(): 获取排序方向

gridObj.getAllRecords(): 获取所有记录值

gridObj.getRecord(rowIndex): 根据行索引获取行记录值, 行索引从0开始

gridObj.getRowRecord(rowObj): 根据行dom对象获取行记录值

gridObj.getRecordIndexValue(record, index): 获取单元格值, 根据行记录值及列index

gridObj.getColumnValue(rowIndex, index): 获取单元格值, 根据行索引值及列index

gridObj.getCellRecordValue(rowIndex, colIndex): 获取单元格值, 根据行索引值及列索引

gridObj.getRows(): 获取所有行dom对象

gridObj.getRow(rowIndex): 获取行dom对象, 根据行index

gridObj.getRowCells(rowIndex): 获取行单元格dom对象, 根据行索引值

gridObj.getColCells(colIndex): 获取列单元格dom对象, 根据列索引值

gridObj.getCell(rowIndex, colIndex): 获取单元格dom对象, 根据行及列索引值

gridObj.getUserdata(): 获取userdata值

5, select以及check选中行相关方法, 在表格数据渲染后使用

gridObj.selectRow(rowIndex): 根据行索引选中行, 行索引从0开始

gridObj.unSelectRow(): 反选行

gridObj.getSelectedRow(): 获取选中行dom对象

gridObj.getSelectedRowIndex(): 获取选中行的索引值, 行索引从0开始, 如果没有选择则返回-1

gridObj.getCheckedRowsIndexs(): 获取checked行的索引值, 行索引从0开始

gridObj.getCheckedRowsRecords(): 获取checked行的记录值

gridObj.getCheckedValues(index): 获取checked行的index值

6, 表格的其他方法

gridObj.getPageCondition(curPage): 获取当前页请求条件

gridObj.refreshPage(): 刷新

gridObj.firstPage(): 首页

gridObj.prevPage(): 上一页

gridObj.nextPage(): 下一页

gridObj.lastPage(): 末页

gridObj.gotoPage(pageNo): 转到指定页

gridObj.page(curPage): 此方法不严谨, 使用gridObj.gotoPage(pageNo)代替

gridObj.sort(thObj): 列排序, 参数是表头dom对象

gridObj.getGridHeaderObject(): 获取表头dom对象, 注意获取的是表头的最后一行(最后一行是对于多行表头而言)th的dom对象

gridObj.getColumnModel(colIndex): 获取列model值, 参数是列索引

gridObj.clearGridBodyData(): 清空表格数据

gridObj.setGridBlankBody(): 设置表格空白表体

gridObj.appendHeaderSort(): append表头的排序

gridObj.createPagingOutTab(): 创建存放分页工具条的表格

gridObj.initPaging(): 初始化分页工具条

gridObj.setPagingValues(): 设置分页工具条的相关值, 注意这是一个接口, 实现方法由分页工具条自身或适配方法实现

7, 表格的其他有用方法

$.fn.bsgrid.getGridObj(gridId): 根据表格ID获取表格对象

$.fn.bsgrid.columnTip(tdObj, value, record): tip单元格值

$.fn.bsgrid.longLengthSubAndTip(tdObj, value, maxLen, record): 单元格需要被渲染内容超过此长度则截断并tip显示完整内容,

截断算法: content.substring(0, MaxLength-3) + '...'

8, 表格编辑方法

gridObj.activeGridEditMode: 激活可被编辑的表格单元格

gridObj.getChangedRowsIndexs: 获取changed行的索引值, 行索引从0开始

gridObj.getChangedRowsOldRecords: 获取changed行的旧记录值

gridObj.getRowsChangedColumnsValue: 获取changed单元格的值, 返回Object对象, 其key是'row_'+rowIndex, 值也是Object对象

9, 锁屏遮罩: 全局方法

$.fn.bsgrid.lockScreen: 加载锁屏遮罩

$.fn.bsgrid.unlockScreen: 解除锁屏遮罩

10, 分页工具条

如何重新构建分页工具条

$.fn.bsgrid.createPagingOutTab(options): grid.js

$.fn.bsgrid.createPagingToolbar(options): grid.paging.js

$.fn.bsgrid.setPagingToolbarEvents(options): grid.paging.js

$.fn.bsgrid.dynamicChangePagingButtonStyle(options): grid.paging.js

11, 列/表头部分配置参数

$.fn.bsgrid.defaults.colsProperties, 参数如下:

表格表体数据列配置: align(默认值'center'), maxLength(默认值40)

配置参数: indexAttr, sortAttr, alignAttr, lengthAttr, renderAttr, hiddenAttr, tipAttr

扩展配置参数: editAttr

12, 请求参数名

使用如下方法修改默认配置: $.fn.bsgrid.defaults.requestParamsName.X = '', X可以是pageSize, curPage, sortName, sortOrder