在网上看到许多flexigrid的例子,大多数是php模式的,在。net下通过webservice方式的始终没有找到有效的支持。今天自己扩展了一下,还是直接贴代码吧
扩展的资源可在这里下载:http://download.csdn.net/source/1606334
<html>
<table id="tb" style="display: none;"></table>
首先在aspx页面中创建如上的table标签,用于表格的呈现
<JavaScript>
$("#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方法的处理:
<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; }
}
}
收工