FlexiGrid 使用 全选、自动绑定

1、介绍

　　　　Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。

2、相关参数

　　　　

height: 200, //flexigrid插件的高度，单位为px
width: 'auto', //宽度值，auto表示根据每列的宽度自动计算，在IE6下建议设置具体值否则会有问题
striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
novstripe: false,//没用过这个属性
minwidth: 30, //列的最小宽度
minheight: 80, //列的最小高度
resizable: false, //resizable table是否可伸缩
url: false, //ajax url,ajax方式对应的url地址
method: 'POST', // data sending method,数据发送方式
dataType: 'json', // type of data loaded,数据加载的类型，xml,json
errormsg: '发生错误', //错误提升信息
usepager: false, //是否分页
nowrap: true, //是否不换行
page: 1, //current page,默认当前页
total: 1, //total pages,总页面数
useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数
rp: 25, // results per page,每页默认的结果数
rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数
title: false, //是否包含标题
pagestat: '显示记录从{from}到{to}，总数 {total} 条', //显示当前页和总页面的样式
procmsg: '正在处理数据，请稍候 ...', //正在处理的提示信息
query: '', //搜索查询的条件
qtype: '', //搜索查询的类别
qop: "Eq", //搜索的操作符
nomsg: '没有符合条件的记录存在', //无结果的提示信息
minColToggle: 1, //允许显示的最小列数
showToggleBtn: true, //是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错。
hideOnSubmit: true, //是否在回调时显示遮盖
showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮 
autoload: true, //自动加载，即第一次发起ajax请求
blockOpacity: 0.5, //透明度设置
onToggleCol: false, //当在行之间转换时，可在此方法中重写默认实现，基本无用
onChangeSort: false, //当改变排序时，可在此方法中重写默认实现，自行实现客户端排序
onSuccess: false, //成功后执行
onSubmit: false, // 调用自定义的计算函数，基本没用        

3、插件源码

　　http://files.cnblogs.com/files/youngerliu/Flexigrid.rar，这个版本做了点小改动，增加了checkbox的支持，全选，反选轻松搞定。

　　主要增加了flexigrid.js的930-936行

1  //add by 
2                     if (cm.thtype) {
3                         if (cm.thtype == "checkbox") {
4                             checkboxIndex = i;
5                             $(th).html("<input type=\"checkbox\" class='checkAll' name='checkAll' />").find(":checkbox").live("click", function () {
6                                 $("#" + t.id + " tr  td:nth-child(" + (checkboxIndex + 1) + ") :checkbox ").attr("checked", $(this).is(":checked"));
7                             });
8                         }
9                     }

View Code

  使用方式如下：

{
            display: '全选',
            name: 'opnion_id',
            width: 50,
            align: 'center',
            thtype: "checkbox",
            process: function (celDiv, id) {
                $(celDiv).html("<input type=\"checkbox\" value=\"" + id + "\"/>").click(function () {
                    var index = $(this).closest("td").index() + 1;
                    var checked = ($("#flexme4 tr  td:nth-child(" + index + ") :checkbox:checked ").size() === $("#flexme4 tr  td:nth-child(" + index + ") :checkbox ").size());
                    $(".checkAll").attr("checked", checked);
                });
            }
        }

1 //获取所选记录
2 function getAllChecked() {
3 var index = $(".checkAll:eq(1)").closest("th").index() + 1;
4 var arr = [];
5 $("#flexme4 tr td:nth-child(" + index + ") :checkbox:checked ").each(function (a, n) {
6 arr.push($(n).val());
7 })
8 return arr;
9 }

View Code

 

4、自动绑定列

　　　　这里根据插件绑定的数据模型，创建了实体：

 1   public class FlexiGridModel<T>
 2     {
 3         private int _page = 1;
 4 
 5         public int page
 6         {
 7             get { return _page; }
 8             set { _page = value; }
 9         }
10 
11         public int total { get; set; }
12         public List<Rows<T>> rows { get; set; }
13     }
14     public class Rows<T>
15     {
16         public string id { get; set; }
17         public T cell { get; set; }
18     }

　　数据绑定

 1  FlexiGridModel<AdminOpnionList> pageData = new FlexiGridModel<AdminOpnionList>();
 2             pageData.total = data.total;
 3             pageData.page = page;
 4             pageData.rows = new List<Rows<AdminOpnionList>>();
 5             if (data.opnion_list != null)
 6                 foreach (AdminOpnionList item in data.opnion_list)
 7                 {
 8                     Rows<AdminOpnionList> rows = new Rows<AdminOpnionList>();
 9                     rows.id = item.opnion_id.HasValue ? item.opnion_id.Value.ToString() : "";
10                     rows.cell = item;
11                     pageData.rows.Add(rows);
12                 }
13 
14             ReturnJsonMsg<AdminOpnionList>(pageData);
15 
16 
17  public void ReturnJsonMsg<T>(FlexiGridModel<T> data)
18         {
19             Response.Clear();
20             if (data == null)
21                 Response.Write("{\"page\": 1,\"total\": 0,\"rows\": []}");
22 
23             else
24                 Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(data));
25             Response.Flush();
26             Response.End();
27             Response.Close();
28             return;
29         }

View Code