Front-end page:
Copy codeThe Code is as follows: <% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "gridShowTest. aspx. cs" Inherits = "extupa. 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> show 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"; // set the blank image to local. Otherwise, download the image from the official website by default (in a networked environment)
Var url = "myGridJson. aspx? Param = select ";
Var sm = new Ext. grid. CheckboxSelectionModel (); // check button
Var cm = new Ext. grid. ColumnModel // column template definition (this example defines four columns in the database table Employees)
([
Sm, // Add a check button in the first column of each row,
New Ext. grid. RowNumberer ({header: "Auto Show row number", width: 100}), // Add columns that automatically display row numbers
{Header: 'employee number', dataIndex: 'employeeid', sortable: true, width: 100 },
{Header: 'name', dataIndex: 'lastname', sortable: true, width: 100, editor: new Ext. form. TextField ()},
{Header: 'surname', dataIndex: 'firstname', sortable: true, width: 100, editor: new Ext. form. TextField ()},
{Header: 'birthdate', dataIndex: 'birthdate', sortable: true, width: 100, renderer: Ext. util. format. dateRenderer ('y, m, dday')} //, renderer: Ext. util. format. dateRenderer ('y, m, dday ')
]);
// Cm. defaultSortable = true; // you can specify that all columns can be sorted.
Var fields = // Field
[
{Name: "EmployeeID", mapping: 'employeeid '},
{Name: "LastName", mapping: 'lastname '},
{Name: "FirstName", mapping: 'firstname '},
{Name: "BirthDate", mapping: 'birthdate', type: 'date '}
];
// Store is the buffer for data storage and data exchange in Ext. store is the data source to be filled with in controls such as grid.
Var store = new Ext. data. Store // JsonReader supports retrieving the total number of records by PAGE totalProperty. root is the json string returned from the server.
({
Proxy: new Ext. data. HttpProxy ({url: url}), // proxy tells us where to get data
Reader: new Ext. data. JsonReader // reader tells us how to parse data
({
TotalProperty: "totalCount", root: "root", // totalCount
Fields: fields // fields tells us to parse 4 data records in each row according to the defined specification. The first is EmployeeID and the second is LastName...
}) // Corresponds to the dataIndex in ColumnModel, so that ColumnModel knows that the column should display the data.
// RemoteSort: true // supports server-side sorting setting store. remoteSort = true. Two Parameters sort, dir, and sort sorting fields are submitted to the backend in ascending or descending order.
}); // The frontend sorting is not supported at this time; otherwise, only the frontend sorting is supported.
Store. load ({params: {start: 0, limit: 3}); // initialize start to indicate the size of each page on the start page. It is better to be consistent with pageSize in the pagebar.
Var pagingBar = new Ext. PagingToolbar // PagingToolbar
({
DisplayInfo: true,
EmptyMsg: "No data display ",
DisplayMsg: "displays {2} data records from {0} to {1} data records ",
Store: store,
PageSize: 3 // The simulated page of the client. You can view the page number pageCount/pageSize calculated based on the pageSize and total number of records (pageCount ).
});
Var grid = new Ext. grid. GridPanel
({
// El: "testGrid ",
Id: "MenuGrid ",
Title: "display list ",
// AutoWidth: true,
AutoHeight: true,
Width: 550,
// Height: 300, // do not forget to set the height. Otherwise, the default height value is 0, and the data cannot be read.
RenderTo: document. body,
Layout: "fit ",
Frame: true,
Border: true,
// AutoScroll: true,
Sm: sm, // select all rows in GridPanel. If this attribute is not set, the Select All function of GridPanel cannot be implemented.
Cm: cm,
Store: store,
// ViewConfig: {forceFit: true}. If this attribute is set to true, the column width setting in the grid is invalid. The grid calculates the ratio based on these values and assigns width to each column.
Bbar: pagingBar
});
Grid. addListener ('sortchang', sortchangeFn); // Add a 'sortchange' event to the grid. When an event of sorting change occurs, start the server-side sorting (that is, remoteSort: true)
// And reload data (that is, store. reload ({params: {start: 0, limit: 3 }}))
Function sortchangeFn (grid, sortinfo)
{
// Alert ('sort' + sortinfo. field + "" + sortinfo. direction );
RemoteSort: true
Store. reload ({params: {start: 0, limit: 3 }}); // store each time. during reload, the sort is passed to the background. Each time dir is clicked, the corresponding changes are automatically made from desc-> asc, asc-> desc
}
}
Ext. onReady (ready );
</Script>
<Div id = "testGrid">
</Div>
</Div>
</Form>
</Body>
</Html>
Background code:Copy codeThe Code is as follows: 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 extupa
{
Public partial class myGridJson: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
# Region Paging
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 ();
}
}
}
