Jquery easyui datagrid usage reference

Source: Internet
Author: User
Create a datagrid

Add a div or table tag on the page, use jquery to obtain the tag, and initialize a datagrid. The Code is as follows:

Div labels on the page:

<div id="magazineGrid"></div>

Js Code:

$ ('# Magazinegri '). datagrid ({height: 340, url: 'url', method: 'post', queryParams: {'id': id}, idField: 'product id', striped: true, fitColumns: true, singleSelect: false, rownumbers: true, pagination: false, nowrap: false, pageSize: 10, pageList: [10, 20, 50,100,150,200], showFooter: true, columns: [[{field: 'ck ', checkbox: true}, {field: 'publication name', title: 'publication name', width: 180, align: 'left '}, {field: 'category', title: 'category', width: 150, align: 'left'}, {field: 'month', title: 'month', width: 100, align: 'left'}, {field: 'period sub', title: 'period sub', width: 100, align: 'left'}, {field: 'price', title: 'price', width: 100, align: 'right'}, {field: 'subscription size', title: 'subscription size', width: 100, align: 'right'}, {field: 'inventory number', title: 'inventory number', width: 100, align: 'right'}, {field: '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 ){}});

 

Data format returned by an ajax request

After the datagrid is created, it requests data based on the url. This is done through ajax. The server should return data with the rows attribute after processing the request. If pagination is used, the server also needs the total attribute:

var rst = new { total = iTotalCount, rows = entityList };

Speaking of ajax requests, it is inevitable that some query conditions need to be input during the request. I usually add query conditions in the onBeforeLoad event:

onBeforeLoad: function (param) {    var bId = $("#txtBId").val();    var AllSearchKey = $("#txtAllSearchKey").val();    param.bId = bId;    param.AllSearchKey = AllSearchKey;}

 

Paging

To enable paging, add the following configuration in the datagrid Configuration:

pagination: true,

In this way, a page Toolbar will appear at the bottom of our datagrid.

At this time, the datagrid automatically adds paging information when requesting data:

  • Page: page number of the current request
  • Rows: number of rows to be displayed on each page

Obtain the two parameter values on the server side, and then obtain the total number of data rows in the database to complete data processing.

 

Checkbox Columns

The datagrid created by the js Code above has already added the checkbox column, which is the first column. The checkbox column will be adaptive to the width.

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

 

About rownumber Columns

The rownumber column is configured globally. If it is set to true, a column is added to display the row number.

rownumbers: true

 

Implementation of the row editing function

The datagrid provides the row editing function. Two steps are required:

  1. Set the editor attribute of a column
  2. Manually trigger editing

In the first step, we need to specify the editor in the column configuration. The editor has two attributes: type and options. Valid type strings include:

Text, textarea, checkbox, numberbox, validatebox, datebox, combobox, combotree

Options corresponds to the specific configurations of these controls, including events.

editor: {    type: 'numberbox',    options: {        min: 0,        precision: 0    }}

If no special options configuration is required, you can directly assign the type string to the editor.

editor:'text'

Step 2: We need to listen to the onRowClick event or onCellClick event of the datagrid. I prefer to listen to the onCellClick event. You can click different fields to enter the editing mode, set the focus of the cell editing control.

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 () {$ ('# magazinegri '). datagrid ('ineinedit ', rowIndex); editIndex = rowIndex; var ed = $ (' # magazinegri '). datagrid ('geteditor', {index: rowIndex, field: 'quantity'}); iterator (ed.tar get ). focus (). bind ('blur', function () {endEditing () ;});} else {$ ('# magazinegri '). datagrid ('selectrow', editIndex) ;}} var endEditing = function () {if (editIndex = undefined) {return true} if ($ ('# magazinegri '). datagrid ('validaterow', editIndex) {var ed = $ ('# magazinegri '). datagrid ('getedit', {index: editIndex, field: 'quantity'}); var number = values (ed.tar get ). numberbox ('getvalue'); $ ('# magazinegri '). datagrid ('getrows ') [editIndex] ['qty'] = number; $ ('# magazinegri '). datagrid ('enabled', editIndex); $ ('# magazinegri '). datagrid ('selectrow', editIndex); editIndex = undefined; return true;} else {return false ;}}

 

Formatter of column formatting output

Set formatter in column Breeding

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

 

Use 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') }}],

 

Use CardView Effect

The cardView effect is as follows:

CardView 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('');            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]] + '</p>');            }            cc.push('</div>');        }        cc.push('</td>');        return cc.join('');    }});$(function () {    $('#tt').datagrid({        view: cardview    });});

CardView uses the view configuration of the datagrid and overwrites its default renderRow method. Based on this implementation, we can display more lateral views.

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.