jQuery EasyUI DataGrid and Tree Plugin - Datagrid DataGrid

Extends from $.fn.panel.defaults. Overrides the default defaults with $.fn.datagrid.defaults.

The DataGrid displays data in a tabular format and provides rich support for selecting, sorting, grouping, and editing data. The design goal of the DataGrid is to reduce development time and not require developers to have specific knowledge. It is lightweight yet feature-rich. Its features include cell merging, multi-column headers, frozen columns and footers, and more.

Dependencies

• panel
• resizable
• linkbutton
• pagination

Usage

Create a DataGrid from an existing table element, defining columns, rows, and data in the HTML.

<table class="easyui-datagrid">
    <thead>
        <tr>
            <th data-options="field:'code'">Code</th>
            <th data-options="field:'name'">Name</th>
            <th data-options="field:'price'">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td><td>name1</td><td>2323</td>
        </tr>
        <tr>
            <td>002</td><td>name2</td><td>4612</td>
        </tr>
    </tbody>
</table>

Create a DataGrid with the <table> tag. The nested <th> tags define the columns in the table.

<table class="easyui-datagrid" style="width:400px;height:250px"
    data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    <thead>
        <tr>
            <th data-options="field:'code',width:100">Code</th>
            <th data-options="field:'name',width:100">Name</th>
            <th data-options="field:'price',width:100,align:'right'">Price</th>
        </tr>
    </thead>
</table>

You can also create a DataGrid using JavaScript.

<table id="dg"></table>

$('#dg').datagrid({
    url:'datagrid_data.json',
    columns:[[
        {field:'code',title:'Code',width:100},
        {field:'name',title:'Name',width:100},
        {field:'price',title:'Price',width:100,align:'right'}
    ]]
});

Query data with some parameters.

$('#dg').datagrid('load', {
    name: 'easyui',
    address: 'ho'
});

Update the front-end data after changing data on the server.

$('#dg').datagrid('reload');    // reload the current page data

DataGrid Properties

This property extends from the panel. Below are properties added for the DataGrid.

Column Properties

The columns of the DataGrid are an array object, where each element is also an array. The elements of the array are configuration objects that define the fields of each column.

Code Example:

columns:[[
    {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
    {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
    {title:'Item Details',colspan:4}
],[
    {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
    {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
    {field:'attr1',title:'Attribute',width:100},
    {field:'status',title:'Status',width:60}
]]

Editor

Override the default defaults by using $.fn.datagrid.defaults.editors.

Each editor has the following behaviors:

For example, the text editor (text editor) is defined as follows:

$.extend($.fn.datagrid.defaults.editors, {
    text: {
        init: function(container, options){
            var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
            return input;
        },
        destroy: function(target){
            $(target).remove();
        },
        getValue: function(target){
            return $(target).val();
        },
        setValue: function(target, value){
            $(target).val(value);
        },
        resize: function(target, width){
            $(target)._outerWidth(width);
        }
    }
});

DataGrid View

Override the default defaults by $.fn.datagrid.defaults.view.

The view is an object that tells the datagrid how to render rows. The object must define the following functions:

Events

This event extends from the panel, and the following are the events added for the datagrid.

Methods