flexigrid插件扩展支持webService取数方式

来源：互联网发布：c语言实现八皇后问题编辑：程序博客网时间：2024/06/07 05:25

在网上看到许多flexigrid的例子，大多数是php模式的，在。net下通过webservice方式的始终没有找到有效的支持。今天自己扩展了一下，还是直接贴代码吧

扩展的资源可在这里下载：http://download.csdn.net/source/1606334

效果图

<html>

首先在aspx页面中创建如上的table标签，用于表格的呈现

$("#tb").flexigrid({
        dataType: 'json',
        colModel : [
            {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
            {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
            {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
            {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left'},
            {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
        ],
        buttons : [
            {separator: true}
        ],
        searchitems : [
            {display: 'ISO', name : 'iso'},
            {display: 'Name', name : 'name', isdefault: true}
        ],
        sortname: "iso",
        sortorder: "asc",
        usepager: true,
        title: 'Countries',
        useRp: true,
        rp: 5,
        showTableToggleBtn: true,
        width: 700,
        height: 200,
        webPath :'GridTest.asmx',
        webMethod:'TestJQuery',
        webParams :{}
    });

js代码和以前的用法和官网提供的基本一致，重点是最后3个配置参数：

webPath :'GridTest.asmx' 设置webservice的路径，与aspx页面引用的路径一致

webMethod:'TestJQuery' 设置webservice的方法名

webParams：{} 设置方法所需要的参数，这里注意，可以设置为空，不过在webservice的方法中必须要接收一个param的参数这个是在插件里面默认需要的，这点请特别注意，以json格式传参，如：{A:a,B:b},其中A，B表示方法的参数名，a，b则表示实际传入的值，

（param是一个包含name和value的对象数组，具体形式如下：

         param = [
         { name : 'page', value : p.newp }
        ,{ name : 'rp', value : p.rp }
        ,{ name : 'sortname', value : p.sortname}
        ,{ name : 'sortorder', value : p.sortorder }
        ,{ name : 'query', value : p.query}
        ,{ name : 'qtype', value : p.qtype}
       ];

）

最后就是webservice方法的处理：

    [WebMethod]
    public JQ TestJQuery(dic[] param)
    {
        int page = int.Parse(param[0].value);                      //表示要显示的第几页数据
        int rp = int.Parse(param[1].value);                          //表示每页显示的数据行数
        string sortName = int.Parse(param[2].value);           //需要排序的名称
        sortorder rp = int.Parse(param[3].value);                //排序方式asc/desc
        string query = int.Parse(param[4].value);                //查询值
        string qtype = int.Parse(param[5].value);                //按哪个列的值进行查询

        JQ jq = new JQ();
        List<Rows> r = new List<Rows>();

        //具体的数据逻辑需要根据各自需求实现
        for (int i = 0; i < 20; i++)
        {
            Rows row = new Rows();
            row.id = "id" + i;
            row.cell = new string[] { "a" + i, "b" + i, "c" + i, "d" + i, "e" + i };
            r.Add(row);
        }
        List<Rows> ro = new List<Rows>();
        int start = (page - 1) * rp;
        int end = start + rp;
        for (int j = start; j < r.Count; j++)
        {
            if (j < end)
            {
                ro.Add(r[j]);
            }
        }
        jq.total = r.Count;
        jq.page = page;
        jq.rows = ro.ToArray();
        return jq;
    }

其中用到的代理类如下：

public class dic
{
    string _name;
    string _value;
    public string name
    {
        get { return _name; }        set { _name = value; }
    }
    public string value
    {
        get { return _value; }        set { _value = value; }
    }
}

public class JQ
{
    private int _total;
    private int _page;
    private Rows[] _rows;

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

    public Rows[] rows
    {
        get { return _rows; }        set { _rows = value; }
    }
}

public class Rows
{
private string _id;
private string[] _cell;

    public string id
    {
        get { return _id; }        set { _id = value; }
    }

    public string[] cell
    {
        get { return _cell; }        set { _cell = value; }
    }
}

收工