JQuery Easyui's DataGrid

Source: Internet
Author: User

1. Dynamic creation of the 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:

(1) Adding div tags to the page

<id= "DataGrid"></div>

(2) dynamic initialization with JS:

$(function () {        $(' #dataGrid '). DataGrid ({height:340, URL:' <%=path%>/admincenter/sysfunction/getdatatogird ', Method:' POST ',//queryparams: {' Functioncode ': Functioncode},//IDfield: ' Functional coding ',Striped:true, Fitcolumns:true, Singleselect:false, Rownumbers:true, pagination:false, nowrap:false, PageSize:PageList: [Ten, +, +,--], Showfooter:true, Columns: [[{field:' CK ', checkbox:true}, {field:' Functioncode ', title: ' Function code ', width:180, align: ' left '}, {field:' FunctionName ', title: ' Function name ', width:150, align: ' left '}]], Onbeforeload:function(param) {}, Onloadsuccess:function(data) {}, Onloaderror:function() {}, Onclickcell:function(RowIndex, field, value) {}}); })

(3) or page fixed write dead

<Tableclass= "Easyui-datagrid"title= "Basic DataGrid"style= "width:700px;height:250px"data-options= "Singleselect:true,collapsible:true,url: ' <%=path%>/admincenter/sysfunction/getdatatogird ', Method: ' Get ' ">    <thead>        <TR>            <thdata-options= "field: ' Functioncode ', width:80">function encoding</th>            <thdata-options= "field: ' FunctionName ', width:100">Feature name</th>        </TR>    </thead></Table>
2. 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 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:

function (param) {    var functioncode= $ ("#txtFunctionCode"). Val ();
param. Functioncode= functioncode; }
3, pagination processing

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

true,

A paging toolbar will appear at the bottom of our DataGrid, and the DataGrid will automatically add paging information when requesting data:

(1) Page: the page number of the current request, (2) rows: The 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.

4. CheckBox column

Add the following columns in the initialized columns. The checkbox column will be self-adapting to the width.

true },
5. RowNumber column

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

True
6, line editing function implementation

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

(1) Setting the editor property of a column

(2) Manual trigger Edit

[1] 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.

{field: ' Quantity ', Title: ' Quantity ', width:80, align: ' left ',     Editor: {         ' numberbox ',         options: {             
    0,             0         }      }}

If you do not need a special options configuration, simply assign the type string to editor.

Editor: ' Text '

[2], we need to listen to the DataGrid Onrowclick event, or Oncellclick event, I would like to listen to Oncellclick events, you can click on different fields to enter the editing mode, and set the cell edit control focus.

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")Returnif (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 (var ed = $ ( ' #magazineGrid '). DataGrid ( ' Geteditor ', {index:editindex, field: var number = $ (ed.target). Numberbox ( ' GetValue '); $ ( ' #magazineGrid '). DataGrid ( ' getRows ') [Editindex][ "number '] = number; $ ( ' #magazineGrid '). DataGrid ( ' EndEdit ', Editindex); $ ( Span style= "Color:maroon;" > ' #magazineGrid '). DataGrid ( ' SelectRow ', editindex); editindex = undefined; return true; } else {return false;}}       
7. Column formatted output formatter

Set formatter in the breeding of the column

function (value, row, index) {    if (row.user) {        return row.user.name;    else {        return value;    }}   
8. Using the toolbar
toolbar: [{    ' add ',    ' Icon-add ',    function () {alert (' Add ')}}, {     ' cut ',    ' icon-cut ',    function () {alert (' Cut '-') {    ' save    ', ' Icon-save ',    function () {alert (' save ') ) }}],
9. Using CardView effect

The CardView effect is this:

CardView's Code:

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 ('  <div style= "float:left;margin-left:20px;" > '); 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]] +  </td>"); Span style= "color:blue;" >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's DataGrid

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.