Using Easyui to generate data tables for JSON data

1. You first need to use script to introduce jquery and Easyui files. ：

The 2.html page is set up as follows:

The properties set in Data-options can be defined according to your needs, whether it is a single choice, whether you set paging, and so on.

3. Introduce the Easyui CSS style.

4. Use the Ajax method to load the data.

Note: In a successful callback function, bind the data to the box with the page ID DG.

5. Configure the DataGrid method:

function floadtable () {
$ (' #dg '). DataGrid ({
Title: ' User List ',
width:700,
HEIGHT:300,
Fitcolumns:true,

Corresponds to each column in the JSON data
Columns: [[{
Field: ' ID ',//name of each column
Width: ' 100 ',
Title: ' ID ',
Checkbox:true
},{
Field: ' Flag ',
Title: ' Position ',
Width: ' 100 ',
Align: ' center '
}, {
Field: ' UserName ',
Title: ' Name ',
Width: ' 100 ',
Align: ' center ',
},{
Field: ' Gender ',
Title: ' Gender ',
Width: ' 100 ',
Align: ' center ',
},{
Field: ' Email ',
Title: ' Mailbox ',
Width: ' 100 ',
Align: ' center ',
}
] ],
IDfield: ' id ',
Loadmsg: ' Processing, please wait ... ',
Pagination:true
});
}

6. Finally call these two functions.

7. Effects

Here is my JSON data:

Using Easyui to generate data tables for JSON data