Detailed jquery easyui DataGrid usage Reference _jquery

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:

Pagination:true,

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.

Rownumbers:true

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.

Editor: ' Text '

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.