jquery easyui DataGrid Usage Reference

Create a DataGrid

Add a div or table tag to the page, 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 ID ', striped:true, Fitcolumns:true, Singleselect:false, Rownumbers:true, Pagination:false, Nowra P:false, Pagesize:10, pagelist: [Ten, +, +,--], showfooter:true, columns: [[{field: ' CK ', checkbox:true}, {field: ' Journal name ', title: ' Journal name ', width:180, align: ' Left '}, {field: ' Category ', Title: ' Category ', width:150, align: ' Left '}, {field: ' Month ', title: ' Month ', width:100, align: ' Left '}, {field: ' Time ', title:  ' Time ', width:100, align: ' Left '}, {field: ' Price ', title: ' Price ', width:100, align: ' right '}, {field: ' Subscriptions ', Title: ' Subscriptions ', width:100, align: ' right '}, {field: ' Inventory ', Title: ' Stock Number ', width:100, align: ' right '}, {F            Ield: ' Mailing method ', Title: ' Mailing method ', width:80, align: ' Left '}, {field: ' Quantity ', Title: ' Quantity ', width:80, align: ' left ',        Editor: {        Type: ' Numberbox ', options: {min:0, precision:0            }}]], onbeforeload:function (param) {}, Onloadsuccess:function (data) { }, Onloaderror:function () {}, Onclickcell:function (RowIndex, field, value) {}});

The data format returned by the AJAX request

When the DataGrid is created, it requests data based on the URL, which is done through Ajax. The server should return data with the Rows property after the request has been processed, and if paging is used, the total attribute is required:

var rst = new {total = itotalcount, rows = entitylist};

When it comes to Ajax requests, there is a need to pass in some query conditions at the time of the request, and I usually add a query condition to the Onbeforeload event:

Onbeforeload:function (param) {    var bId = $ ("#txtBId"). Val ();    var Allsearchkey = $ ("#txtAllSearchKey"). Val ();    Param.bid = bId;    Param. Allsearchkey = Allsearchkey;}

Pagination processing

If you want to enable paging, in the DataGrid configuration, first add the following configuration:

Pagination:true,

As a result, a paging toolbar appears at the bottom of our DataGrid.

At this time, the DataGrid will automatically add paging information when requesting data:

• Page: page number of the current request
• Rows: Number of rows to display per page

The two parameter values are obtained on the server side, and then the data is processed by getting the total number of rows in the database.

About the checkbox column

The above JS code created by the DataGrid itself has added a checkbox column, which is the first column. The checkbox column will be self-adapting to the width.

{field: ' CK ', checkbox:true},

About RowNumber Columns

The configuration of the RowNumber column is set globally, and a column is added to display the line number if set to true.

Rownumbers:true

Implementation of the line editing function

The DataGrid itself provides the ability to edit rows. It only takes two steps:

1. Setting the editor property of a column
2. Manually triggering edits

In the first step, we need to indicate in the column configuration that Editor,editor has two properties, type and options, and 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, simply assign the type string to editor.

Editor: ' Text '

The second step, we need to listen to the DataGrid Onrowclick event, or Oncellclick event, I prefer to listen to Oncellclick event, you can click on different fields to enter the editing mode, and set the cell edit control focus.

Onclickcell:function (RowIndex, field, value) {    beginediting (rowIndex, field, value)}

The Beginediting method is called here:

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 (' V        Alidaterow ', 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 formatted output formatter

Set formatter in the breeding of the column

Formatter:function (value, row, index) {    if (row.user) {        return row.user.name;    } else {        return value;
   }}

Using the toolbar

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 the CardView effect

The CardView effect is this:

CardView's Code:

var CardView = $.extend ({}, $.fn.datagrid.defaults.view, {renderrow:function (target, fields, frozen, RowIndex, Rowda        TA) {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]] + ' &            Lt;/p> ');        } cc.push (' </div> ');        } cc.push (' </td> ');    Return Cc.join ("); }}); $ (function () {$ (' #tt '). DataGrid ({View:cardview});});

CardView is actually using the DataGrid's view configuration, overriding its default Renderrow method. Based on this implementation, we can display more styles of view.

jquery easyui DataGrid Usage Reference