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、插件源码

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

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

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

  使用方式如下：

{
            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);
                });
            }
        }

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

 

4、自动绑定列

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

  public class FlexiGridModel<T>
    {
        private int _page = 1;

        public int page
        {
            get { return _page; }
            set { _page = value; }
        }

        public int total { get; set; }
        public List<Rows<T>> rows { get; set; }
    }
    public class Rows<T>
    {
        public string id { get; set; }
        public T cell { get; set; }
    }

　　数据绑定

 FlexiGridModel<AdminOpnionList> pageData = new FlexiGridModel<AdminOpnionList>();
            pageData.total = data.total;
            pageData.page = page;
            pageData.rows = new List<Rows<AdminOpnionList>>();
            if (data.opnion_list != null)
                foreach (AdminOpnionList item in data.opnion_list)
                {
                    Rows<AdminOpnionList> rows = new Rows<AdminOpnionList>();
                    rows.id = item.opnion_id.HasValue ? item.opnion_id.Value.ToString() : "";
                    rows.cell = item;
                    pageData.rows.Add(rows);
                }

            ReturnJsonMsg<AdminOpnionList>(pageData);


 public void ReturnJsonMsg<T>(FlexiGridModel<T> data)
        {
            Response.Clear();
            if (data == null)
                Response.Write("{\"page\": 1,\"total\": 0,\"rows\": []}");

            else
                Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(data));
            Response.Flush();
            Response.End();
            Response.Close();
            return;
        }