Home > Developer > JavaScript
Today, let's talk about the basic use of this datagrid framework. This framework has always been a headache for everyone. Especially for the splicing of Json data, the background front-end is very important. Use this framework, the most important thing is to carefully:
No nonsense. The code is:
Copy codeThe Code is as follows:
<Link href = "jquery-easyui-1.3.2/themes/default/easyui.css" rel = "stylesheet" type = "text/css"/>
<! -- The most comprehensive style package of easyui can also be referenced separately. -->
<Link href = "jquery-easyui-1.3.2/themes/icon.css" rel = "stylesheet" type = "text/css"/>
<! -- Easyui comes with an image style package. You can also add it on your own -->
<Script src = "jquery-easyui-1.3.2/jquery-1.8.0.min.js" type = "text/javascript"> </script>
<! -- I am using easyui 1.3.2, based on jquery-1.8.0 -->
<Script src = "jquery-easyui-1.3.2/jquery. easyui. min. js" type = "text/javascript"> </script>
<! -- Easyui js package -->
<Script src = "jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type = "text/javascript"> </script>
<! -- Easyui Chinese Language Pack, which defaults to English -->
</Head>
<Body id = "layoutbody" class = "easyui-layout">
<Div data-options = "region: 'North ', title: 'North title', split: true" style = "height: 100px;">
</Div>
<Div data-options = "region: 'south', title: 'southtitle', split: true" style = "height: 100px;">
</Div>
<Div data-options = "region: 'east', iconCls: 'icon-reload', title: 'east', split: true" style = "width: 100px;">
</Div>
<Div data-options = "region: 'west', title: 'west', split: true" style = "width: 100px;">
</Div>
<Div data-options = "region: 'center', title: 'centertitle'" href = "HTMLPage.htm" style = "padding: 5px;
Background: # eee; overflow: hidden; "> <! -- Here is an htm page -->
</Div>
</Body>
</Html>
HTMLPage.htm code:
Copy codeThe Code is as follows:
<Script type = "text/javascript" charst = "UTF-8">
// When the layout framework points to href, it only takes the part in the middle of the html page body, so you can write the page like this.
// The datagrid contains many attributes. Therefore, use js to initialize the datagrid framework.
$ (Function (){
$ ("# Dg"). datagrid ({
Url: "GetJson. ashx ", // points to a general processing program or a controller. The returned data must be in Json format. You can directly assign values to Json format data. I will use Json data in demo as an example, I will not write the background code, but I will explain the precautions returned by the background.
Title: "data display table ",
IconCls: "icon-add ",
FitColumns: false, // if it is set to true, the column will automatically adapt to the table width to prevent horizontal scrolling. If it is set to false, the column size will be automatically matched.
// Toolbar: Set the toolbar at the top of the table as an array
IdField: 'id', // id column, which is generally set to id and may be case sensitive.
LoadMsg: "loading data for you", // statements displayed to users when loading data
Pagination: true, // display the lowest page Toolbar
Rownumbers: true, // displays the number of rows 1, 2, 3, 4...
PageSize: 10, // Number of pages to read, that is, the value passed to the background when reading data
PageList: [10, 20, 30], // you can adjust the data displayed on each page, that is, adjust the data of pageSize each time you request data from the background
// Because the datagrid has too many attributes, I will not introduce them all. If necessary, you can refer to its API
SortName: "name", // The sort field used to initialize the table must be the same as the field name in the database.
SortOrder: "asc", // forward
Columns :[[
{Field: 'code', title: 'code', width: 100 },
{Field: 'name', title: 'name', width: 100, sortable: true}, // sortable: true can change the ascending or descending order when you click this column.
{Field: 'addr ', title: 'addr', width: 100,
// You can add this method to change the display data.
// Formatter: function (value, row, index ){
// If (value = "0 "){
// Return "normal role ";
//} Else {
// Return "special role ";
//}
//}
}
] // Here there are two square brackets because they can be made into Crystal Reports. For details, see the demo.
});
});
</Script>
<Div id = "tt" class = "easyui-tabs" style = "width: 500px; height: 250px;" fit = "true"
Border = "false">
<Div title = "Tab1" style = "padding: 20px;" border = "false">
<Table id = "dg">
</Table>
</Div>
</Div>
Json format data must be enclosed in double quotation marks. data cannot be displayed in single quotation marks;
The data format is as follows:
Copy codeThe Code is as follows:
{
"Total": 239,
"Rows ":[
{"Code": "001", "name": "Name 1", "addr": "Address 11", "col4": "col4 data "},
{"Code": "002", "name": "Name 2", "addr": "Address 13", "col4": "col4 data "},
{"Code": "003", "name": "Name 3", "addr": "Address 87", "col4": "col4 data "},
{"Code": "004", "name": "Name 4", "addr": "Address 63", "col4": "col4 data "},
{"Code": "005", "name": "Name 5", "addr": "Address 45", "col4": "col4 data "},
{"Code": "006", "name": "Name 6", "addr": "Address 16", "col4": "col4 data "},
{"Code": "007", "name": "Name 7", "addr": "Address 27", "col4": "col4 data "},
{"Code": "008", "name": "Name 8", "addr": "Address 81", "col4": "col4 data "},
{"Code": "009", "name": "Name 9", "addr": "Address 69", "col4": "col4 data "},
{"Code": "010", "name": "Name 10", "addr": "Address 78", "col4": "col4 data "}
]
}
Here, it is important to transmit data in the background:
Note: Table Post or get back request
Page: 3 indicates that the page is the key, and the selected current page number is 3.
Rows: 10 indicates that the size of a page is 10.
The data returned by the background is in the format of {total: '', rows: [{},{}]}.
As long as the total tatol field is included, rows is the specific number of rows.
For example:
Example of Asp. Net MVC:
Public JsonResult GetAllUserInfos ()
{
Int pageSize = 5;
Int pageIndex = 1;
Int. TryParse (this. Request ["page"], out pageIndex );
Int. TryParse (this. Request ["rows"], out pageSize );
PageSize = pageSize <= 0? 5: pageSize;
PageIndex = pageIndex <1? 1: pageIndex;
Var temp = db. UserInfo
. OrderBy (u => u. Sort)
. Skip <UserInfo> (pageIndex-1) * pageSize)
. Take <UserInfo> (pageSize)
. ToList <UserInfo> ();
Hashtable ht = new Hashtable ();
Ht ["total"] = db. UserInfo. Count ();
Ht ["rows"] = temp;
Return Json (ht );
}
Example of Asp. Net WebForm:
Public void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
Var strWebName = context. Request ["WebName"]? String. Empty;
Var GoodsNo = context. Request ["GoodsNo"]? String. Empty;
Int categoryId = 0;
Int pageIndex = 1;
Int pageSize = 10;
Int. TryParse (context. Request ["rows"], out pageSize );
Int. TryParse (context. Request ["page"], out pageIndex );
Decimal priceLeft = 0;
Decimal maid = 1000000;
Int goodsStatus = 0;
Decimal. TryParse (context. Request ["PriceLeft"], out priceLeft );
Decimal. TryParse (context. Request ["PriceRight"], out priceRight );
Int. TryParse (context. Request ["CategoryId"], out categoryId );
Int. TryParse (context. Request ["GoodsStatus"], out goodsStatus );
Var goodsQueryParamter = new GoodsQueryParamter ();
GoodsQueryParamter. GoodsStatus = (Model. GoodsModel. GoodsStatusEnum) goodsStatus;
Var ds = goodsService. GetGoodsList (goodsQueryParamter );
String json = string. Empty;
If (ds! = Null & ds. Tables. Count> 0)
{
System. Text. StringBuilder rowJson = new System. Text. StringBuilder ();
Int colLen = ds. Tables [0]. Columns. Count;
DataColumnCollection col = ds. Tables [0]. Columns;
Foreach (DataRow row in ds. Tables [0]. Rows)
{
System. Text. StringBuilder colJson = new System. Text. StringBuilder ();
RowJson. Append ("{");
For (int I = 0; I <colLen; I ++)
{
ColJson. Append ("\" "+ col [I]. ColumnName +" \ ": \" "+ row [I]. ToString () + "\",");
}
RowJson. Append (colJson. ToString (). TrimEnd (','));
RowJson. Append ("},");
}
Json = "{\" total \ ":" + ds. tables [0]. rows [0] ["sumGoods"] + ", \" rows \ ": [" + rowJson. toString (). trimEnd (',') + "]}";
}
Context. Response. Write (json );
}
A class in ASP. Net can also serialize data in Json format;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
