参考：http://miniui.com/docs/api/index.html#ui=datagrid

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

<div id="datagrid1" class="mini-datagrid"
    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

Properties

Name Type Description Default Set? Get? Tag?
data Array 数据对象   √ √ √
columns Array 列集合对象   √ √ √
url String 数据加载地址   √ √ √
ajaxType String ajax类型：get/post。   √ √ √
ajaxOptions Object ajax配置对象。如：ajaxOptions="{type:'post', async: true, data: {a:1, b: true}, dataType: 'text', contentType: 'application/x-www-form-urlencoded;charset=utf-8'}"。   √ √ √
idField String 行数据唯一字段。   √ √ √
virtualScroll Boolean 是否虚拟滚动。当显示的数据超过500以上时，请设置此属性，能极大提升性能。 false √ √ √
virtualColumns Boolean 是否虚拟滚动列，在列较多时有用，提高性能。 false √ √ √
pageIndex Number 页码 0 √ √ √
pageSize Number 每页多少条 10 √ √ √
sizeList Array 页尺寸集合，比如[5,10,100] [5,10,20,50,100] √ √ √
sortField String 排序字段   √ √ √
sortOrder asc,desc 排序方向   √ √ √
sortMode client 排序模式。设置为"client"后则时客户端排序   √ √ √
totalCount Number 总记录数   √ √ √
defaultColumnWidth Number 默认列宽 100 √ √ √
showColumns Boolean 显示表头 true √ √ √
showPager Boolean 显示分页 true √ √ √
showHGridLines Boolean 显示横向表格线条 true √ √ √
showVGridLines Boolean 显示竖向表格线条 true √ √ √
showFilterRow Boolean 显示过滤行 false √ √ √
showSummaryRow Boolean 显示汇总行 false √ √ √
showGroupSummary Boolean 是否显示分组汇总 false √ √ √
summaryPosition String 分组汇总位置。top|bottom。 bottom √ √ √
allowEmptyContextMenu Boolean 是否右键点击空白处也显示右键菜单 false √ √ √
showCellTip Boolean 允许单元格提示框（当宽度变小有省略号时） true √ √ √
allowCellWrap Boolean 允许单元格换行 false √ √ √
allowHeaderWrap Boolean 允许表头文本换行 false √ √ √
allowSortColumn Boolean 允许列排序 true √ √ √
allowMoveColumn Boolean 允许移动列 true √ √ √
allowResizeColumn Boolean 允许拖拽调节列宽度 true √ √ √
enableHotTrack Boolean 移动到行时高亮显示 true √ √ √
allowCellSelect Boolean 允许选择单元格 false √ √ √
allowCellEdit Boolean 允许单元格编辑。此模式下，行编辑API将失效。 false √ √ √
editNextOnEnterKey Boolean 按回车键进入下一个单元格编辑。 false √ √ √
editNextRowCell Boolean 按回车键进入下一行同列的单元格编辑。 false √ √ √
cellEditAction String 激发单元格编辑的事件，默认是cellclick，也可以配置成celldblclick。 cellclick √ √ √
allowCellValid Boolean 是否自动验证，当编辑单元格时。 false √ √ √
allowRowSelect Boolean 允许选择行 true √ √ √
onlyCheckSelection Boolean 是否只通过checkcolumn列选择 false √ √ √
multiSelect Boolean 允许多选行 false √ √ √
allowUnselect Boolean 允许反选。设置true后，点击任意单元格都会选中行，以及取消选中行。 false √ √ √
allowAlternating Boolean 显示斑马纹 false √ √ √
frozenStartColumn Number 锁定开始列 -1 √ √ √
frozenEndColumn Number 锁定截至列 -1 √ √ √
showPageIndex Boolean 显示页码 true √ √ √
showPageSize Boolean 显示页尺寸 true √ √ √
showLoading Boolean 显示Loading遮罩效果 true √ √ √
allowResize Boolean 允许拖拽调节表格尺寸 false √ √ √
selectOnLoad Boolean 加载完是否自动选中 false √ √ √
collapseGroupOnLoad Boolean 加载完是否折叠分组 false √ √ √
showEmptyText Boolean 数据为空时显示提示文本 false √ √ √
emptyText String 数据为空时的提示文本   √ √ √
alwaysShowEmptyText Boolean 是否总是显示空文本 false √ √ √
pageIndexField String 分页索引字段名 "pageIndex" √ √ √
pageSizeField String 分页条数字段名 "pageSize" √ √ √
sortFieldField String 排序字段的字段名 "sortField" √ √ √
sortOrderField String 排序方向字段名 "sortOrder" √ √ √
totalField String 总记录数字段名 "total" √ √ √
dataField String 数据字段名 "data" √ √ √
showPageInfo Boolean 显示分页文本信息 true √ √ √
showReloadButton Boolean 显示"刷新"分页按钮 true √ √ √
autoHideRowDetail Boolean 展开详细行时，自动隐藏其他详细行 true √ √ √
showModified Boolean 是否显示修改的红色小三角 true √ √ √
showColumnsMenu Boolean 显示列菜单。实现显示、隐藏列。 false √ √ √
showPagerButtonText Boolean 显示分页按钮文本 false √ √ √
showPagerButtonIcon Boolean 显示分页按钮图标 true √ √ √
sizeText String 分页控件分页文字。 "" √ √ √
pageSizeWidth Number 分页控件pageSize选择框的宽度。   √ √ √
enableGroupOrder Boolean 分组时是否应用排序。 true √ √ √
skipReadOnlyCell Boolean tab导航编辑时非编辑直接跳过。 false √ √ √
showSortIcon Boolean 显示可派序列的提示图标。 false √ √ √
sortDblClick Boolean 双击表头列排序。 false √ √ √
selectOnRightClick Boolean 是否允许右键点击选择。 true √ √ √
navEditMode Boolean 导航编辑模式。true时，按tab/enter键在导航切换时进入单元格编辑。 false √ √ √
autoLoad Boolean 是否自动加载数据。 false √ √ √

Methods

Name Parameter Description Return
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 ( )   重新加载数据。  
getLoadParams ( )   获取查询参数对象。 Object。
gotoPage ( index, size )   跳转页码。  
sortBy ( sortField, sortOrder )   排序字段  
clearSort ( )   取消排序。  
groupBy ( field, dir )   分组。比如：grid.groupBy("city", "desc")  
getResultObject ( )   获取加载的服务端数据对象。一般在onload事件中调用。 Object
loading ( )   显示加载遮罩。  
unmask ( )   取消遮罩。  
frozenColumns ( start, end )   锁定列。比如：grid.frozenColumns(0, 2)  
unFrozenColumns ( )   取消锁定列。  
clearGroup ( )   取消分组。  
collapseGroups ( )   折叠所有分组。  
expandGroups ( )   展开所有分组。  
mergeCells ( cells )   合并单元格。比如：

var cells = [

    { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 },

    { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3 }

];

grid.mergeCells(cells);
 
mergeColumns ( columns )   自动合并相同值单元格。比如：

grid.mergeColumns(["company"]);//company是某列的name
 
setCurrentCell ( cell ) cell: [row, column] 设置当前选中单元格。  
getCurrentCell ( )   获取当前选中单元格。  
isChanged ( )   是否已修改。 Boolean
getChanges ( state, onlyField ) state: added|modified|removed。如传递null，则获取增删改数据。
onlyField：Boolean。传递true，modified的行数据将只返回修改的字段。		 获取增加、删除、修改后的数据集合。row._state为added/modified/removed。  
beginEditCell ( )   对当前选中单元格启动编辑。  
cancelEdit ( )   取消所有行编辑。  
commitEditRow ( row )   提交指定行编辑。  
commitEdit ( )   提交所有行编辑。  
beginEditRow ( row )   启动行编辑。  
cancelEditRow ( row )   取消指定行编辑。  
isEditing ( )   是否有行编辑。 Boolean
isEditingRow ( row )   指定行是否处于编辑状态。 Boolean
getCellEditor ( column, row )   获取指定列和行的编辑器控件对象。 Control
getEditorOwnerRow ( editor )   获取编辑器属于哪一行对象  
updateRow ( row, rowData )   更新行（JavaScript）  
removeRow ( row, autoSelect )   删除行（JavaScript）。autoSelect为true，则删除记录后，自动选择下一条记录。  
removeRows ( rows, autoSelect )   删除多行（JavaScript）。autoSelect为true，则删除记录后，自动选择下一条记录。  
addRows ( rows, index )   增加多行（Javascript）  
addRow ( row, index )   增加行（Javascript）  
moveRow ( row, index )   移动行（Javascript）  
moveUp ( Array )   上移  
moveDown ( Array )   下移  
clearRows ( )   清除所有行（Javascript）  
accept ( )   清除所有行修改痕迹。  
acceptRecord ( row )   清除指定行修改痕迹。  
reject ( )   取消还原数据修改。  
rejectRecord ( row )   取消还原指定行修改。  
indexOf ( row )   获取行索引号  
isSelected ( row )   是否选中行  
getSelecteds ( )   获取所有选中的行  
getSelected ( )   获取当前选中行  
setSelected ( row )   设置当前选中行  
select ( row, fireEvent ) fireEvent: Boolean。是否激发选择事件。 选中行  
deselect ( row, fireEvent ) fireEvent: Boolean。是否激发选择事件。 取消选中行  
selectAll ( fireEvent ) fireEvent: Boolean。是否激发选择事件。 选中所有行  
deselectAll ( fireEvent ) fireEvent: Boolean。是否激发选择事件。 取消选中所有行  
clearSelect ( fireEvent ) fireEvent: Boolean。是否激发选择事件。 取消选中所有行  
selects ( rows, fireEvent ) fireEvent: Boolean。是否激发选择事件。 选中多行  
deselects ( rows, fireEvent ) fireEvent: Boolean。是否激发选择事件。 取消选中多行  
showAllRowDetail ( )   显示所有行详细  
hideAllRowDetail ( )   隐藏所有行详细  
showRowDetail ( row )   显示行详细  
hideRowDetail ( row )   隐藏行详细  
isShowRowDetail ( row )   是否显示了行详细  
getRowDetailCellEl ( row )   获取行详细DOM对象  
hideColumn ( column )   隐藏列  
showColumn ( column )   显示列  
setColumnWidth ( column, Number )   设置列宽  
updateColumn ( column, Object )   更新列内容。例如：grid.updateColumn("name", {header: "姓名"});  
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 )   获取列对象  
getRowEl ( row, viewIndex )   获取行DOM对象。viewIndex=1获取锁定行，viewIndex=2获取内容行。  
getCellEl ( row, column )   获取单元格DOM对象  
getHeaderCellEl (column )   获取表头单元格DOM对象  
addRowCls ( row, cls )   增加行样式  
removeRowCls ( row, cls )   删除行样式  
getFilterCellEl ( column )   获取过滤行单元格DOM对象  
getSummaryCellEl ( column )   获取汇总行单元格DOM对象  
validate ( )   验证表格所有单元格  
isValid ( )   是否验证通过 Boolean
scrollIntoView ( row )   定位滚动条到行  
getBottomPager ( )   获取分页控件  
getColumnByEvent ( event )   根据事件对象获取列  
getRowByEvent ( event )   根据事件对象获取行  
getCellByEvent ( event )   根据事件对象获取单元格。cell = [record, column ]  
getBottomColumns ( )   获取底部显示的列数组  
getColumns ( )   获取列集合  
getRowByUid ( uid )   根据uid获取行对象  

Events

Name EventObject Description
columnschanged   列改变时激发。如列显示/隐藏、列宽调整、列增加/删除等情况。
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 //列对象

}
单元格鼠标按下时发生
headercellclick 
{

    sender: Object, //表格对象

    column: Object //列对象

}
表头单元格点击时发生
headercellmousedown 
{

    sender: Object, //表格对象

    column: Object //列对象

}
表头单元格鼠标按下时发生
headercellcontextmenu 
{

    sender: Object, //表格对象

    column: Object //列对象

}
表头单元格点击右键时发生
beforeload 
{

    sender: Object, //表格对象

    data: Object    //参数对象

    cancel: Boolean

}
数据加载前发生
preload   数据加载，设置到Grid前发生
loaderror 
{

    sender: Object, //表格对象

    xhr: Object, //ajax对象

    errorMsg: String //错误信息

    errorCode: int  //错误码

}
数据加载错误时发生
load 
{

    sender: Object, //表格对象

    xhr: Object,    //ajax对象

    data: Array     //数据

}
数据加载成功时发生
update   表格渲染完毕事件
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

}
编辑开始前发生
cellcommitedit 
{

    sender: Object,

    rowIndex: Number,

    record: Object,

    column: Object,

    field: String,

    editor: Object,

    oldValue: Object,

    value: Object,

    cancel: false

}
编辑值提交前发生
cellendedit 
{

    sender: Object,

    rowIndex: Number,

    record: Object,

    column: Object,

    field: String,

    editor: Object,

    value: String

}
编辑结束时发生
celleditenter 
{

    sender: Object,

    record: Object

}
编辑器按回车时发生
selectionchanged   行选择改变时发生
beforeselect 
{

    sender: Object,

    record: Object,

    cancel: Boolean

}
行选中前发生
beforedeselect 
{

    sender: Object,

    record: Object,

    cancel: Boolean

}
行取消选中前发生
select 
{

    sender: Object,

    record: Object

}
行选中时发生
deselect 
{

    sender: Object,

    record: Object

}
行取消选中时发生
cellvalidation 
{

    sender: Object,

    record: Object,

    column: Object,

    field: String,

    value: String,

    isValid: Boolean,  //是否验证通过

    errorText: ""   //错误提示文本

}
单元格验证时发生（一般在单元格编辑结束时）
drawsummarycell 
{

    sender: Object,

    result: Object,     //服务端返回的原始数据对象

    records: Array,     //行数组

    column: Object,

    field: String,

    value: String,

    cellHtml: "",

    cellCls: "",

    cellStyle: ""

}
绘制汇总单元格事件
resize   表格拖拽调节尺寸时发生

Columns

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

Name Type Description Default
type indexcolumn|checkcolumn|checkboxcolumn|comboboxcolumn|treeselectcolumn 列类型。创建几个特殊的列。  
header String 表头列文本  
field String 单元格值字段  
displayField String 单元格文本字段  
sortField String 排序字段  
name String 列标识名称  
width Number 列宽度  
visible Boolean 是否显示  
hideable Boolean 是否在表头菜单项显示 false
readOnly Boolean 是否只读 false
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
autoShowPopup Boolean 编辑时是否自动显示下拉框。 false
dataType string|int|float|date|boolean|currency 数据类型，为客户端排序所用。 string
currencyUnit String 货币单位。当dataType="currency"有用。如：￥432,432.00。  
dateFormat String 日期格式化。如：yyyy-MM-dd HH:mm:ss。  
numberFormat String 数字格式化。如：

  • 小数点和千分位：format="n"
  • 货币格式：format="c"。
  • 百分比格式：format="p"。
  • 自定义格式：format="¥#,0.00"。
  
vtype String 验证规则，如required,email,url等。具体参考这里。 false
summaryType count|min|max|sum|avg 汇总计算类型。  
summaryRenderer Function 汇总单元格渲染函数。  
autoEscape false 是否自动转义Html。  
decimalPlaces Number 保留的小数位数，默认2位。  

Mini学习之mini.DataGrid使用说明的更多相关文章

  1. ROS机器人程序设计（原书第2版）学习镜像分享及使用说明

    ROS机器人程序设计(原书第2版)学习镜像分享及使用说明 系统用于ROS爱好者学习交流,也可用于其他用途,并不局限于ROS. 这款镜像文件是基于一年前的Ubuntu ROS Arduino Gazeb ...

  2. mini.DataGrid使用说明

    mini.DataGrid表格.实现分页加载.自定义列.单元格渲染.行编辑器.锁定列.过滤行.汇总行等功能.Extend    mini.PanelUsage <div id="dat ...

  3. UMeditor 百度编辑器Mini学习

    准备开始研究百度的mini编辑器 1.4.3的昨天配置好了 ,也可以用了(.net 3.5) 为此我废了好大的力 研究了一天才弄好   结果今天一来上司就说 这个1.4.3 我们没必要用这么大的  用 ...

  4. JAVAEE——BOS物流项目04：学习计划、datagrid、分页查询、批量删除、修改功能

    1 学习计划 1.datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建data ...

  5. easyUI框架之学习3--表格datagrid

    @model MVCEasyUI.Models.Sale.PageResult<MVCEasyUI.Models.Sale.Order> @{ ViewBag.Title = " ...

  6. DevExtreme学习笔记(一) DataGrid中数据筛选

    config.filterRow = { visible: true, applyFilter: "auto" }; config.headerFilter = { visible ...

  7. DevExtreme学习笔记(一) DataGrid中MVC分析

    @(Html.DevExtreme().DataGrid() .ID("gridContainer") .DataSource(d => d .OData() .Url(&q ...

  8. NUC972学习历程之NUWRITER使用说明以及烧录模式的说明

    3.1 簡介Nu-Writer 工具能幫助使用者透過 USB ISP模式, 將Image檔案放入儲存體中, 例如:SPI Flash設備或 NAND Flash設備.3.2 驅動程式安裝Nu-Writ ...

  9. DevExtreme学习笔记(一) DataGrid中数据提交注意事项

    1.数据提交的{}数据需转化json格式 syncPost('/controller/action', { values: JSON.stringify({d:x}) }, function (res ...

随机推荐

  1. c# IComparable与IComparer接口

  2. 不错的DSP和FPGA作者

    https://blog.csdn.net/wordwarwordwar/article/details/90233903

  3. [openssl][nginx] 使用openssl模拟ssl/tls客户端测试nginx stream

    一 server的配置 nginx # cat conf/nginx.conf daemon off; events { debug_connection ; } stream { upstream ...

  4. Flink原理（四）——任务及调度

    本文是博主阅读官网文档.博客及书籍后自己所思所得,若是存在有误的地方,欢迎留言分享,谢谢! 一.任务调度 Flink是通过task slot的来定义执行资源的,为优化资源的利用率,Flink通过slo ...

  5. python 单元测试（unittest）

    自动化测试在各大互联网公司全面铺开,那么针对于自动化测试好的设计思想有哪些呢?.....今天我们共同探讨下Unittest之数据驱动(DDT是 “Data-Driven Tests”的缩写). 对于接 ...

  6. 51nod 2494 最长配对

    小b有一个01序列,她想找到一个最长的区间使得这个区间的01能两两配对,即0的个数和1的个数相等.求最长区间的长度. 收起   输入 第一行一个正整数n,表示数组长度,其中0<n≤50000: ...

  7. python算法与数据结构-冒泡排序算法(32)

    一.冒泡排序介绍 冒泡排序(英语:Bubble Sort)是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.遍历数列的工作是重复地进行直到没有再需要 ...

  8. 配置数据源和配置jpa的yml文件

    spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver username: root password: root url: j ...

  9. js判断日期格式（YYYYMM）

    function datepanduan(obj){ var date = document.getElementById(obj.id).value; var reg = /^\b[1-3]\d{3 ...

  10. 浏览器兼容问题--get/post

    问题描述: 人员通过发送位置在百度地图上显示出来.删除人员后,chrome地图上该人员也随即消失,但IE浏览器上仍旧存在.清除缓存后,才消失. 原因: IE下面同一个地址,不会多次去请求的.只有加一个 ...