Easy UI JS Implementation grid

The easy UI's grid is implemented in two ways

1. is implemented in the Web page (this does not say I feel or in the JS implementation of the operation is more convenient)

2. Implementation in JS

Okay, let's talk about how the grid is implemented in JS.

The first step is to refer to the easy UI JS

<script type= "Text/javascript" src= ". /js/jquery.min.js "></script><script type=" Text/javascript "src=". /js/jquery.easyui.min.js "></script>

Okay, here's the HTML code.

Just need to define an ID for a table

Okay, we're starting to define the implementation of the Grif in our JS.

var lastindex;function datagridload () {$ (' #dg '). DataGrid ({rownumbers:true,singleselect:true,pagination:true,// Paging space URL: ' Datagrid_data1.json ', loadmsg: "Trying to load data, please later ...", title: ' Family members list (* Red font for younger people) ', nowrap:t Rue, Striped:true, Border:true, collapsible:false,//whether foldable remotesort:false, IDFI Eld: ' Fldid ', height:500, columns:[[{field: ' Code ', title: ' Login name ', width:50}, {field: ' Name ', title: ' Name  ', width:100}, {field: ' Age ', Title: ' Ages ', width:20,align: ' Right '}, {field: ' Six ', Title: ' Gender ', width:20,align: ' Right '}  , {field: ' Birthday ', title: ' Birthday ', width:100,align: ' Right '}, {field: ' IDNumber ', title: ' ID Number ', width:100,align: ' Right '}  , {field: ' Phone1 ', title: ' Contact 1 ', width:100,align: ' Right '},{field: ' Phone2 ', title: ' Contact 2 ', width:100,align: ' Right '} , {field: ' Status ', title: ' State ', width:40,align: ' Right '}, {field: ' Fposition ', title: ' Family position ', Width:100,align: ' Right '},{ Field: ' Industry ', title: ' Engaged in industry ', Width:100,align: ' Right '}], Rowstyler:function (index,row) {if (Row.age <) {return ' Color:red;font                    -weight:bold; '; }},toolbar: [{text: ' New user ', Iconcls: ' Icon-add ', handler:adduser}, '-', {text: ' Modify user ', Iconcls: ' Icon-edit ', hand Ler:function () {var row = $ (' #dg '). DataGrid (' getselected ');//Gets the selected line if (row==null) {$.messager.alert (' hint ', ' Please select a line of information      ! ', ' warning ');  }else{UpdateUser (); }}}, '-', {text: ' delete user ', Iconcls: ' Icon-remove ', handler:function () {var row = $ (' #dg '). DataGrid (' getselected ');//Get Selected rows      if (row==null) {$.messager.alert (' hint ', ' Please select a line of information! '), ' warning '); }else{$.messager.confirm (' hint ', ' OK to delete ' +row.name+ ' user!  ', deleteuser); }}], Onclickrow:function (rowIndex) {if (LastIndex! = RowIndex) {$ (' #dg '). Da                          Tagrid (' EndEdit ', lastIndex);                      $ (' #dg '). DataGrid (' BeginEdit ', rowIndex);        } LastIndex = RowIndex;         },onselect:function (Rowindex,rowdata) {//user selects one row to trigger event//alert (' Item ID: ' +rowdata.code+ ' \nprice: "+rowdata.name);});      var p = $ (' #dg '). DataGrid (' Getpager ');        $ (P). Pagination ({pagesize:10,//shows the number of records per page, by default, PageList: [5,10,15],//can set a list of the number of record bars per page loading:true, Beforepagetext: ' First ',///page Afterpagetext: ' pages total {pages} page ', displaymsg: ' Current display {from}-{to} '             Record ' {total} ' records ',/*onbeforerefresh:function () {$ (this). Pagination (' loading ');             Alert (' before Refresh ');         $ (this). Pagination (' loaded '); }*/onselectpage:function (pagenumber, pageSize) {var url= "Datagrid_data" +pagenumber+ ". JSON";//the path of the URL is passed through Ajax into the background $ ('  #dg '). DataGrid (' Load ', url); }    }); }

The implementation of pagination can also be studied in the interest of

The following is the JS loaded

$ (document). Ready (function () {  //js load datagridload ();});

Okay, so we're going to implement a simple grid load of data.

Speaking of our JSON file format

{"Total": +, "Rows": [{"Code": "Xiaxia", "name": "Haha", "age": "+", "six": "Female", "Birthday": "1991-02-22", "IDNumber": " 3203211199108134216 "," Phone1 ":" 12345666445 "," Phone2 ":" "," status ":" None "," fposition ":" Family "," industry ":" Accounting "},{" code " : "Xiaokang", "name": "Huhu", "Age": "The", "six": "Male", "Birthday": "1991-08-13", "IDNumber": "3203211199108134216", " Phone1 ":" 18361912397 "," Phone2 ":" "," status ":" None "," fposition ":" Family "," Industry ":" Software "},{" code ":" Xiaokang "," Name ":" Lisi "," Age ":" The "," six ":" Male "," Birthday ":" 1991-08-13 "," IDNumber ":" 3203211199108134216 "," Phone1 ":" 18361912397 "," Phone2 ":", "status": "None", "fposition": "Family", "Industry": "Software"},{"code": "Xiaokang", "name": "Wang Wu", "Age": "$", "six": "Male", "Birthday": "1991-08-13", "IDNumber": "3203211199108134216", "Phone1": "18361912397", "Phone2": "", "status": "None", " Fposition ":" Family "," Industry ":" Software "},{" code ":" Xiaokang "," name ":" 1212 "," Age ":" One "," six ":" Male "," Birthday ":" 1991-08-13 " , "IDNumber": "3203211199108134216", "Phone1": "18361912397", "Phone2": "", "status": "None", "fposition": "Family", "industry": "Software"},{"code": "XiaoKang "," name ":" Black Chance "," age ":" The "," six ":" Male "," Birthday ":" 1991-08-13 "," IDNumber ":" 3203211199108134216 "," Phone1 ":" 18361912397 "," Phone2 ":" "," status ":" None "," fposition ":" Family "," Industry ":" Software "},{" code ":" Xiaokang "," name ":" Hdjh "," Age " : "A", "six": "Male", "Birthday": "1991-08-13", "IDNumber": "3203211199108134216", "Phone1": "18361912397", "Phone2": "", " Status ":" None "," fposition ":" Family "," Industry ":" Software "},{" code ":" Xiaokang "," name ":" DFGDFGDF "," Age ":" A "," six ":" Male "," Birthday ":" 1991-08-13 "," IDNumber ":" 3203211199108134216 "," Phone1 ":" 18361912397 "," Phone2 ":" "," status ":" None "," Fposition ":" Family "," Industry ":" Software "},{" code ":" Xiaokang "," name ":" Ereer "," Age ":" The "," six ":" Male "," Birthday ":" 1991-08-13 "," IDNumber ":" 3203211199108134216 "," Phone1 ":" 18361912397 "," Phone2 ":" "," status ":" None "," fposition ":" Family "," industry " : "Software"},{"code": "Xiaokang", "name": "Dsffd", "Age": "The", "six": "Male", "Birthday": "1991-08-13", "IDNumber": " 3203211199108134216 "," Phone1 ":" 18361912397 "," Phone2 ":" "," status ":" None "," fposition ":" Family "," Industry ":" Software "}]}

Easy UI JS Implementation grid