jQuery插件Flexigrid高级扩展版

在网站开发过程中，数据的查看、编辑、删除是其中必不可少的一项功能。以前最常用的方法就是在模板中直接将数据循环出来并显示，这样写有一个好处就是自由度比较高，想要什么样的格式和样式均可以做出来，但这样写也有一个弊端就是代码多、不规范、维护麻烦。我以前就是采用这样一种方式，自从我遇到Flexigrid后，前面说的弊端基本上都迎刃而解了。那何为Flexigrid？它又有哪些高级功能？

Flexigrid简介

Flexigrid是一个基于jQuery的数据展示插件，由国外牛人Paulo P. Marinas开发，其具有强大的功能和小巧的体积。并且有着和EXTJS中表格一样的外观。

Flexigrid主要特性

以下是原版的主要特性

Resizable columns（可重设大小的列）
Resizable height and width（可重设高度和宽度）
Sortable column headers（改变列的顺序）
Cool theme（超酷的风格）
Can convert an ordinary table（可以转化一个普通的表格）
Ability to connect to an ajax data source (XML and JSON)（支持使用AJAX连接XML或JSON数据源）
Paging（分页）
Show/hide columns（显示隐藏列）
Toolbar (new) （工具栏）
Search (new)（搜索）
Accessible API（易于使用的API）
Many more（更多）

以下是此次发布修改版的高级特性

1.首列添加Checkbox复选框支持
2.自定义行事件
3.拖动选择行功能
4.排序功能
5.列宽使用百分比
6.布局加载完成后事件
7.多条件搜索
8.支持导出CSV数据
9.字段别名支持

FLexigrid数据源

原版的Flexigrid就支持JSON和XML数据源，同时支持从普通的表格读取数据，此次的修改版本主要是完善了JSON和XML的扩展功能。因为Flexigrid使用JSON或XML获取数据，因为对服务器端使用何种开发语言并无要求，只要按照要求提供标准的数据源即可。

以下是JSON的标准数据源格式

{
    "page": 1,//当前分页
    "total": 100,//记录总条数
    "rows": [//记录列表
        {
            "id": 1,//主键
            "cell": { //记录详细数据
                "id": 1,
                "name": "名称",
                "title": "标题",
                "weigh": 1,
                "state": 0
            }
        },{...},{...}
    ]
}

以下是XML的标准数据源格式

<rows>
  <page>1</page>
  <total>100</total>
  <row id="1">
    <id><![CDATA[1]]></id>
    <title><![CDATA[标题]]></title>
    <name><![CDATA[名称]]></name>
    <weigh><![CDATA[1]]></weigh>
    <state><![CDATA[0]]></state>
  </row>
  <row id="2">
      ...
  </row>
</rows>

Flexigrid使用方法

最简单的一种方法就是直接将表格转换为Flexigrid，无需任何参数

$("#flexigrid1").flexigrid();

高级使用方法则需要指定字段名、指定搜索条件等其它配置

$("#flexigridfull").flexigrid({
  url: 'data.php?format=json',
  colModel: [
      {display: 'ID', name: 'id', width: '40', iskey: true},
      {display: '标题', name: 'title', width: '50%', process: formatSearch},
      {display: '名称', name: 'name', width: '80', process: formatSearch, defaultvalue: '默认名称'},
      {display: '排序', name: 'weigh', width: '80'},
      {display: '状态', name: 'state', width: '80', process: formatState},
      {display: '管理', name: 'id', width: '150', sortable: false, process: formatOp}
  ],
  buttons: [
      {name: 'add', displayname: "添加", title: "添加", bclass: 'add', onpress: multi},
      {name: 'edit', displayname: "编辑", title: "编辑", bclass: 'edit', onpress: multi},
      {name: 'delete', displayname: "删除", title: "删除", bclass: 'delete', onpress: multi},
      {name: 'accept', displayname: "正常", title: "正常", bclass: 'accept', onpress: multi},
      {name: 'reject', displayname: "隐藏", title: "隐藏", bclass: 'reject', onpress: multi},
      {separator: true},
      {name: 'export', displayname: "导出", title: "删除", bclass: 'export', onpress: multi}
  ],
  sortname: "weigh",
  sortorder: "desc",
  usepager: true,
  useRp: true,
  dataType: 'json',
  showcheckbox: true,
  rowhandler: clickhandler,
  onSuccess: flexigridsuccess,
  title: '这是标题',
  rp: 25,
  height: "auto",
  width: "auto"
});

Flexigrid参数具体介绍

所有参数

p = $.extend({
  id: '', //最外围的div的ID值
  idProperty: 'id', //主键名称
  height: 'auto', //flexigrid插件的高度，单位为px
  width: 'auto', //宽度值 auto表示根据每列的宽度自动计算
  striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
  novstripe: false, //是否隐藏列之间的竖线
  minwidth: 30, //列的最小宽度
  minheight: 80, //列的最小高度
  resizable: false, //是否可伸缩
  url: false, //Ajax方式对应的url地址
  method: 'POST', //数据发送方式 GET/POST
  dataType: 'json', //数据加载的类型 xml/json
  usepager: false, //是否分页
  nowrap: true, //是否不换行
  page: 1, //默认当前页
  total: 1, //总页面数
  useRp: false, //use the results per page select box,是否可以动态设置每页显示的结果数
  rp: 25, // 每页默认的结果数
  rpOptions: [10, 15, 20, 25, 50, 100], //可选择设定的每页结果数
  title: false, //是否包含标题
  searchitems: true, //默认从colModel中取出所有的字段名称,可手动组成数组
  sortname: '', //排序字段名
  sortorder: '', //排序方式
  errormsg: '发生错误', //错误提升信息
  pagetext: '当前',
  pagestat: '显示记录从{from}到{to}，总数 {total} 条', //显示当前页和总页面的样式
  outof: '总页数',
  findtext: '快速检索',
  procmsg: '正在处理数据，请稍候 ...', //正在处理的提示信息
  nomsg: '没有符合条件的记录存在', //无结果的提示信息
  removefilter: '点击移除筛选', //移除筛选提示
  btnsubmit: '提交', //提交按钮
  btnappend: '追加', //追加按钮
  btnclear: '清空', //清空按钮
  query: '', //搜索查询的条件
  qtype: '', //搜索查询的类别
  qop: "=", //搜索的操作符
  minColToggle: 1, //隐藏列时最小保留的列数量
  showToggleBtn: true, //是否显示主体显示/隐藏切换按钮
  hideOnSubmit: true, //显示遮盖
  showTableToggleBtn: false, //显示隐藏Grid 
  autoload: true, //自动加载
  blockOpacity: 0.5, //透明度设置
  onToggleCol: false, //当在行之间转换时
  onChangeSort: false, //当改变排序时
  onSuccess: false, //成功后执行
  onError: false, //发生错误时执行
  onSubmit: false, // 当提交数据时执行
  onLayerInit: false, // 当Flexigrid的布局加载完成以后调用
  showcheckbox: true, //是否显示checkbox    
  singleselected: false, //是否单选
  rowhandler: false, //是否启用行的扩展事情功能
  selectedonclick: true, //点击行是否选中
  onrowchecked: false, //当行被选中时触发的事件，这里指checkbox选中
  showrownum: false, //是否显示行号，只有在checkbox不显示的情况下有用即showcheckbox:false
  extParam: [], //扩展参数[{name:'name',value:'value'}]
  gridClass: "flexigrid", //默认的Class
}, p);

colModel介绍

colModel是由一个数组构成，它完整的构建了整个Flexigrid的列头数据

[
  {display: 'ID', name: 'id', width: '40', iskey: true},
  {display: '标题', name: 'title', width: '50%', process: formatSearch},
  {display: '名称', name: 'name', width: '80', process: formatSearch, defaultvalue: '默认名称'},
  {display: '管理', name: 'id', width: '150', sortable: false, process: formatOp}
]
//display: 最终显示在列头的文字
//iskey: 是否为主键
//name: 字段的名称,如果需要联表查询数据时可用到a.id或b.id，当同一表内有多个相同的字段时,alias的值为自动按顺序递增
//alias: 字段的别名,如存在a.id,b.id,如果未指定alias的值,则alias的值分别为id和id1
//width: 列宽,可使用百分比或具体数值,百分比时会自动运算
//process: 用于处理该列数据的函数,传入的参数分别为:行值,主键,行数据,列字段名
//sortable:true/false 是否可以进行排序操作
//hide:true/hide 是否显示隐藏列
//align:left/right/center 对齐方式,默认为左对齐
//defaultvalue: 默认值,用于搜索时的默认值

buttons介绍

buttons是由一个数组构成，它完整的构建了整个Flexigrid的工具栏

[
  {name: 'add', displayname: "添加", title: "添加", bclass: 'add', onpress: multi},
  {name: 'edit', displayname: "编辑", title: "编辑", bclass: 'edit', onpress: multi},
  {name: 'delete', displayname: "删除", title: "删除", bclass: 'delete', onpress: multi},
  {separator: true},
  {name: 'export', displayname: "导出", title: "删除", bclass: 'export', onpress: multi}
]
//name: 部件名称
//displayname: 部件最终显示出来的文字
//title: 当鼠标移上去显示出来的文字
//bclass: 部件的class值
//onpress: 当鼠标按下后产生的事件
//separator: true/false 分隔符

searchitems介绍

searchitems是由一个数组构成，它完整的构建了整个Flexigrid的搜索栏中的可选搜索列数据

searchitems如果为true时则从colModel中自动匹配列字段,如果为false则不显示搜索栏

[
  {display: '名称', name : 'name', isdefault: true},
  {display: '标题', name : 'title', 'defaultvalue': '默认值'}
]
//display: 显示在列中的文字
//name: 字段的名称
//isdefault: true/false 是否为默认选项
//defaultvalue: 默认值，同colModel中的defaultvalue

从这里出发

V2st's List