一、介绍
这是一个基于jQuery的表格部件。它提供了几个基本的功能,可以用于面积有限却要显示较多数据的页面。 它的样式表很简单,修改起来非常容易,你可以很快的给它更换一个样式融入到你的页面中。 如果你喜欢简洁点的东西,不想在工程里加入太多依赖的文件,那你可以尝试一下它。顺便说一句,它也支持IE6这样的老古董。
二、基本示例
mmGrid支持两种数据加载方式:本地对象数据和远程AJAX数据。
例 1:使用本地对象加载数据
以客户端数据为数据源。参数items,类型可以是对象或数组。如果数据源为对象,则使用root选项标记对象内的数组字段为数据源。
例 2:使用AJAX加载数据
AJAX数据为数据源。参数url为请求地址,返回数据为json格式,可以是对象或数组。如果返回数据为对象,则使用root选项标记对象内的数组字段为数据源。
三、排序示例
排序参数为sortName和sortStatus。 如果初始化时设置排序列,则直接显示排序后数据。 排序方式分为客户端排序与AJAX服务器端排序,设置参数为remoteSort。 排序方式与数据源关系不大,但如果数据源为本地数据,设置remoteSort为true无效。 如果排序字段为数字类型需要将列选项添加type:'number'属性。远程排序时,列模型可以设置sortName来指定远程排序的字段名称,如不设置则为name中的值。
例 1:客户端排序
例 2:AJAX远程排序
四、列状态
例 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选项用来将表头分组,目前只支持两层。