当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > asp.net Ext grid 显示列表

ASP.NET
asp.net GridView控件中模板列CheckBox全选、反选、取消
asp.net GridView 删除时弹出确认对话框(包括内容提示)
asp.net DropDownList 三级联动下拉菜单实现代码
asp DataTable添加列和行的三种方法
Asp.net 页面调用javascript变量的值
asp.net 长文章通过设定的行数分页
asp.net 定时间点执行任务的简易解决办法
asp.net 页面延时五秒，跳转到另外的页面
asp.net 动态输出透明gif图片
asp.net DataList与Repeater用法区别
asp.net Javascript获取CheckBoxList的value
asp.net程序在调式和发布之间图片路径问题的解决方法
asp.net下生成英文字符数字验证码的代码
asp.net 页面版文本框智能提示JSCode (升级版)
ASP.NET URL伪静态重写实现方法
ASP.NET 2.0 中Forms安全认证
asp.net 动态添加多个用户控件
asp.net Repeater显示父子表数据,无闪烁
asp.net 无法获取的内部内容，因为该内容不是文本 的解决方法
asp.net GridView排序简单实现

No. « 167 168 169 170 »

技术文章搜索

关键字

ASP.NET 中的 asp.net Ext grid 显示列表

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-11   浏览: 222 ::
收藏到网摘: n/a

asp.net Ext 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="/upload/tech/20091011/20091011144949_e0cf1f47118daebc5b16269099ad7347.js"></script>
<script type="text/javascript" src="/upload/tech/20091011/20091011144952_beed13602b9b0e6ecb5b568ff5058f07.js"></script>
<script type="text/javascript" src="/upload/tech/20091011/20091011144952_1ecfb463472ec9115b10c292ef8bc986.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function ready()
{
Ext.BLANK_IMAGE_URL="/upload/tech/20091011/20091011144955_ca75910166da03ff9d4655a0338e6b09.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();
}
}
}