mmGrid 参数列表 操作示例&Bootstrap样式


一、介绍

这是一个基于jQuery的表格部件。它提供了几个基本的功能,可以用于面积有限却要显示较多数据的页面。 它的样式表很简单,修改起来非常容易,你可以很快的给它更换一个样式融入到你的页面中。 如果你喜欢简洁点的东西,不想在工程里加入太多依赖的文件,那你可以尝试一下它。顺便说一句,它也支持IE6这样的老古董。


二、基本示例

mmGrid支持两种数据加载方式:本地对象数据和远程AJAX数据。

例 1:使用本地对象加载数据

以客户端数据为数据源。参数items,类型可以是对象或数组。如果数据源为对象,则使用root选项标记对象内的数组字段为数据源。

例 2:使用AJAX加载数据

AJAX数据为数据源。参数url为请求地址,返回数据为json格式,可以是对象或数组。如果返回数据为对象,则使用root选项标记对象内的数组字段为数据源。


三、排序示例

排序参数为sortNamesortStatus。 如果初始化时设置排序列,则直接显示排序后数据。 排序方式分为客户端排序与AJAX服务器端排序,设置参数为remoteSort。 排序方式与数据源关系不大,但如果数据源为本地数据,设置remoteSorttrue无效。 如果排序字段为数字类型需要将列选项添加type:'number'属性。远程排序时,列模型可以设置sortName来指定远程排序的字段名称,如不设置则为name中的值。

例 1:客户端排序

例 2:AJAX远程排序

* 此示例无后端处理程序,请查看请求的url参数

四、列状态

例 1:锁定列宽

锁定列宽选项为lockWidth:true。列宽被锁定后则不可调整,当表选项fullWidthRows设为true列的宽度也不参与计算。

例 2:隐藏列

隐藏列选项为hidden: true。当光标移至标题时标题最右侧会显示向下按钮,单击此按钮则可打开选项板来调整隐藏和显示的列,调整完毕后单击选项板右下方向上按钮来关闭选项板。

例 3:锁定列显示状态

锁定列显示状态选项为lockDisplay: true。锁定列显示状态后,在选项板中列选项会被值为灰色,此列则不可调整显示状态。


五、内容折行

表选项nowrap设置单元格内容超出单元格长度时是否折行显示。

例 1:内容不折行

例 2:内容折行


六、自适应列宽

当表选项fullWidthRows设置为true时,表格在第一次数据加载时计算列宽,将其充满整个表格。锁定列宽的列不参与计算。如果所有显示的列宽总和大于表格宽度这个参数将不起作用。

例 1:自动调整列宽充满表格

例 2:默认列宽


七、选择行

表选项multiSelect设置表格是否可多选,默认为单选。可通过表操作$('#table').mmGrid('selected')获取选择的行对象。 当光标单击单元格时触发cellSelected事件,该事件可在表选项设置。

例 1:行多选

例 2:行单选


八、选框列

表选项checkCol可以在表格前插入选框列。checkCol选项可以和multiSelect搭配使用。

例 1:行多选

例 2:行单选


九、索引列

表选项indexCol可以在表格前插入索引列。如果索引数字过大超出单元格可使用indexColWidth调整宽度。

例 1:索引列

例 2:索引选框列同时显示


十、显示全部行

表选项height设置为'auto'时,表格显示全部行,并不显示垂直滚动条。


十一、分页

这里的分页示例借助了分页器,开发者可以根据自己的需求选择使用其他分页器。


十二、表头分组

列模型可嵌套一个cols选项用来将表头分组,目前只支持两层。


Fork me on GitHub