近一段时间extjs真的是风光无限好，只要是个做crm/hrm之类的企业现在都在琢磨怎么在项目中用它，不过兄弟我可是不敢，原因很简单：太大/太笨/源码不好调试。但是对于extjs漂亮的表格与功能的强大，实在是让我垂涎三尺，记得以前有个老外同志写过一个类似的extjs的jquery插件，所以就在jquery的插件海洋中一顿海找，呵呵，还真让我找到了。看来还是我的jquery好，小巧简单好像一部好的汽车引擎，我想要什么就可以自已diy，真是方便。总体方案在网络传输上不超过80kb，速度比500kb大小的extjs不知道要小上多少哪。。。
下载地址：http://code.google.com/p/flexigrid/
不过由于flexigrid在互联网上的大部分资料都是用php或者java写的，所以兄弟简单的对它进行了改制，也做了一个山寨版的extjs表格实现，希望对大家有帮助。
基本使用：
1 基本使用是非常简单的，只需要加入jquery库与flexigrid的js即可以对表格进行格式化与美化.
复制代码 代码如下:
--%>
2 加入需要格式化的表格即可
复制代码 代码如下:
最简单的flexigrid表格-1
col 1
col 2
col 3 is a long header name
col 4
this is data 1 with overflowing content
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
最简单的flexigrid表格-2
col 1
col 2
col 3 is a long header name
col 4
this is data 1 with overflowing content
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
this is data 1
this is data 2
this is data 3
this is data 4
为了增加flexigrid的基本使用效果，我们可以通过参数对其进行基本的调整
自定义表头
具体代码实现：
复制代码 代码如下:
自定义折叠，自定义排序的实现
复制代码 代码如下:
高级使用：
1 分页用到的存储过程
复制代码 代码如下:
create procedure [dbo].[spall_returnrows]
(
@sql nvarchar(4000),
@page int,
@recsperpage int,
@id varchar(255),
@sort varchar(255)
)
as
declare @str nvarchar(4000)
set @str='select top '+
cast(@recsperpage as varchar(20))+
' * from ('+@sql+') t where t.'+
@id+
' not in (select top '+
cast((@recsperpage*(@page-1)) as varchar(20))+
' '+
@id+
' from ('
+@sql+
') t9 order by '+
@sort+
') order by '+
@sort
print @str
exec sp_executesql @str
2 异步json数据传输实现
复制代码 代码如下:
using system;
using system.collections.generic;
using system.configuration;
using system.data;
using system.data.sqlclient;
using system.linq;
using system.text;
using system.web;
using system.web.services;
using newtonsoft.json;
namespace griddemo
{
///
/// $codebehindclassname$ 的摘要说明
///
[webservice(namespace = http://tempuri.org/)]
[webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]
public class getdatasource4 : ihttphandler
{
public void processrequest(httpcontext context)
{
context.response.contenttype = text/plain;
//得到当前页
string currentpage = context.request[page];
//得到每页显示多少
string pageshowlimit = context.request[rp];
//得到主键
string tableid = context.request[sortname];
//得到排序方法
string ordermethod = context.request[sortorder];
//得到要过滤的字段
string filterfield = context.request[qtype];
//得到要过滤的内容
string filterfieldcontext;
if (context.request.form[letter_pressed] == null)
{
filterfieldcontext = ;
}
else
{
filterfieldcontext = context.request[letter_pressed];
}
//得到表的总行数
string tablerowcount = sqlhelper.executescalar(configurationmanager.appsettings[sql2],
commandtype.text,
select count(*) from person.address
).tostring();
//得到主sql
sqlparameter sql = new sqlparameter(@sql, sqldbtype.nvarchar);
//sql.value = select * from person.address;
if (filterfieldcontext.length == 0 || filterfield.length == 0)
{
sql.value = select addressid,addressline1,addressline2,postalcode,city from person.address;
}
else
{
string[] tmp = filterfield.split(',');
sql.value = select addressid,addressline1,addressline2,postalcode,city from person.address where + tmp[0] + like ' + filterfieldcontext + %';
}
sqlparameter page = new sqlparameter(@page, sqldbtype.int);
page.value = convert.toint32(currentpage);
sqlparameter recsperpage = new sqlparameter(@recsperpage, sqldbtype.int);
recsperpage.value = convert.toint32(pageshowlimit);
sqlparameter id = new sqlparameter(@id, sqldbtype.varchar);
id.value = tableid;
sqlparameter sort = new sqlparameter(@sort, sqldbtype.varchar);
sort.value = tableid;
//得到表
datatable returntable = sqlhelper.executedataset(configurationmanager.appsettings[sql2],
commandtype.storedprocedure, spall_returnrows,
new sqlparameter[]
{
sql,page,recsperpage,id,sort
}).tables[0];
context.response.write(dttoson2(returntable, currentpage, tablerowcount));
}
///
/// json格式转换
///
/// datatable表
/// 当前页
/// 总计多少行
///
public static string dttoson2(datatable dt, string page, string total)
{
stringbuilder jsonstring = new stringbuilder();
jsonstring.appendline({);
jsonstring.appendformat(page: {0},\n, page);
jsonstring.appendformat(total: {0},\n, total);
jsonstring.appendline(rows: [);
for (int i = 0; i {
jsonstring.append({);
jsonstring.appendformat(id:'{0}',cell:[, dt.rows[i][0].tostring());
for (int j = 0; j {
if (j == dt.columns.count - 1)
{
jsonstring.appendformat('{0}', dt.rows[i][j].tostring());
}
else
{
jsonstring.appendformat('{0}',, dt.rows[i][j].tostring());
}
if (j == dt.columns.count - 1)
{
jsonstring.appendformat(,'{0}', );
}
}
jsonstring.append(]);
if (i == dt.rows.count - 1)
{
jsonstring.appendline(});
}
else
{
jsonstring.appendline(},);
}
}
jsonstring.append(]);
jsonstring.appendline(});
return jsonstring.tostring();
}
public bool isreusable
{
get
{
return false;
}
}
}
}
3 页面实现
复制代码 代码如下:
ttp://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
http://www.w3.org/1999/xhtml>