Home > Developer > JavaScript
Examples of jQuery EasyUI DataGrid usage, jqueryeasyui
JQuery EasyUI is a lightweight Web Front-end development framework that provides a lot of ready-made components to help programmers reduce the amount of front-end code development. The DataGrid is used in a previous project.
On the official homepage of the jQuery EasyUI framework, you can download the complete development kit, which contains sample code for reference.
Run:
Because I am using ASP. NET webform technology, I will post the main code for reference below.
You must first reference the relevant css and js files on the page to use this component.
Css section:
<link href="../Js/jQueryEasyUI/theme/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../Js/jQueryEasyUI/theme/icon.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="../Css/datagrid.css" />
Js section:
<script src="../Js/jQueryEasyUI/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="../Js/jQueryEasyUI/jquery.easyui.min.js" type="text/javascript"></script> <script src="../Js/jQueryEasyUI/jquery.pagination.js" type="text/javascript"></script>
Because jQuery EasyUI is based on jQuery, you must first introduce the jQuery file. Pagination. js is the paging plug-in of EasyUI, And the paging effect will be displayed later.
<Script type = "text/javascript"> $ (function () {var qParams = {mode: 'query', hfjia: $ ("# <% = hfjia. clientID %> "). val (), sfz: $ ("# sfz "). val ()}; // obtain the query parameter var oldRowIndex; var opt = $ ("# grid"); opt. datagrid ({width: '000000', height: '000000', nowrap: false, striped: true, fitColumns: true, singleSelect: true, queryParams: qParams, // parameter url: '.. /Service/ServiceHanlder. ashx', // idField: 'id', // primary index // frozenColumns: [[{field: 'ck ', checkbox: true}], pageSize: 20, pageList: [20, 25, 30], pagination: true, // whether to enable pagination rownumbers: true, // whether to display the number of columns onClickRow: function (rowIndex) {if (oldRowIndex = rowIndex) {opt. datagrid ('clearselections', oldRowIndex);} var selectRow = opt. datagrid ('getselected'); oldRowIndex = opt. datagrid ('getrowindex ', selectRow) ;}, columns: [{title: "Browse archives", width: 20, align: "center", formatter: function (value, rowData, rowIndex) {return "<font onclick = searchDA ('" + rowData. personIdNum + "'); color = 'Blue'> View archives </font>" ;}},{ field: 'daginposition', title: "file location", width: 40, align: "center" },{ field: 'personidnum', title: "ID card number", width: 80, align: "center" },{ field: 'personname ', title: "name", width: 40, align: "center" },{ field: 'personsex ', title: "gender", width: 30, align: "center" },{ field: 'daid', title: "ARCHIVE No.", width: 60, align: "center" }// {field: 'daginorg ', title: "Business agency", width: 60, align: "center"}]}). datagrid ("getPager "). pagination ({beforePageText: 'dide', // afterPageText: 'page/{pages} page', displayMsg: 'total {total} records ', onBeforeRefresh: function () {return true ;}}) ;}); </script>
Please note that this long js Code is the core code of this page. Please note that the parameter settings in it are mainly to dynamically construct javasird through js.
Body of the page:
<Body> <form id = "form1" runat = "server"> <asp: hiddenField ID = "hfjia" runat = "server"/> <div class = "form-wrapper cf" style = "margin-top: 10px; "> <div align =" center "style =" width: 780px; "> <input id =" sfz "runat =" server "type =" text "placeholder =" Please scan the barcode above the portfolio... "/> <button id =" ssss "> file query </button> </div> <div style =" float: left; width: 780px; margin-top:-40px; margin-left: 10px; "> <table id =" grid "> </table> </div> <div style =" float: left; margin-top: 10px; margin-left: 10px; "> <input type =" button "value =" back to Main Menu "id =" button1s "onclick =" javascript: window. location. href = '.. /Main. aspx '"/> </div> </form> </body>
The table with the id of grid corresponds to the grid in the js section above.
The background code section of the page:
protected void Page_Load(object sender, EventArgs e) { string dagid = Request.QueryString["dagid"]; hfjia.Value = dagid; }
It is easy to assign a value to a hidden domain stored in the foreground to maintain the status when the page is refreshed (record the location of the archive shelf ).
The data source address in the background is ServiceHanlder. ashx. Let's take a look at the detailed code here.
Namespace DAMIS. pad2.Service {/// <summary> /// summary of ServiceHanlder /// </summary> public class ServiceHanlder: IHttpHandler {public void ProcessRequest (HttpContext context) {if (! String. IsNullOrEmpty (context. Request ["mode"]) {if (context. Request ["mode"]. Equals ("Query") {if (! String. IsNullOrEmpty (context. Request ["sfz"]) {string sfz = context. Request ["sfz"]; UserInfo userInfo = GetUserInfoById (sfz); if (userInfo! = Null) {ReturnData rd = new ReturnData (); rd. total = 1; rd. rows = new List <UserInfo> () {userInfo}; DataContractJsonSerializer json = new DataContractJsonSerializer (rd. getType (); json. writeObject (context. response. outputStream, rd);} else {context. response. write ("<script> alert (' '); </script>") ;}} else {string hfjia = Regex. match (context. request ["hfjia"]. split (';') [0], @ "\ d + "). value; stri Ng page = context. request ["page"]; string rows = context. request ["rows"]; QueryData (hfjia, page, rows, context) ;}} if (context. request ["mode"]. equals ("QueryInner") {string dajid = context. request ["dajid"]. trim ('\ ''); string dagid = context. request ["dagid"]; string hfjia = string. join ("-", dajid, dagid); string page = context. request ["page"]; string rows = context. request ["rows"]; QueryData (hfj Ia, page, rows, context) ;}}# region Query archives (paging) /// <summary> // query archives (paging) /// </summary> /// <param name = "hfjia"> shelf number </param> /// <param name = "page"> page number </param> /// <param name = "rows"> Number of rows </param> /// <param name = "context"> </param> public void QueryData (string hfjia, string page, string rows, HttpContext context) {List <UserInfo> list = new List <UserInfo> (); string msg = string. empty; DataTable dt = DAGCommonBLL. DAGPositionGetInformation (hfjia, out msg); foreach (DataRow dr in dt. rows) {list. add (new UserInfo () {PersonIdNum = dr ["PersonIdNum"]. toString (), PersonName = dr ["PersonName"]. toString (), PersonSex = dr ["PersonSex"]. toString (), DAId = dr ["DAId"]. toString (), DABusKindName = dr ["DABusKindName"]. toString (), DAKindName = dr ["DAKindName"]. toString (), DALevelCodeName = dr ["DALevelCodeName" ]. ToString (), DAGInPosition = dr ["DAGInPosition"]. toString (), DAGInUserId = dr ["DAGInUserId"]. toString (), DAGInOrg = dr ["DAGInOrg"]. toString (), IsValid = dr ["IsValid"]. toString (),});} list = list. orderBy (x => x. DAGInPosition ). toList (); ReturnData rd = new ReturnData (); rd. total = dt. rows. count; rd. rows = list. where (x => x. isValid = "0 "). skip (Convert. toInt32 (rows) * (Convert. toInt32 (page)-1 )). Take (Convert. toInt32 (rows )). toList (); DataContractJsonSerializer json = new DataContractJsonSerializer (rd. getType (); json. writeObject (context. response. outputStream, rd );} # endregion # region obtains basic user information through the ID card number // <summary> // obtains basic user information through the ID card number /// </summary> // <param name =" id "> id card number </param> // <returns> </returns> public static UserInfo GetUserInfoById (string id) {string hfjia = CommonBLL. getUserPos ItionById (id); string msg = string. Empty; if (! String. isNullOrEmpty (hfjia) {hfjia = hfjia. split ('-') [0] + "-" + hfjia. split ('-') [1]; DataTable dt = DAGCommonBLL. DAGPositionGetInformation (hfjia, out msg); if (dt! = Null & dt. rows. count> 0) {DataRow dr = dt. select ("personidnum = '" + id + "'"). firstOrDefault (); UserInfo userInfo = new UserInfo () {PersonIdNum = dr ["PersonIdNum"]. toString (), PersonName = dr ["PersonName"]. toString (), PersonSex = dr ["PersonSex"]. toString (), DAId = dr ["DAId"]. toString (), DABusKindName = dr ["DABusKindName"]. toString (), DAKindName = dr ["DAKindName"]. toString (), DALevelCodeName = dr ["DALevelCodeName"]. toString (), DAGInPosition = dr ["DAGInPosition"]. toString (), DAGInUserId = dr ["DAGInUserId"]. toString (), DAGInOrg = dr ["DAGInOrg"]. toString (), IsValid = dr ["IsValid"]. toString () ,}; return userInfo ;}} return null ;}# endregion public bool IsReusable {get {return false ;}}}}
There is nothing to say here, that is, providing data for front-end pages. The code can be further streamlined and processed, so it will not be corrected here.
It uses an entity class:
/// <Summary> /// return data by PAGE /// </summary> public class ReturnData {// <summary> /// total data /// </summary> public int total {get; set ;}/// <summary >/// specific data /// </summary> public List <UserInfo> rows {get; set ;}}
The above is a brief introduction to the examples of using jQuery EasyUI DataGrid, hoping to help you learn.
Articles you may be interested in: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
