Home > Developer > JavaScript
Recently, the project decided to use the JqGrid list control to display relevant data. In the past, there were many contacts, including easyui and Ext. net list control, the article simply writes a small example to summarize; 1: introduce the relevant JS and CSS files, JqGrid can currently use the Jquery UI skin: <link href = "css/ui-lightness/jquery-ui-1.10.4.min.css" rel = "stylesheet" type = "text/css"/> <link href = "css/ui.jqgrid.css" rel = "stylesheet "type =" text/css "/> <script src =" js/jquery-1.7.2.min.js "type =" text/javascript "> </script> <script src =" js/i18n/ grid. locale-cn.js "type =" text/javascript "> </script> <script src =" js/jquery. jqGrid. min. js "type =" text/javascript "> </script> 2: Html Tag (one for displaying a list and storing it by page ): copy the Code <body> <form id = "form1" runat = "server"> <table id = "list"> </table> <div id = "pager3"> </ div> </form> </body> copy code 3: JS content: copy the Code <script type = "text/javascript" >$ (function () {$ ("# list "). jqGrid ({url: 'handlertest. ashx ', datatype: "json", mtype: "GET", colNames: ['id', 'username'], colModel: [{name: 'id', index: 'id', width: 20}, {name: 'username', index: 'username', width: 80}], rowNum: 10, loadonce: true, sortname: 'id', viewrecords: true, sortorder: 'desc', caption: "customer list", jsonReader: {repeatitems: false, root: function (obj) {return obj. rows;}, page: function (obj) {return obj. page;}, total: function (obj) {return obj. total;}, records: function (obj) {return obj. records ;}}}). navGrid ("# pager3", {edit: false, add: false, del: false });}); </script> copy the code above to view the jqGrid-related attribute descriptions. Among them, the important jsonReader cannot be displayed because it was not written at the beginning; jqGrid has strict requirements on the data display format. For example, the following is a relatively accurate JSON format display. The attributes of JqGrid are the relevant attributes of code paging and the data display format; copy the code {"page": "1", "total": "10", "records": "10", "rows": [{"ID": 1, "UserName": "Wujy" },{ "ID": 2, "UserName": ""}]} copy code 4: backend code HandlerTest. ashx: copy the code using System. collections. generic; using System. linq; using System. web; using System. web. script. serialization; namespace WebApplication1 {/// <summary> // summary of HandlerTest /// </summary> public class HandlerTest: IHttpHandler {public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; List <ChinaUser> list = new List <ChinaUser> () {new ChinaUser () {ID = 1, UserName = "Wujy "}, new ChinaUser () {ID = 2, UserName = "" }}; GridData model = new GridData (); model. page = "1"; model. records = "10"; model. total = "10"; model. rows = list; JavaScriptSerializer serializer = new JavaScriptSerializer (); string Resul = serializer. serialize (model); context. response. write (Resul);} public bool IsReusable {get {return false ;}} public class ChinaUser {public int ID {set; get ;}public string UserName {get; set ;}} public class GridData {public string page {set; get;} public string total {get; set;} public string records {get; set ;} public List <ChinaUser> rows {get; set ;}}}
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
