当前位置： 移动技术网 > IT编程>开发语言>.net > .NET之 Extjs4.0 Grid分页显示

.NET之 Extjs4.0 Grid分页显示

2018年03月27日  | 移动技术网IT编程  | 我要评论

c25混凝土密度,追回蓝姬,野钓

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

 

最大的区别是   分页语句不同  ，别的都大同小异：

 

 

 

上代码：

 

search.aspx:

 

[html]  

<%@ 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">  

    <p id="grid">  

      

    </p>  

    </form>  

</body>  

</html>  

 

 

后台代码：

 

search.aspx.cs:

 

[csharp] 

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;  

        }  

    }  

  

}  

 

 

 

截图：

 

 

 

 

[csharp]  

   

 

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网