mini.DataGrid

表格。实现分页加载、自定义列、单元格渲染、行编辑器、锁定列、过滤行、汇总行等功能。

Extend

mini.Control

Usage

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;" 
    url="../data/AjaxService.aspx?method=SearchEmployees" 
>
    <div property="columns">
        <div type="indexcolumn"></div>                
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
        <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>    
        <div header="工作信息">
            <div property="columns">
                <div field="dept_name" width="120">所属部门</div>
                <div field="position_name" width="100">职位</div>
                <div field="salary" width="100" allowSort="true">薪资</div>
            </div>
        </div>
    </div>
</div>

Screenshots

Examples

Base Example Pagination Filter Row FixedColumns Data Summary
CRUD： Row Edit EditForm Popup EditForm
Master-Detail： Detail Form Detail Grid Detail Tabs Inline Form Inline Grid Inline Tabs Popup Form

Properties

NameTypeDescriptionDefault Set? Get? Tag?
data Array 数据对象 √√√
columns Array 列集合对象 √√√
url String 数据加载地址 √√√
idField String 行数据唯一字段。 √√√
pageIndex Number 页码 0 √√√
pageSize Number 每页多少条 10 √√√
sizeList Array 页尺寸集合，比如[5,10,100] [5,10,20,50,100] √√√
sortField String 排序字段 √√√
sortOrder asc,desc 排序方向 √√√
columnWidth Number 默认列宽 120 √√√
showHeader Boolean 显示表头 true √√√
showFooter Boolean 显示底部 true √√√
showHGridLines Boolean 显示横向表格线条 true √√√
showVGridLines Boolean 显示竖向表格线条 true √√√
showFilterRow Boolean 显示过滤行 false √√√
showSummaryRow Boolean 显示汇总行 false √√√
allowSortColumn Boolean 允许列排序 true √√√
allowMoveColumn Boolean 允许移动列 true √√√
allowResizeColumn Boolean 允许拖拽调节列宽度 true √√√
enableHotTrack Boolean 移动到行时高亮显示 true √√√
allowSelect Boolean 允许选择行 true √√√
multiSelect Boolean 允许多选行 false √√√
allowAlternating Boolean 显示斑马纹 false √√√
frozenStartColumn Number 锁定开始列 -1 √√√
frozenEndColumn Number 锁定截至列 -1 √√√

Methods

NameParameterDescriptionReturn
load ( params, success, fail ) params：Object。参数对象。
success：Function。成功回调函数。
fail：Function。失败回调函数。 		加载数据。
比如，grid.load({key: "普加"})。
后台接收如下信息： 
{
    key: "普加",  //自定义
    pageIndex: 0,
    pageSize: 10,
    sortField: "",
    sortOrder: "asc"
}
使用：String key = request.
reload ( ) 重新加载数据。
gotoPage ( index, size ) 跳转页码。
sortBy ( sortField, sortOrder ) 排序字段
clearSort ( ) 取消排序。
groupBy ( field, dir ) 分组。比如：grid.groupBy("city", "desc")
clearGroup ( ) 取消分组。
margeCells ( cells ) 合并单元格。比如： 
var cells = [
    { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 },
    { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3 }
];
grid.margeCells(marges);
beginEditRow ( row ) 启动行编辑。
getEditData ( ) 获取编辑中的行数据。 Array
getEditRowData ( row ) 获取编辑中的指定行数据。 Array
cancelEditRow ( row ) 取消指定行编辑。
cancelEdit ( ) 取消所有行编辑。
commitEditRow ( row ) 提交指定行编辑。
commitEdit ( ) 提交所有行编辑。
isEditing ( ) 是否有行编辑。 Boolean
getCellEditor ( column, row ) 获取指定列和行的编辑器控件对象。 Control
getEditorOwnerRow ( editor ) 获取编辑器属于哪一行对象
updateRow ( row, rowData ) 更新行（JavaScript）
removeRow ( row, autoSelect ) 删除行（JavaScript）。autoSelect为true，则删除记录后，自动选择下一条记录。
removeRows ( rows, autoSelect ) 删除多行（JavaScript）。autoSelect为true，则删除记录后，自动选择下一条记录。
addRow ( row, index ) 增加行（Javascript）
moveRow ( row, index ) 移动行（Javascript）
clearRows ( ) 清除所有行（Javascript）
indexOf ( row ) 获取行索引号
isSelected ( row ) 是否选中行
getSelecteds ( ) 获取所有选中的行
getSelected ( ) 获取当前选中行
setSelected ( row ) 设置当前选中行
select ( row ) 选中行
deselect ( editor ) 取消选中行
selectAll ( ) 选中所有行
deselectAll ( ) 取消选中所有行
clearSelect ( ) 取消选中所有行
selects ( rows ) 选中多行
deselects ( rows ) 取消选中多行
showRowDetail ( row ) 显示行详细
hideRowDetail ( row ) 隐藏行详细
getRowDetailCellEl ( row ) 获取行详细DOM对象
hideColumn ( column ) 隐藏列
showColumn ( column ) 显示列
setColumnWidth ( column, Number ) 设置列宽
getRow ( index ) 获取行对象
findRow ( Function ) 通过查询函数获取行对象。如： 
var row = grid.findRow(function(row){
    if(row.name == "张三") return true;
});
Object
findRows ( Function ) 通过查询函数获取行对象数组。如： 
var rows = grid.findRows(function(row){
    if(row.age > 20) return true;
});
Array
getColumn ( index/columnName ) 获取列对象
getFilterCellEl ( column ) 获取过滤行单元格DOM对象
getSummaryCellEl ( column ) 获取汇总行单元格DOM对象

Events

NameEventObjectDescription
rowclick 
{
    sender: Object, //表格对象
    record: Object //行对象
}
行点击时发生
rowdblclick 
{
    sender: Object, //表格对象
    record: Object //行对象
}
行双击时发生
rowmousedown 
{
    sender: Object, //表格对象
    record: Object //行对象
}
行鼠标按下时发生
cellclick 
{
    sender: Object, //表格对象
    record: Object, //行对象
    column: Object //列对象
}
单元格点击时发生
cellmousedown 
{
    sender: Object, //表格对象
    record: Object, //行对象
    column: Object //列对象
}
单元格鼠标按下时发生
beforeload 数据加载前发生
preload 数据加载，设置到Grid前发生
loaderror 数据加载错误时发生
load 数据加载成功时发生
drawcell 
{
    sender: Object,
    rowIndex: Number,
    columnIndex: Number,
    record: Object,    
    column: Object,
    field: String,
    value: String,
    cellHtml: "",
    rowCls: "",
    cellCls: "",
    rowStyle: "",
    cellStyle: ""
}
绘制单元格时发生
cellbeginedit 
{
    sender: Object,
    rowIndex: Number,    
    record: Object,
    column: Object,
    field: String,
    editor: Object,
    value: String,
    cancel: false
}
单元格编辑器显示前发生
selectionchanged 行选择改变时发生

Columns

表格列配置集合：columns，是一个数组，如：[column, column, ...]。其中一个column的配置参数如下表：

NameTypeDescriptionDefault
header String 表头列文本
field String 单元格值字段
name String 列标识名称
width Number 列宽度
headerAlign String 表头列文本位置。left/center/right。 left
align String 单元格文本位置。left/center/right。 left
headerCls String 表头列样式类。
cellCls String 单元格样式类
headerStyle String 表头列样式
cellStyle String 单元格样式
editor Object 单元格编辑器。
renderer Function 单元格绘制处理函数，同drawcell事件。
allowMove Boolean 是否可移动表头列。 true
allowResize Boolean 是否拖拽调节表头列宽度。 true