本节介绍datagrid组件的参数及方法。

参数(options)

DOM方式初始化datagrid的,推荐使用集合属性data-options定义参数,如果使用data属性定义参数,注意转换成对应的名称,参见data属性一节。

名称 类型 默认值 描述
gridTitle string null [可选] 标题。
columns array null [可选] 表头模型,适用动态生成表头,如果未设置本参数,将自动转化静态表头为模型。点此查看columns对象的详细参数
data array null [可选] 提供datagrid需要的数据,如果同时设置有dataUrl参数,本参数优先级高。
dataUrl string null [可选] Ajax请求数据的URL。返回数据模板:
JSON:{total:50, pageCurrent:1, list:[{name:'孙悟空',sex:true}, {name:'美国队长', true}]}
Array:{total:50, pageCurrent:1, list:[['孙悟空',true], ['美国队长', true]]}
loadType string POST [可选] Ajax请求方式。
dataType string json [可选] 数据类型,可选参数['json' | 'array' | 'xml']。
hiddenFields array null [可选] 仅用于dataType='array'时隐藏字段,可以将不能加载到页面上的值设置到给定的字段,array数据除去表头的列后依次赋值。
local string remote [可选] 处理数据方式,可选参数['local' | 'remote'],(影响(分页、排序、筛选))。
fieldSortable boolean true [可选] 点击页头字段快速排序。普通表格转为datagrid的,需设置dataUrl参数,local = 'remote'
filterThead boolean true [可选] 允许表格头部快速筛选。普通表格转为datagrid的,需设置dataUrl参数,local = 'remote'
sortAll boolean false [可选] 排序范围,true = 所有数据排序, false = 当前页数据排序。普通表格转为datagrid的,默认为true
filterAll boolean false [可选] 筛选范围,true = 从所有数据中筛选,false = 从当前页数据中筛选。普通表格转为datagrid的,默认为true
filterMult boolean true [可选] 支持多字段筛选。
linenumberAll boolean false [可选] 行号范围,true = 为所有数据编号,false = 为当前页数据编号。
showLinenumber boolean/string true [可选] 是否显示行号,参数[true | false | 'lock'],lock参数 = 锁定行号列(适用于多列字段,出现横向滚动条的情况)。
showCheckboxcol boolean/string false [可选] 是否显示行复选框,参数同上。
showEditbtnscol boolean false [可选] 是否显示编辑按钮列。
showTfoot boolean false [可选] 是否显示页脚,适用于显示统计信息,需要字段相关参数支持。
showToolbar boolean false [可选] 是否显示工具条,需要设置参数toolbarItemtoolbarCustom
toolbarItem string null [可选] 显示工具条按钮,可选参数['all, add, edit, cancel, save, del, import, export, |'],“all” = 显示所有按钮,“|” = 按钮组分隔符。
toolbarCustom string/object/function null [可选] 自定义的html内容或jQuery DOM对象,支持带返回值函数。
columnResize boolean true [可选] 允许调整列宽。
columnMenu boolean true [可选] 表头字段列上显示菜单按钮。
columnShowhide boolean true [可选] 表头字段列菜单上出现 “显示/隐藏 列” 选项。
columnFilter boolean true [可选] 表头字段列菜单上出现 “过滤” 选项。
columnLock boolean true [可选] 表头字段列菜单上出现 “锁定列、解除锁定” 选项。
paging boolean/object true [可选] 是否显示分页组件,可设置分页参数。分页参数模板: {pageSize:30, selectPageSize:'30,60,90', pageCurrent:1, showPagenum:5, total:0}
如果local='remote',并通过dataUrl参数请求json数据时,返回的数据要提供total、pageCurrent参数,可提供pageSize参数
pagingAlign string center [可选] 分页组件对齐方式,参数['left' | 'center' | 'right']
editUrl string null [可选] 保存编辑、添加数据的url,Ajax请求方式为POST,服务器端接收的参数名称为"json",数据类型是JSON Array。
editCallback function(json) null [可选] 保存成功后的回调,返回的json内容可以是B-JUI默认的回调json或保存后的json数据,datagrid默认回调:如果返回保存后的json数据,将会更新对应的数据行
editMode string inline [可选] 编辑、添加数据的方式,参数[false | 'inline' | 'dialog']。false = 不能编辑,inline = 行内编辑,dialog = 弹窗编辑。
editDialogOp object null [可选] 弹窗编辑方式时,设置弹出窗口的参数,如{width:500, height:300, mask:false}
inlineEditMult boolean true [可选] 允许行内编辑模式下同时添加/编辑多行。
saveAll boolean true [可选] 适用于多行行内编辑时,一次性保存全部数据,发送到服务器端数据格式见参数editUrl
addLocation string first [可选] 添加新行数据于当前页的位置,参数['first' | 'last' | 'prev' | 'next'],参数prev和next参考当前选中行位置。
delUrl string null [可选] 删除数据的url,服务器端接收的数据见参数delPK
delType string POST [可选] Ajax删除数据的请求方式。
delPK string null [可选] 设置删除主键名,如果设置了主键,则只发送该字段的值(删除多条则主键值以逗号分隔)到服务器端,否则发送JSON数据(参数名"json",数据类型为JSON Array)。
delConfirm boolean/string null [可选] 删除前的确认提示,参数[true | false | '自定义提示信息'],参数为false时不弹出提示信息。
delCallback function(json) null [可选] 删除成功后的回调函数,返回的json内容为B-JUI默认的回调json。
jsonPrefix string null [可选] 发送到服务器端的json数据(name)加前缀,包括(保存、删除、筛选)操作。
contextMenuH boolean true [可选] 在表头上右键点击时出现 ”显示/隐藏列“ 的快捷菜单。
contextMenuB boolean false [可选] 在数据行右键点击时出现快捷菜单,菜单选项有(刷新、添加、编辑、取消、删除)。
hScrollbar boolean false [可选] 允许出现横向滚动条。
fullGrid boolean false [可选] 使表格铺满网格容器(如果值为true,则需要设置有列宽,并且总宽度小于datagrid容器宽度时有效)。
width int/percent null [可选] datagrid容器宽度,默认为父容器的宽,相当于'100%'。
height int/percent 300 [可选] datagrid容器高度。
importOption object null [可选] 工具栏的导入按钮参数,dialog或navtab方式打开导入页面,参数模板{type:"dialog", options:{url:'', width:400, height:200}}
exportOption object null [可选] 工具栏的导出按钮参数,执行ajax url或以dialog or navtab方式打开导出页面,参数模板{type:"ajax", options:{url:""}}
beforeEdit function null [可选] 带返回值方法,编辑数据前调用,返回true继续编辑,返回false取消编辑。
beforeDelete function null [可选] 带返回值方法,删除数据前调用,返回true继续删除,返回false取消删除。
afterSave function($trs, datas) null [可选] 保存成功后执行方法,参数$trs为保存行(jQuery 对象),datas为保存行对应数据(JSON Array)。
afterDelete function null [可选] 删除成功后执行方法。

方法

方法名 参数类型 参数说明 描述
showLinenumber(flag) boolean/string true | false, 'lock' | 'unlock' 行号列:显示、隐藏、锁定、解除锁定。
showCheckboxcol(flag) boolean/string true | false, 'lock' | 'unlock' 复选框列:显示、隐藏、锁定、解除锁定。
showEditCol(tabids) boolean true | false 编辑按钮列:显示、隐藏。
showhideColumn(column, showFlag) object/int, boolean column = 列索引或字段列的jQuery对象,showFlag = true/false 显示、隐藏某列。
selectedRows(rows, [selected]) int/string/object, [boolean] 单个数据行的索引、逗号分隔的行索引字符串、数据行的jQuery对象,[可选参数,选中|取消选中,默认选中] 选中/取消选中行。
add(addLocation) string 'first' | 'last' | 'prev' | 'next' 添加行,参数参考datagrid参数addLocation
doEditRow(row) object/int 数据行的jQuery对象或行索引。 编辑行。
doCancelEditRow(row) object/int 数据行的jQuery对象或行索引。 取消编辑行。
doSaveEditRow(row) object/int 数据行的jQuery对象或行索引。 保存编辑行。
delRows(rows) int/string/object 单个数据行的索引、逗号分隔的行索引字符串、数据行的jQuery对象 删除行。
saveAll() -- -- 保存所有编辑行。
refresh() -- -- 刷新,重新加载数据。
jumpPage(pageNum, [pageSize]) int, int 跳转页码(仅设置分页大小参数时,可设为null),[可选参数,页大小] 跳转到指定页码。
destroy() -- -- 销毁datagrid。

取得选中行

$('table - selector').data('selectedTrs')