jqGrid principle

JqGrid is a typical B/S architecture. The server only provides data management, while the client only provides data display. In other words, jqGrid can present information about your database in a simpler way, and it can also send client data back to the server.

For jqGrid, what we care about is that there must be a piece of code to save some page information to the database, and also to be able to return the response information to the client. JqGrid uses ajax to handle requests and responses.

jqGrid | Initialization | Parameters

1. /*******  
2.             Obtain information data of TRADERS'goods and materials from the background.
3.         ******/  
4.         var grid_data = [];   
5.         var start = 0;  
6.         var limit = 100;  
7.         var currentPage = 0;  
8.         var dataStr = "start=" + start + "&limit=" + limit;  
9.         $.ajax({  
10.             async:false,  
11.             cache:false,  
12.             url: "goods_findPageGoodsByTrader.do",  
13.             data: dataStr,  
14.             type: 'POST',  
15.             success: function(result){  
16.                 var result = eval('('+ result +')');  
17.                 if(result.root != undefined && result.root.length > 0){  
18.                     var resultContent = result.root;  
19.                     var grid_child;  
20.                     for ( var i = 0; i < resultContent.length; i++) {  
21.                         grid_child = {id:resultContent[i].goodsId,   
22.                                 goodsOrder:resultContent[i].goodsOrder, goodsPackage:resultContent[i].goodsPackage, goodsName:resultContent[i].goodsName,  
23.                                 goodsType:resultContent[i].goodsType, goodsMaterial:resultContent[i].goodsMaterial, goodsNumber:resultContent[i].goodsNumber, goodsWeight:resultContent[i].goodsWeight,   
24.                                 goodsWarranty:resultContent[i].goodsWarranty, goodsOrigin:resultContent[i].goodsOrigin, originName:resultContent[i].originName,   
25.                                 goodsContractreadtime:resultContent[i].goodsContractreadtime, dzPurchaseContractNum:resultContent[i].dzPurchaseContractNum, groupPurchaseContractNum:resultContent[i].groupPurchaseContractNum};  
26.                         grid_data[i] = grid_child;      
27.                     }  
28.                 }  
29.             },  
30.             error:function(e){alert("Failure to obtain information on TRADERS'goods and materials");}  
31.         });  
32.       
33.             jQuery(function($) {  
34.                 var grid_selector = "#grid-table";  
35.                 var pager_selector = "#grid-pager";  
36.                 jQuery(grid_selector).jqGrid({  
37.                     //Direction: "rtl", *// the direction of the text in the table, from left to right (ltr) or from right to left (rtr)
38.                       
39.                     data: grid_data,  
40.                     datatype: "local",          //Data types returned from the server side
41.                     height: 400,                //Table height, which can be a number, a pixel value, or a percentage.
42.                     /****Column display name******/  
43.                     colNames:[' ', 'id', 'Order number', 'Bales', 'Product Name', 'Specifications', 'Product brand(Texture of material)', 'Number', 'weight(ton)', 'Guarantee Number', 'Material sources', 'Source name', 'Contract reading time', 'Contract Number of Mass Material Network', 'Group Contract Bank Contract Number', 'View attachments', 'details'],  
44.                     /****Commonly used attributes: name column display name; index passed to the server for sorting column name; width column width; align; sortable can be sorted ******/  
45.                     colModel:[  
46.                         {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,  
47.                             formatter:'actions',   
48.                             formatoptions:{   
49.                                 keys:true,  
50.                                 delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},  
51.                                 //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}  
52.                             }  
53.                         },  
54.                         {name:'id', index:'id', width:60, editable:false, hidden:true},  
55.                         {name:'goodsOrder',index:'goodsOrder', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},  
56.                         {name:'goodsPackage',index:'goodsPackage', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},  
57.                         {name:'goodsName',index:'goodsName',width:60, editable:true, editoptions:{size:"20",maxlength:"30"}},  
58.                         {name:'goodsType',index:'goodsType',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
59.                         {name:'goodsMaterial',index:'goodsMaterial',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
60.                         {name:'goodsNumber',index:'goodsNumber',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
61.                         {name:'goodsWeight',index:'goodsWeight',width:60, editable:true, editrules:{edithidden: true}, hidden:true, editoptions:{size:"20",maxlength:"30"}},  
62.                         {name:'goodsWarranty',index:'goodsWarranty', width:60, editable: true, editoptions:{size:"20",maxlength:"30"}},  
63.                         {name:'goodsOrigin', index:'goodsOrigin', width:60, editable:true, editrules:{edithidden: true}, hidden:true},  
64.                         {name:'originName', index:'originName', width:60, editable:true, edittype:'select', editoptions:{value:"Trader:Trader"}},  
65.                         {name:'goodsContractreadtime',index:'goodsContractreadtime', width:60, sorttype:"date", unformat:pickDate},  
66.                         {name:'dzPurchaseContractNum',index:'dzPurchaseContractNum', width:60, editable:true, edittype:'select', editoptions:{value:getDzContractNum()}},  
67.                         {name:'groupPurchaseContractNum',index:'groupPurchaseContractNum', width:60, editable:true, edittype:'select', editoptions:{value:getGroupContractNum()}},  
68.                         //{name:'goodsDetail',index:'goodsDetail', width:60, sortable:false,editable: false, editoptions:{rows:"2",cols:"10"}, formatter:function(cellvalue, options, rowObject){ return '<a href="orderDetail.html">details</a>'; }}  
69.                         {name:'checkAttachment',index:'checkAttachment', width:60, sortable:false, editable:false, formatter:function(cellvalue, options, rowObject){return "<a href=\"../attachment/checkAttachment.html\">View attachments</a>";}},  
70.                         {name:'goodsDetail',index:'goodsDetail', width:60, sortable:false, editable:false, formatter:function(cellvalue, options, rowObject){return "<a href=\"../orderDetail/orderDetail.html\">details</a>";}}  
71.                     ],   
72.               
73.                     //footerrow: true, // add a line to the page to display statistics.
74.                     rownumbers:true,//Add the left line number.
75.                     viewrecords : true,     //Define whether to display the total number of records.
76.                     rowNum:10,              //Display the number of records on the grid. This parameter is passed to the background.
77.                     rowList:[10,20,30],     //A drop-down selection box that changes the number of display records and when selected, overrides rowNum parameters and passes them to the background.
78.                     pager : pager_selector, //Defining the navigation bar for page turning must be a valid html element. Page turning toolbars can be placed anywhere on an html page.
79.                     altRows: true,          //Set to alternate row table, default to false.
80.                     prmNames:{          //Default valuesprmNames: {page: page, rows: `rows', sort: `sidx', `sord', `search', `nd', `npage:null} will not be sent to the server when the parameter is null.
81.                         page:"page",        //Set the initial page number (default: 1)
82.                         rows:"rows",  
83.                         oper:"oper",  
84.                         editoper:"edit",  
85.                         addoper:"add",  
86.                         deloper:"del",  
87.                     },  
88.                     //toppager: true,  
89.                       
90.                     multiselect: true,          //Definition is optional.
91.                     //Multkey: ctrlKey, / / / works only when multiselect is set to ture, defining which key to use for multiple selection. shiftKey, altKey, ctrlKey
92.                     multiboxonly: true,         //Only whenmultiselect = true.It works. multiboxonly by ture There is only choice. checkbox Only then will it work.  
93.                       
94.                     gridComplete:function(){ //Loop through this event to add and delete links for each row.
95.   
96.                         var ids=jQuery("#grid-table").jqGrid('getDataIDs');                           
97.                         for(var i=0; i<ids.length; i++){   
98.                             var id=ids[i];   
99.                             /* uploadAttachmentHref = "<a href='#' style='color:#f60' onclick='uploadAttachment("+ id +")' >Upload attachments</a>";  
100.                             jQuery("#grid-table").jqGrid('setRowData', ids[i], {uploadFile: uploadAttachmentHref}); */    
101.                             jQuery("#JqGrid ('setRowData', ids[i], {goodsOrigin:'Traders');.
102.                         }   
103.                     },  
104.               
105.                     loadComplete : function() {  
106.                         var table = this;  
107.                         setTimeout(function(){  
108.                             styleCheckbox(table);  
109.                               
110.                             updateActionIcons(table);  
111.                             updatePagerIcons(table);  
112.                             enableTooltips(table);  
113.                         }, 0);  
114.                     },  
115.               
116.                     editurl: "goods_editGoods.do",  //Define the url when editing form
117.                     caption: "Material Information List",      //Table Name
118.                     autowidth: true             //If it is ture, the width of the table will be readjusted according to the proportion of the parent elements when the table is first created. If the width of the parent element changes, in order to automatically adjust the width of the table, you need to implement a function: setGridWidth.
119.                 });  
120. });