How the Datagrid loads background data

Objective
Recently in the development of the warehouse system, often encountered Easyui DataGrid data loading, but found that loading data in two different ways, one is the AJAX load target URL returned JSON data, and the other is to add JS object, Use the LoadData method (or you can create a DataGrid in JS, so you don't have to loaddata the method).

Loading data through Ajax
Set the table style in view:

 <table class= "Easyui-datagrid" title= "My Application" style= "width:750px; height:250px "data-options=" Singleselect:true, @* set to True, allows only one row to be selected. *@ collapsible:true, Rownumbers:true, @* is set to true to display columns with row numbers. *@ Autorowheight:false, Pagination:true, @* is set to True, the paging toolbar is displayed at the bottom of the data grid (DataGrid). *@ pagesize:20 "> <thead> <tr> <th data-options=" Fiel D: ' ItemNo ', halign: ' Center ' "> Item number </th> <th data-options=" field: ' ItemName ', halign: ' Center ' "> quotient
                Product name </th> <th data-options= "field: ' CategoryID ', halign: ' Center '" > Product category </th> <th data-options= "field: ' Number ', HAlign: ' Center '" > Borrowed quantity </th> <th data-options= "field: ' Purpo Se ', halign: ' Center ' "> Use </th> <th data-options=" field: ' Operator1 ', halign: ' Center ' "> Approver </t h> <th data-options= "field: ' Lendingdate ', width:80,halign: ' Center '" > Borrowing time </th> <th data-options= "field: ' Re Turndate ', width:80,halign: ' Center ' "> Return time </th> <th data-options=" field: ' Operationitem ', halign: '

            Center ' "> Action column </th> @* <th data-options=" field: ' Status ', HAlign: ' Center ' "> Status </th>*@ </tr> </thead> </table>

The

uses Ajax for data transfer, fetches the information from the server, places the obtained data in an array of table column IDs, and then loads the data into the table for data filling.

The Ready method takes place when the document is loaded with the $ (document) (.) (function () {////Bind Search event $ (' #btn_Search '). Bind (' click ', Search_click); $.ajax ({//Type is get, is to get data from the database, type: "Get",//Get the address of the data, this address is the corresponding controller, to perform the corresponding CONTROLLER,MVC in the CO The Ntroller is equivalent to the U-layer URL in layer three: "/myapplication/showallapplication",//along with the data sent to the server, request the parameter: "&appl
        Icant= "+ 001,//The data type returned is JSON type DataType:" JSON ",/////When the controller requests the server to execute successfully, the parameter data is returned Success:function (data) {///defines an array variable that holds the ID of the datagrid columns var data1 = [{"ItemNo": "," itemname ": ',

            "CategoryName": "," Number ":", "Purpose": "," UserName ":", "lendingdate": "," returndate ":", "Status": "}" Loop adds data to Data1 for (var i = 0; i < data.length; i++) {Data1.push ({"ItemNo": Dat A[i].itemno, "ItemName": data[i]. ItemName, "CategoryName": Data[i].categoryname, "number": Data[i].number, "Purpose": Data[i].purpose, "UserName": DaTa[i].username, "lendingdate": Data[i].lendingdate, "returndate": data[i].returndate, "status": Data[i].status})
        }//Load data in the table, DG is the DataGrid's ID $ (' #dg '). DataGrid ("LoadData", data1); }
    })
})

Load data directly in JS
to dynamically load the DataGrid control through JS, the data will automatically populate the data table according to the filed of the DataGrid column Colums object. Creating the Easyui DataGrid can also be written in the view's HTML, so you need to use the LoadData method to invoke the JS object to load the data.

$ (document). Ready (function () {//Type is get, is to get data from the database, type: "Get",//Get the address of the data, this address is the corresponding controller, to execute the corresponding C
        The controller in the ONTROLLER,MVC is equivalent to the U-layer URL in layer three: "/myapplication/showallapplication",//along with the data sent to the server, request parameters Data: "&applicant=" + 001,//Returns the datatype of JSON type DataType: "JSON", $ (' #dg '). DataGrid ({//Through the DataGrid property setting
            Place table Style width: "100%",//Width striped:true,//stripe line (odd even row background color) IDfield: ' Quesid ',//Identification field Loadmsg: ' Loading user's information ... ',//when loading data from a remote site, the displayed message pagination:true,////data grid at the bottom of the display Page toolbar Singleselect:false,//Allow only one row to be selected pagelist: [10, 20, 30, 40, 50],//Set a list of the number of record bars page 
            Size:10,//Initialize page size (default paging size) pagenumber:1,//Initialize page (first page by default) Beforepagetext: Chinese characters displayed in front of ' the ',//page text box
         Afterpagetext: ' page total {pages} page ', Displaymsg: ' {from} to {to} bar, total {all} bar ',//Data grid column Array object
            columns:[[ {field: ' ItemNo ', title: ' Product number ', Editor: ' Text '}, {field: ' ItemName ', title: ' Product Name ', Editor: ' Text '}, {field: ' CategoryID ', Title: ' Product Category ', Editor: ' Text '}, {field: ' Number ', title: ' Borrowed Quantity ', E  Ditor: ' Text '}, {field: ' Purpose ', title: ' Use ', Editor: ' Text '}, {field: ' Operator1 ', title: ' Approver ', Editor: ' Text '}, {field: ' Lendingdate ', title: ' Borrowing Time ', Editor: ' Text '}, {field: ' Ret           
        Urndate ', title: ' Return Time ', Editor: ' Text '}, {field: ' Operationitem ', title: ' Action column ', formatter:btndetailed} ]] }） }）

Summary:
When we have questions, we must check, put together to compare, do not speak, at the same time to learn from the document, look at other people's Code (learning process), find contact, understand the principle, so as to grasp the essence. Ps:js and Ajax is the difference between JS: Set dynamic page, Ajax: The main realization of data transmission.