Recently used the Easyui page and search bar function, the use of the process due to the use of unskilled caused by some problems in the meantime, to do a summary, for everyone to learn together.
1. First use Easyui's DataGrid paging to load its JS class library:
<link rel= "stylesheet" type= "Text/css" href= "Http://www.jeasyui.com/easyui/themes/default/easyui.css" >
<link rel= "stylesheet" type= "Text/css" href= "Http://www.jeasyui.com/easyui/themes/icon.css" >
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.4.4.min.js" ></script>
<script type= "Text/javascript" src= "Http://www.jeasyui.com/easyui/jquery.easyui.min.js" ></script>
2. Create a new DataGrid
There are two ways to create a new DataGrid. Let's start with the first method.
1) Use the table label to create
<table id= "tt" class= "Easyui-datagrid" style= "width:600px;height:250px"
Url= "datagrid24_getdata.php" toolbar= "#tb"
title= "Load Data" iconcls= "Icon-save"
Rownumbers= "true" pagination= "true" >
<thead>
<tr>
<th field= "itemid" width= ">item id</th>"
<th field= "ProductID" width= ">product id</th>"
<th field= "ListPrice" width= "Up" align= "right" >list price</th>
<th field= "UnitCost" width= "Up" align= "right" >unit cost</th>
<th field= "attr1" width= ">Attribute</th>"
<th field= "status" width= "align= Center" >Stauts</th>
</tr>
</thead>
</table>
2) Use JS code to create
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' #historydisplay '). DataGrid ({
Title: ' Historical Data ',
Toolbar: ' #search ',//Settings toolbar
Fitcolumns:true,//Set column width adaptive screen
Iconcls: ' Icon-save ',
URL: ' @Url. Action ("TestData", "Tctrl") ',
PAGESIZE:15,//Set default paging size
PAGELIST:[10,15,20,25,30,35,40,45,50],//Set paging size
Columns: [[
{field: ' Storenum ', title: ' Storenum ', width:80, align: ' center '},
{field: ' T1 ', title: ' T1 ', width:80, align: ' center '},
{field: ' T2 ', title: ' T2 ', width:80, align: ' center '},
{field: ' O2 ', title: ' O2 ', width:80, align: ' center '},
{field: ' CO2 ', title: ' CO2 ', width:100, align: ' center '}
]],
Pagination:true
});
});
</script>
3. Add a div to the page where you want to place the DataGrid
<table id= "Historydisplay" ></table>
4. Write the background code, the data paging control
Public actionresult TestData (int page, int rows,int? storenum,datetime? datefrom,datetime? dateto) {
var total = db. Tctrls.orderby (x = x.id). ToList ();
if (storenum! = null)
Total = total. Where (x = X.storenum = = storenum). ToList ();
if (datefrom! = null) && (Dateto! = null)) {
DateTime datebegin = (datetime) Datefrom;
DateTime dateend = (datetime) Dateto;
Total = total. Where (x = X.time >= datebegin). Where (x = X.time <= dateend). ToList ();
}
var result=total. Skip ((page-1) *rows). Take (rows). ToList ();
dictionary<string, object> json = new dictionary<string, object> ();
Json. ADD ("Total", total. ToList (). Count);
Json. ADD ("Rows", result);
Return JSON (JSON, jsonrequestbehavior.allowget);
}
This time I was using ASP. NET MVC3, but much the same, as long as the total amount of data and the results of the final display of the result data is encapsulated into a JSON object.
The above section is only to achieve the Easyui of the page, the following to summarize the Easyui search bar implementation
To add a search bar above, proceed as follows:
1. Add the following code to the corresponding DataGrid page:
<div id= "Search" style= "Padding:5px;height:auto" >
<span> Library Number:</span>
<input id= "Storenum" style= "border:1px solid #ccc"/>
<span> Date:</span>
<input class= "Easyui-datebox" style= "width:100px"/> To
<input class= "Easyui-datebox" style= "width:100px"/>
<a href= "#" class= "Easyui-linkbutton" iconcls= "Icon-search" plain= "true" onclick= "Dosearch ()" > Search </a>
</div>
2. Set the Toolbar property in the DataGrid to the ID of the search bar Div.
eg
Toolbar: ' #search '
See the 2.2 above the DataGrid.
3. Add a response function
function Dosearch () {
$ (' #historydisplay '). DataGrid (' Load ', {
Storenum: $ (' #storenum '). Val (),
Datefrom: $ (' #datefrom '). Val (),
Dateto: $ (' #dateto '). Val ()
});
}
4. Add the appropriate background code to the front end of the search field to pass the processing
The specific code is shown in step 4 of the DataGrid.
Go Easyui Summary of the page
