This article describes the use of the jquery Easyui DataGrid, as follows:
Creating a DataGrid
Add a div or table tag to the page and then use jquery to get the tag and initialize a DataGrid. The code is as follows:
div tags on the page:
<div id= "Magazinegrid" >
</div>
JS Code:
$ (' #magazineGrid '). DataGrid ({height:340, url: ' url ', method: ' POST ', queryparams: {' id ': id}, IDfield: ' Product I
D ', Striped:true, Fitcolumns:true, Singleselect:false, Rownumbers:true, Pagination:false, Nowrap:false, Pagesize:10, PageList: [Ten, M, MB,], showfooter:true, columns: [[{field: ' CK ', checkbox:tr UE}, {field: ' title ', Title: ' Magazine name ', width:180, align: ' Left '}, {field: ' Category ', Title: ' Category ', width:150, align: ' lef T '}, {field: ' Month ', title: ' Month ', width:100, align: ' Left '}, {field: ' Time ', title: ' Period ', width:100, align: ' lef T '}, {field: ' Price ', title: ' Price ', width:100, align: ' right '}, {field: ' Subscriptions ', title: ' Subscriptions ', width:100, align: ' Right '}, {field: ' Inventory ', Title: ' Inventory ', width:100, align: ' right '}, {field: ' Mailing Way ', Title: ' Mailing method ', width:80, a
Lign: ' Left '}, {field: ' Quantity ', Title: ' Quantity ', width:80, align: ' Left ', editor: {type: ' Numberbox ',
Options: {min:0, precision:0}}]], onbeforeload:function (param) {}, Onloadsuccess:func
tion (data) {}, Onloaderror:function () {}, Onclickcell:function (RowIndex, field, value) {}
});
Data format returned by Ajax request
The DataGrid requests data based on the URL after it is created, which is done through Ajax. The server should return data with the rows attribute upon completion of the request processing, and the total attribute is required if paging is used:
var rst = new {total = itotalcount, rows = entitylist};
When it comes to Ajax requests, it's inevitable to pass in some query conditions at the time of the request, and I usually add the query criteria to the Onbeforeload event:
Onbeforeload:function (param) {
var bId = $ ("#txtBId"). Val ();
var Allsearchkey = $ ("#txtAllSearchKey"). Val ();
Param.bid = bId;
Param. Allsearchkey = Allsearchkey;
}
Page-handling
If you want to enable paging, in the DataGrid configuration, first add the following configuration:
So we'll have a paging toolbar at the bottom of our DataGrid.
At this time, the DataGrid automatically adds paging information when requesting data:
- Page: The page number of the current request
- Rows: Number of lines to display per page
The two parameter values are obtained on the server side, and data processing is done by getting the total number of rows in the database.
About CheckBox Columns
The above JS code created by the DataGrid itself has added a checkbox column, which is the first column. The checkbox column will be adaptive to the width.
{field: ' CK ', checkbox:true},
About RowNumber Columns
The configuration of the RowNumber column is set globally, and if set to true, a column is added to display the line number.
Implementation of line Edit function
The DataGrid itself provides the function of row editing. Only two steps are required:
1. Set the editor property of the column
2. Manually trigger edits
As a first step, we need to indicate in the column configuration that Editor,editor has two properties, type and options, and that valid type strings are:
Text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree
Options correspond to the specific configuration of these controls, including events.
Editor: {
type: ' Numberbox ',
options: {
min:0,
precision:0
}
}
If you do not need a special options configuration, assign the type string directly to editor.
In the second step, we need to monitor the Onrowclick event of the DataGrid, or the Oncellclick event, and I prefer to listen to Oncellclick events, enter edit mode according to the different fields clicked, and set the focus of the cell edit control.
Onclickcell:function (RowIndex, field, value) {
beginediting (rowIndex, field, value)
}
This calls the Beginediting method:
var editindex = undefined;
var beginediting = function (rowIndex, field, value) {if (Field!= "Quantity") return;
if (RowIndex!= editindex) {if (endediting ()) {$ (' #magazineGrid '). DataGrid (' BeginEdit ', rowIndex);
Editindex = RowIndex;
var ed = $ (' #magazineGrid '). DataGrid (' Geteditor ', {index:rowindex, field: ' Quantity '});
$ (ed.target). focus (). Bind (' blur ', function () {endediting ();
});
else {$ (' #magazineGrid '). DataGrid (' SelectRow ', editindex); "}} var endediting = function () {if (Editindex = = undefined) {return true} if ($ (' #magazineGrid '). DataGrid (' VA
Lidaterow ', Editindex) {var ed = $ (' #magazineGrid '). DataGrid (' Geteditor ', {index:editindex, field: ' Quantity '});
var number = $ (ed.target). Numberbox (' GetValue ');
$ (' #magazineGrid '). DataGrid (' GetRows ') [editindex][' quantity '] = number;
$ (' #magazineGrid '). DataGrid (' EndEdit ', editindex);
$ (' #magazineGrid '). DataGrid (' SelectRow ', editindex); Editindex = Undefined
return true;
else {return false;
}
}
Column format Output formatter
Set formatter in the mating of a column
Formatter:function (value, row, index) {
if (row.user) {return
row.user.name;
} else {return
value;
}
}
Working with toolbars
Toolbar: [{
text: ' Add ',
iconcls: ' Icon-add ',
handler:function () {alert (' Add ')}
}, {
text: ' Cut ',
iconcls: ' Icon-cut ',
handler:function () {alert (' Cut ')}
}, '-', {
text: ' Save '
, Iconcls: ' Icon-save ',
handler:function () {alert (' Save '}}
],
Using CardView effects
The CardView effect is this:
Code for CardView:
var CardView = $.extend ({}, $.fn.datagrid.defaults.view, {renderrow:function (target),
Fields, Frozen, RowIndex, RowData) {var cc = []; Cc.push (' <td colspan= ' + fields.length + ' style= ' padding:10px 5px;border:0; "
> ');
if (!frozen) {var aa = rowData.itemid.split ('-');
var img = ' shirt ' + aa[1] + '. gif ';
Cc.push (' ');
for (var i = 0; i < fields.length i++) {var Copts = $ (target). DataGrid (' Getcolumnoption ', fields[i]);
Cc.push (' <p><span class= ' C-label ' > ' + copts.title + ':</span> ' + rowdata[fields[i]] + ' </p> ');
} cc.push (' </div> ');
} cc.push (' </td> ');
Return Cc.join (");
}
});
$ (function () {$ (' #tt '). DataGrid ({View:cardview});
CardView actually uses the view configuration of the DataGrid, overriding its default Renderrow method. Based on this implementation, we can display more styles of view.
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.