Implement Grid with easy ui JS

Implement Grid with easy ui JS

There are two ways to implement the grid of easy ui:

1. It is implemented on the webpage (I don't think it is more convenient to implement operations in js)

2. Implement in JS

Let's talk about how to implement GRID in JS.

The first step is to reference the JS of easy ui.

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

Okay, the following is the HTML code.

You only need to define an ID for a table

Well, let's start to define the grif Implementation Method in JS.

Var lastIndex; function datagridload () {$ ('# dg '). datagrid ({rownumbers: true, singleSelect: true, pagination: true, // the url of the paging space: 'datagrid _ data1.json ', loadMsg: "loading data. Please wait... ", title: 'Family Staff List (* red for younger people) ', nowrap: true, striped: true, border: true, collapsible: false, // whether the foldable remoteSort: false, idField: 'fld', height: 500, columns: [{field: 'code', title: 'login name', width: 50 },{ field: 'name', title: 'name', width: 100 }, {Field: 'age', title: 'age', width: 20, align: 'right'}, {field: 'six', title: 'gender ', width: 20, align: 'right'}, {field: 'birthday', title: 'birthday', width: 100, align: 'right'}, {field: 'idnumber ', title: 'credential number', width: 100, align: 'right'}, {field: 'phone1 ', title: 'Contact method 1', width: 100, align: 'right'}, {field: 'phone2', title: 'Contact method 2', width: 100, align: 'right'}, {field: 'status', title: 'status', width: 40, align: 'right'}, {field: 'fposition', title: 'Home jobs', width: 100, align: 'right'}, {field: 'industry ', title: 'industry-engaged', width: 100, align: 'right'}], rowStyler: function (index, row) {if (row. age <20) {return 'color: red; font-weight: bold; ';}}, toolbar: [{text: 'add user', iconCls: 'icon-add', handler: adduser}, '-', {text: 'modify user', iconCls: 'icon-edit', handler: function () {var row = $ ('# dg '). datagrid ('getselected'); // obtain the selected row if (row = null) {$. messager. alert ('hs', 'select a row Information! ', 'Warning') ;}else {updateuser () ;}},'-', {text: 'delete user', iconCls: 'icon-delete', handler: function () {var row = $ ('# dg '). datagrid ('getselected'); // obtain the selected row if (row = null) {$. messager. alert ('hs', 'select a line of information! ', 'Warning');} else {$. messager. confirm ('hprompt', 'Are you sure you want to delete '+ row. name +' user! ', Deleteuser) ;}}], onClickRow: function (rowIndex) {if (lastIndex! = RowIndex) {$ ('# dg '). datagrid ('enabled', lastIndex); $ ('# dg '). datagrid ('ineinedit ', rowIndex);} lastIndex = rowIndex;}, onSelect: function (rowIndex, rowData) {// select a row to trigger events // alert ('item ID: '+ rowData. code + "\ nPrice:" + rowData. name) ;}}); var p =$ ('# dg '). datagrid ('getpager'); $ (p ). pagination ({pageSize: 10, // number of records displayed on each page. The default value is 10 pageList: [5, 10, 15]. // you can set the loading list of the number of records on each page: true, beforePageText: 'dide', // The Chinese Character afterPageText: 'displayed before the page number text box', displayMsg: 'Current {from}-{to} records total {total} records ',/* onBeforeRefresh: function () {$ (this ). pagination ('loading'); alert ('before refresh '); $ (this ). pagination ('loaded');} */onSelectPage: function (pageNumber, pageSize) {var url = "datagrid_data" + pageNumber + ". json "; // pass the URL path to the background through Ajax $ ('# dg '). datagrid ('load', url );}});}

The implementation of pagination can also be studied.

Below is the loading of JS.

$ (Document). ready (function () {// JS load datagridload ();});

Now we can load data with a simple grid.

Let's talk about our JSON file format.

{"Total": 13, "rows": [{"code": "xiaxia", "name": "haha", "age": "24 ", "six": "female", "birthday": "1991-02-22", "idnumber": "3203211199108134216", "phone1": "12345666445", "phone2 ":"", "status": "NONE", "fposition": "family", "industry": "accounting" },{ "code": "xiaokang", "name ": "huhu", "age": "24", "six": "male", "birthday": "1991-08-13", "idnumber": "3203211199108134216", "phone1 ": "18361912397", "phone2": "", "status": "NONE", "fposition": "family", "industry": "software "}, {"code": "xiaokang", "name": "lisi", "age": "15", "six": "male", "birthday ": "", "idnumber": "3203211199108134216", "phone1": "18361912397", "phone2": "", "status": "NONE", "fposition ": "Family", "industry": "software" },{ "code": "xiaokang", "name": "Wang Wu", "age": "60 ", "six": "male", "birthday": "", "idnumber": "3203211199108134216", "phone1": "18361912397", "phone2 ":"", "status": "NONE", "fposition": "family", "industry": "software" },{ "code": "xiaokang", "name ": "1212", "age": "11", "six": "male", "birthday": "", "idnumber": "3203211199108134216", "phone1 ": "18361912397", "phone2": "", "status": "NONE", "fposition": "family", "industry": "software "}, {"code": "xiaokang", "name": "black opportunity", "age": "77", "six": "male", "birthday ": "", "idnumber": "3203211199108134216", "phone1": "18361912397", "phone2": "", "status": "NONE", "fposition ": "Family", "industry": "software" },{ "code": "xiaokang", "name": "hdbench", "age": "77 ", "six": "male", "birthday": "", "idnumber": "3203211199108134216", "phone1": "18361912397", "phone2 ":"", "status": "NONE", "fposition": "family", "industry": "software" },{ "code": "xiaokang", "name ": "dfgdfgdf", "age": "77", "six": "male", "birthday": "", "idnumber": "3203211199108134216", "phone1 ": "18361912397", "phone2": "", "status": "NONE", "fposition": "family", "industry": "software "}, {"code": "xiaokang", "name": "ereer", "age": "78", "six": "male", "birthday ": "", "idnumber": "3203211199108134216", "phone1": "18361912397", "phone2": "", "status": "NONE", "fposition ": "Family", "industry": "software" },{ "code": "xiaokang", "name": "dsffd", "age": "77 ", "six": "male", "birthday": "", "idnumber": "3203211199108134216", "phone1": "18361912397", "phone2 ":"", "status": "NONE", "fposition": "family", "industry": "software"}]}