DataGrid (data table) component [3]

This lesson focuses on how the DataGrid (data table) component is used in Easyui, which relies on
Panel, resizeable (resizing), LinkButton (button), pageination (pagination) components.

A Style settings

Style settings
$ (' #box '). DataGrid ({
URL: ' user.php ',
Title: ' User List ',
WIDTH:500,
Iconcls: ' Icon-search ',
Striped:true,
Nowrap:true,
Fitcolumns:true,
Columns: [[
{
Field: ' User ',
Title: ' Account Number ',
Sortable:true,
Align: ' center ',
HAlign: ' Center ',
Resizable:false,
Hidden:false,
Formatter:function (Value,row,index) {
Return ' [' + value + '] ';
},
Styler:function (Value,row,index) {
if (value = = ' Li Tinghui ') {
Return ' Background-color:orange ';
}
},
},
{
Field: ' Email ',
Title: ' Mail ',
Sortable:true,
Sorter:function (A, b) {
Console.log (A + ' | ' + b);
},
},
{
Field: ' Date ',
Title: ' Registration Time ',

Sortable:true,
},
]],
Data: [
{
User: ' Crayon little New ',
Email: ' [email protected] ',
Date: ' 2014-10-1 ',
},
],
Loadmsg: ' Trying to unfold ... ',
Rownumbers:true,
Singleselect:true,
Pagination:true,
IDfield: ' id ',
Pagesize:10,
PageList: [10, 20, 30, 40],
Pagenumber:1,
Sortname: ' Date ',
SortOrder: ' DESC ',
Showheader:true,
Showfooter:true,
SCROLLBARSIZE:20,
Rowstyler:function (index, row) {
if (Row.user = = ' Lord of the Rings ') {
You can also return a CSS class name directly.
Return ' Background-color:orange ';
}
},
});

DataGrid (data table) component [3]