Implement Grid and uigrid in easy ui JS

Implement Grid and uigrid in 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.

<table id="dg"></table> 

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"}]}

Selection of ExtJS, JQuery UI, and easy UI

First, based on your needs, you need these frameworks to have the UI components you need. ExtJS and easy ui all have the ui components you need, such as messagebox, tree, and grid. Compared with jQuery UI's ui components, such as grid, jquery has many plug-ins, including grid, but it is not in jQuery UI. The latest versions of Ext JS and easy ui provide more than 20 types of grids to implement different functions.
Relatively important, ExtJS is relatively large and jquery is relatively small, which is just a simple understanding. ExtJS is a complete Framework and a heavyweight. easy ui is a set of UI Component Libraries Based on the jquery library and is lightweight. ExtJS is application-level, jquery is page-level. Of course, the application is also composed of pages, so you need to complete it yourself. Consider your needs and the original intention of using the framework, and select which one to use. At the same time, ExtJs is a heavyweight framework with a completely object-oriented style. It provides a very complete API and is very large, so the learning cost is relatively high.
Compatibility ExtJS is compatible with the full range of IE browsers and other non-IE modern browsers. jquery UI has never considered the compatibility of earlier versions of ie browsers, so it is a contempt for attitude. Easy UI is based on jquery. jquery2.X and later versions no longer support IE6, 7, and 8. We have solemnly stated that, please refer to the official website and the latest easyUI version 1.3.3 uses jQuery2.0, because of the many HTML5 features, IE6 \ 7 \ 8 is no longer supported. Low versions are not compatible with a small number of versions. Please test the version when selecting the technology. In terms of compatibility, they all have flaws, depending on your degree of receipt.
License. EXTJS version 2.1 or later. Commercial use requires commercial authorization. jquery UI uses the MIT Protocol and is open-source. If jquery easyUI is commercially available, it must follow the license cial commercial license, that is, to purchase the right to use it.


Easy ui/extjs,

First, based on your needs, you need these frameworks to have the UI components you need. ExtJS and easy ui all have the ui components you need, such as messagebox, tree, and grid. Compared with jQuery UI's ui components, such as grid, jquery has many plug-ins, including grid, but it is not in jQuery UI. The latest versions of Ext JS and easy ui provide more than 20 types of grids to implement different functions.
Relatively important, ExtJS is relatively large and jquery is relatively small, which is just a simple understanding. ExtJS is a complete Framework and a heavyweight. easy ui is a set of UI Component Libraries Based on the jquery library and is lightweight. ExtJS is application-level, jquery is page-level. Of course, the application is also composed of pages, so you need to complete it yourself. Consider your needs and the original intention of using the framework, and select which one to use. At the same time, ExtJs is a heavyweight framework with a completely object-oriented style. It provides a very complete API and is very large, so the learning cost is relatively high.
Compatibility ExtJS is compatible with the full range of IE browsers and other non-IE modern browsers. jquery UI has never considered the compatibility of earlier versions of ie browsers, so it is a contempt for attitude. Easy UI is based on jquery. jquery2.X and later versions no longer support IE6, 7, and 8. We have solemnly stated that, please refer to the official website and the latest easyUI version 1.3.3 uses jQuery2.0, because of the many HTML5 features, IE6 \ 7 \ 8 is no longer supported. Low versions are not compatible with a small number of versions. Please test the version when selecting the technology. In terms of compatibility, they all have flaws, depending on your degree of receipt.
License. EXTJS version 2.1 or later. Commercial use requires commercial authorization. jquery UI uses the MIT Protocol and is open-source. If jquery easyUI is commercially available, it must follow the license cial commercial license, that is, to purchase the right to use it.