asp.net Ext grid 显示列表
程序员文章站
2024-03-31 19:50:40
前台页面： 复制代码 代码如下:<%@ page language="c#" autoeventwireup="true" codebehind="grid...
前台页面：
<%@ page language="c#" autoeventwireup="true" codebehind="gridshowtest.aspx.cs" inherits="extpra.gridshowtest" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>显示gird</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/build/locale/ext-lang-zh_cn.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function ready()
{
ext.blank_image_url="extjs/docs/resources/s.gif"; //空白图片设置为本地,否则按默认方式从官方网站下载(在联网环境下)
var url="mygridjson.aspx?param=select";
var sm=new ext.grid.checkboxselectionmodel();//复选按钮
var cm=new ext.grid.columnmodel //列模版定义(该例中定义显示数据库表employees中的四列)
([
sm,//在每行的第一列添加一个复选按钮 ,
new ext.grid.rownumberer({header:"自动显示行号",width:100}),//添加自动显示行号的列
{header:'员工编号',dataindex:'employeeid',sortable:true, width:100},
{header:'名字',dataindex:'lastname',sortable:true,width:100,editor:new ext.form.textfield()},
{header:'姓氏',dataindex:'firstname',sortable:true,width:100,editor:new ext.form.textfield()},
{header:'出生日期',dataindex:'birthdate',sortable:true,width:100,renderer:ext.util.format.daterenderer('y年m月d日')} //,renderer:ext.util.format.daterenderer('y年m月d日')
]);
// cm.defaultsortable=true; //设置所有列是可以排序的
var fields= //字段
[
{name:"employeeid",mapping: 'employeeid'},
{name:"lastname",mapping: 'lastname'},
{name:"firstname",mapping:'firstname'},
{name:"birthdate",mapping:'birthdate',type:'date'}
];
//store 是ext中数据存储的和数据交换的缓冲区 在grid等控件中要使用store作为填充的数据源
var store=new ext.data.store //jsonreader支持分页 totalproperty获得记录的总数 ,root是从服务器返回的json串
({
proxy:new ext.data.httpproxy({url:url}),//proxy告诉我们从哪里获取数据
reader:new ext.data.jsonreader //reader 告诉我们如何解析数据
({
totalproperty:"totalcount",root:"root",//totalcount
fields:fields //fields 告诉我们按照定义的规范进行解析 每行读取4个数据,第一个是employeeid 第二个是lastname ...
}) //与columnmodel中的dataindex想对应,这样columnmodel就知道那列应该显示那条数据了
// remotesort:true //支持服务器端排序 设置 store.remotesort = true ,会向后台提交两个参数 sort ,dir,sort排序字段 dir升序或降序
}); //此时不支持前台排序，否则只是前台排序
store.load({params:{start:0,limit:3}}); //对数据进行初始化 start表示起始页 limit表示每页大小,最好与分页toolbar中的pagesize一致
var pagingbar=new ext.pagingtoolbar //分页toolbar
({
displayinfo:true,
emptymsg:"没有数据显示",
displaymsg:"显示从{0}条数据到{1}条数据,共{2}条数据",
store:store,
pagesize:3 //客户端的模拟分页 可以再分页栏中看到根据该pagesize和总记录数(pagecount)计算得到的页数 pagecount/pagesize
});
var grid=new ext.grid.gridpanel
({
// el:"testgrid",
id:"menugrid",
title:"显示列表",
// autowidth:true,
autoheight:true,
width:550,
//height:300, //千万别忘了设置height,否则默认的height的值是0,显示不了读取的数据
renderto:document.body,
layout:"fit",
frame:true,
border:true,
// autoscroll:true,
sm:sm, //gridpanel中的复选按钮,可以全选所有的行,若没有设置该属性,则gridpanel得全选功能不能实现
cm:cm,
store:store,
// viewconfig:{forcefit: true},设置该属性为true则grid中的列宽设置无效,grid会根据这些数值计算出比例，对各列分配宽度
bbar:pagingbar
});
grid.addlistener('sortchange', sortchangefn); //给grid增加一个'sortchange'事件,当发生排序改变的事件,启动服务器端排序(即remotesort:true)
//和重新加载数据( 即store.reload({params:{start:0,limit:3}}) )
function sortchangefn(grid, sortinfo)
{
//alert('排序'+ sortinfo.field + "方向" + sortinfo.direction);
remotesort:true
store.reload({params:{start:0,limit:3}}); //每次store.reload的时候,向后台传递sort ,dir dir每点击一次就会自动做相应的改变从desc->asc,asc->desc
}
}
ext.onready(ready);
</script>
<div id="testgrid">
</div>
</div>
</form>
</body>
</html>
后台代码：
using system;
using system.collections;
using system.configuration;
using system.data;
using system.linq;
using system.web;
using system.web.security;
using system.web.ui;
using system.web.ui.htmlcontrols;
using system.web.ui.webcontrols;
using system.web.ui.webcontrols.webparts;
using system.xml.linq;
using system.data.sqlclient;
using system.collections.generic;
using newtonsoft.json;
namespace extpra
{
public partial class mygridjson : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
#region 分页
int pagesize = 20;
int start = 1;
string field, asc_desc;
if (string.isnullorempty(request["sort"]))
{
field = "employeeid";
asc_desc = "asc";
}
else
{
field = request["sort"];
asc_desc = request["dir"];
}
if (!string.isnullorempty(request["limit"]))
{
pagesize = int.parse(request["limit"]);
start = int.parse(request["start"]);
}
start = start / pagesize;
start += 1;
#endregion
string strsql = string.format("select employeeid, lastname,firstname,birthdate from employees where employeeid between ({0}-1)*{1}+1 and {0}*{1} order by {2} {3} ",start,pagesize,field,asc_desc);
string strconnection = "data source=.;initial catalog=northwind;user id=sa;password=sa";
sqlconnection con = new sqlconnection(strconnection);
sqldataadapter da = new sqldataadapter(strsql, con);
dataset ds = new dataset();
da.fill(ds, "employees");
string json = "";
ilist<hashtable> mlist = new list<hashtable>();
try
{
foreach (datarow row in ds.tables[0].rows)
{
hashtable ht = new hashtable();
foreach (datacolumn col in ds.tables[0].columns)
{
ht.add(col.columnname, row[col.columnname]);
}
mlist.add(ht);
}
json = javascriptconvert.serializeobject(mlist);
}
catch (exception ee)
{
string error = ee.message;
}
// int count = ds.tables[0].rows.count;
int count = 9;
json = "{totalcount:" + count + ",root:" + json + "}";
response.write(json);
response.end();
}
}
}
复制代码 代码如下:
<%@ page language="c#" autoeventwireup="true" codebehind="gridshowtest.aspx.cs" inherits="extpra.gridshowtest" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>显示gird</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/build/locale/ext-lang-zh_cn.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function ready()
{
ext.blank_image_url="extjs/docs/resources/s.gif"; //空白图片设置为本地,否则按默认方式从官方网站下载(在联网环境下)
var url="mygridjson.aspx?param=select";
var sm=new ext.grid.checkboxselectionmodel();//复选按钮
var cm=new ext.grid.columnmodel //列模版定义(该例中定义显示数据库表employees中的四列)
([
sm,//在每行的第一列添加一个复选按钮 ,
new ext.grid.rownumberer({header:"自动显示行号",width:100}),//添加自动显示行号的列
{header:'员工编号',dataindex:'employeeid',sortable:true, width:100},
{header:'名字',dataindex:'lastname',sortable:true,width:100,editor:new ext.form.textfield()},
{header:'姓氏',dataindex:'firstname',sortable:true,width:100,editor:new ext.form.textfield()},
{header:'出生日期',dataindex:'birthdate',sortable:true,width:100,renderer:ext.util.format.daterenderer('y年m月d日')} //,renderer:ext.util.format.daterenderer('y年m月d日')
]);
// cm.defaultsortable=true; //设置所有列是可以排序的
var fields= //字段
[
{name:"employeeid",mapping: 'employeeid'},
{name:"lastname",mapping: 'lastname'},
{name:"firstname",mapping:'firstname'},
{name:"birthdate",mapping:'birthdate',type:'date'}
];
//store 是ext中数据存储的和数据交换的缓冲区 在grid等控件中要使用store作为填充的数据源
var store=new ext.data.store //jsonreader支持分页 totalproperty获得记录的总数 ,root是从服务器返回的json串
({
proxy:new ext.data.httpproxy({url:url}),//proxy告诉我们从哪里获取数据
reader:new ext.data.jsonreader //reader 告诉我们如何解析数据
({
totalproperty:"totalcount",root:"root",//totalcount
fields:fields //fields 告诉我们按照定义的规范进行解析 每行读取4个数据,第一个是employeeid 第二个是lastname ...
}) //与columnmodel中的dataindex想对应,这样columnmodel就知道那列应该显示那条数据了
// remotesort:true //支持服务器端排序 设置 store.remotesort = true ,会向后台提交两个参数 sort ,dir,sort排序字段 dir升序或降序
}); //此时不支持前台排序，否则只是前台排序
store.load({params:{start:0,limit:3}}); //对数据进行初始化 start表示起始页 limit表示每页大小,最好与分页toolbar中的pagesize一致
var pagingbar=new ext.pagingtoolbar //分页toolbar
({
displayinfo:true,
emptymsg:"没有数据显示",
displaymsg:"显示从{0}条数据到{1}条数据,共{2}条数据",
store:store,
pagesize:3 //客户端的模拟分页 可以再分页栏中看到根据该pagesize和总记录数(pagecount)计算得到的页数 pagecount/pagesize
});
var grid=new ext.grid.gridpanel
({
// el:"testgrid",
id:"menugrid",
title:"显示列表",
// autowidth:true,
autoheight:true,
width:550,
//height:300, //千万别忘了设置height,否则默认的height的值是0,显示不了读取的数据
renderto:document.body,
layout:"fit",
frame:true,
border:true,
// autoscroll:true,
sm:sm, //gridpanel中的复选按钮,可以全选所有的行,若没有设置该属性,则gridpanel得全选功能不能实现
cm:cm,
store:store,
// viewconfig:{forcefit: true},设置该属性为true则grid中的列宽设置无效,grid会根据这些数值计算出比例，对各列分配宽度
bbar:pagingbar
});
grid.addlistener('sortchange', sortchangefn); //给grid增加一个'sortchange'事件,当发生排序改变的事件,启动服务器端排序(即remotesort:true)
//和重新加载数据( 即store.reload({params:{start:0,limit:3}}) )
function sortchangefn(grid, sortinfo)
{
//alert('排序'+ sortinfo.field + "方向" + sortinfo.direction);
remotesort:true
store.reload({params:{start:0,limit:3}}); //每次store.reload的时候,向后台传递sort ,dir dir每点击一次就会自动做相应的改变从desc->asc,asc->desc
}
}
ext.onready(ready);
</script>
<div id="testgrid">
</div>
</div>
</form>
</body>
</html>
后台代码：
复制代码 代码如下:
using system;
using system.collections;
using system.configuration;
using system.data;
using system.linq;
using system.web;
using system.web.security;
using system.web.ui;
using system.web.ui.htmlcontrols;
using system.web.ui.webcontrols;
using system.web.ui.webcontrols.webparts;
using system.xml.linq;
using system.data.sqlclient;
using system.collections.generic;
using newtonsoft.json;
namespace extpra
{
public partial class mygridjson : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
#region 分页
int pagesize = 20;
int start = 1;
string field, asc_desc;
if (string.isnullorempty(request["sort"]))
{
field = "employeeid";
asc_desc = "asc";
}
else
{
field = request["sort"];
asc_desc = request["dir"];
}
if (!string.isnullorempty(request["limit"]))
{
pagesize = int.parse(request["limit"]);
start = int.parse(request["start"]);
}
start = start / pagesize;
start += 1;
#endregion
string strsql = string.format("select employeeid, lastname,firstname,birthdate from employees where employeeid between ({0}-1)*{1}+1 and {0}*{1} order by {2} {3} ",start,pagesize,field,asc_desc);
string strconnection = "data source=.;initial catalog=northwind;user id=sa;password=sa";
sqlconnection con = new sqlconnection(strconnection);
sqldataadapter da = new sqldataadapter(strsql, con);
dataset ds = new dataset();
da.fill(ds, "employees");
string json = "";
ilist<hashtable> mlist = new list<hashtable>();
try
{
foreach (datarow row in ds.tables[0].rows)
{
hashtable ht = new hashtable();
foreach (datacolumn col in ds.tables[0].columns)
{
ht.add(col.columnname, row[col.columnname]);
}
mlist.add(ht);
}
json = javascriptconvert.serializeobject(mlist);
}
catch (exception ee)
{
string error = ee.message;
}
// int count = ds.tables[0].rows.count;
int count = 9;
json = "{totalcount:" + count + ",root:" + json + "}";
response.write(json);
response.end();
}
}
}
推荐阅读
-
asp.net Ext grid 显示列表
-
asp.net Ext grid 显示列表
-
ASP.NET MVC5网站开发显示文章列表（九）
-
Grid导出页面数据时，点击导出的图标显示不出来选项列表
-
VS中利用ASP.net做网站，使用Gridview显示数据列表，用IIS发布后，在IE浏览器和360浏览器中看到样式不一样求高手指教！_html/css_WEB-ITnose
-
VS中利用ASP.net做网站，使用Gridview显示数据列表，用IIS发布后，在IE浏览器和360浏览器中看到样式不一样求高手指教！_html/css_WEB-ITnose
-
ASP.NET MVC5网站开发显示文章列表（九）
-
Ext.grid.EditorGridPanel 中combo的显示异常
-
Ext 中 对 grid cell 单元 鼠标移入移出显示隐藏弹窗
-
Grid导出页面数据时，点击导出的图标显示不出来选项列表