Quantcast
Channel: CSDN博客推荐文章
Viewing all articles
Browse latest Browse all 35570

.NET之 Extjs4.0 Grid分页显示

$
0
0

昨天完成了 J2EE的 EXTJS  Grid分页,今天研究了下.NET下的 Extjs  Grid分页  ,

最大的区别是   分页语句不同  ,别的都大同小异:

 

上代码:

search.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Search.aspx.cs" Inherits="Search" %>

<!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>Search</title>
     <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
	<script type="text/javascript" src="extjs/bootstrap.js" ></script>
	<script type="text/javascript" src="extjs/ext-all.js" ></script>
	
	

	<script type="text/javascript"  >
	//预加载
Ext.require(
		[
		 	'Ext.grid.*',
		 	'Ext.toolbar.Paging',
		 	'Ext.data.*'
		 ]
		 
);

Ext.onReady(
		function(){
			//创建Model
			Ext.define(
					'User',
					{
						extend:'Ext.data.Model',
						fields:[
						        {name:'id',mapping:'id'},
						        {name:'name',mapping:'name'},
						        {name:'date',mapping:'date'},
						        {name:'origin',mapping:'origin'}
						]
					}
			)
			//创建数据源
			var store = Ext.create(
					'Ext.data.Store',
					{
						model:'User',
						
						//设置分页大小
						pageSize:5,
						proxy: {
					        type: 'ajax',
					        url : 'PageJson.aspx',
					        reader: {
								//数据格式为json
					            type: 'json',
					            root: 'bugs',
					            //获取数据总数
					            totalProperty: 'totalCount'
					        }
					    },
						autoLoad:true
					}
			);
			
			//创建grid
			var grid = Ext.create('Ext.grid.Panel',{
					store:store,
					columns:[
				            {text:'ID',width:120,dataIndex:'id',sortable:true},
					         {text:'姓名',width:120,dataIndex:'name',sortable:true},
					         {text:'性别',width:120,dataIndex:'date',sortable:true},
					         {text:'年龄',width:120,dataIndex:'origin',sortable:true}
					],
					height:200, 
			        width:480, 
			        x:20, 
			        y:40, 
			        title: 'ExtJS4 Grid分页查询示例示例', 
			        renderTo: 'grid', 
			       
			        //分页功能
			        bbar: Ext.create('Ext.PagingToolbar', { 
			        	            store: store, 
			        	            displayInfo: true, 
			        	            displayMsg: '显示 {0} - {1} 条,共计 {2} 条', 
			        	            emptyMsg: "没有数据" 
			        	  }
			        ) 
				}
			)
			//store.loadPage(1); 
			  store.load({ params: { start: 0, limit: 5} });

		}
)



	</script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="grid">
    
    </div>
    </form>
</body>
</html>

 

后台代码:

search.aspx.cs:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using System.Text;

public partial class PageJson : System.Web.UI.Page
{
    int total = 0;
    protected void Page_Load(object sender, EventArgs e)
    {
        int start =Convert.ToInt32( Request.Params["start"]);
        int limit =Convert.ToInt32( Request.Params["limit"]);

        jsData(start, limit);
    }

    public void jsData(int start, int limit)
    {

        SqlConnection conn = new SqlConnection("server=localhost;database=Extjs;uid=sa;pwd=1234");

        //分页查询语句  

        string sql = " SELECT TOP " + limit + " * FROM search WHERE (ID NOT IN (SELECT TOP " + start + " id FROM search ORDER BY id))ORDER BY ID";


        SqlCommand cm = new SqlCommand(sql, conn);
        DataTable dt = new DataTable();
        SqlDataAdapter da = new SqlDataAdapter();

        da.SelectCommand = cm;
        conn.Open();
        cm.ExecuteNonQuery();
        da.Fill(dt);
        conn.Close();
        Response.Write(CreateJsonParameters(dt).ToString());
       
    }

    //计算总数

    public void totalcount()
    {
        SqlConnection conn = new SqlConnection("server=localhost;database=Extjs;uid=sa;pwd=1234");


        string sql = "select count(*) as total from search";

        SqlDataAdapter da = new SqlDataAdapter(sql, conn);

        DataSet ds = new DataSet();
        da.Fill(ds, "table");

        total = Convert.ToInt32(ds.Tables[0].Rows[0]["total"].ToString());

    }
    public string CreateJsonParameters(DataTable dt)
    {
        totalcount();//计算总数

        StringBuilder JsonString = new StringBuilder();
        //Exception Handling        
        if (dt != null && dt.Rows.Count > 0)
        {

            JsonString.Append("{totalCount:" + total + ",bugs:[ ");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                JsonString.Append("{ ");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    if (j < dt.Columns.Count - 1)
                    {
                        JsonString.Append(dt.Columns[j].ColumnName.ToString() + ":" + "\"" + dt.Rows[i][j].ToString() + "\",");
                    }
                    else if (j == dt.Columns.Count - 1)
                    {
                        JsonString.Append(dt.Columns[j].ColumnName.ToString() + ":" + "\"" + dt.Rows[i][j].ToString() + "\"");
                    }
                }

                if (i == dt.Rows.Count - 1)
                {
                    JsonString.Append("} ");
                }
                else
                {
                    JsonString.Append("}, ");
                }
            }
            JsonString.Append("]}");
            return JsonString.ToString();
        }
        else
        {
            return null;
        }
    }

}


 

截图:

 

 


 

 

 

作者:skyxuyan 发表于2013-1-14 16:41:31 原文链接
阅读:27 评论:0 查看评论

Viewing all articles
Browse latest Browse all 35570

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>