Source:

-- Learning not just technology, but dreams!

Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks

jQuery EasyUI Tutorial

jQuery EasyUI Tutorial

jQuery EasyUI Introduction

• jEasyUI Applications
  • jEasyUI Create CRUD Application
  • jEasyUI Create CRUD DataGrid
  • jEasyUI Form CRUD Application
  • jEasyUI Create RSS Reader
• jEasyUI Drag and Drop
  • jEasyUI Basic Drag and Drop
  • jEasyUI Create Drag and Drop Shopping Cart
  • jEasyUI Create School Timetable
• jEasyUI Menu and Button
  • jEasyUI Create Simple Menu
  • jEasyUI Create Link Button
  • jEasyUI Create Menu Button
  • jEasyUI Create Split Button
• jEasyUI Layout
  • jEasyUI Create Border Layout
  • jEasyUI Create Complex Layout
  • jEasyUI Create Accordion
  • jEasyUI Create Tabs
  • jEasyUI Dynamically Add Tabs
  • jEasyUI Add Auto-play Tabs
  • jEasyUI Create XP-style Left Panel
• jEasyUI DataGrid
  • jEasyUI Convert HTML Table to DataGrid
  • jEasyUI Get Selected Row Data
  • jEasyUI Add Search Functionality
  • jEasyUI Add Toolbar
  • jEasyUI Create Complex Toolbar
  • jEasyUI Set Frozen Columns
  • jEasyUI Dynamically Change Columns
  • jEasyUI Format Columns
  • jEasyUI Set Sorting
  • jEasyUI Custom Sorting
  • jEasyUI Create Column Groups
  • jEasyUI Add Checkboxes
  • jEasyUI Custom Pagination
  • jEasyUI Enable Row Editing
  • jEasyUI Extend Editors
  • jEasyUI Column Calculation
  • jEasyUI Merge Cells
  • jEasyUI Create Custom View
  • jEasyUI Create Footer Summary
  • jEasyUI Conditional Row Background Color
  • jEasyUI Create PropertyGrid
  • jEasyUI Expand Row Details
  • jEasyUI Create SubGrid
  • jEasyUI Display Massive Data
  • jEasyUI Add Pagination Component
• jEasyUI Window
  • jEasyUI Create Simple Window
  • jEasyUI Custom Window Toolbar
  • jEasyUI Window and Layout
  • jEasyUI Create Dialog
  • jEasyUI Custom Dialog
• jEasyUI Tree
  • jEasyUI Create Tree with Markup
  • jEasyUI Create Async Tree
  • jEasyUI Tree Add Nodes
  • jEasyUI Create Tree with Checkboxes
  • jEasyUI Tree Drag and Drop Control
  • jEasyUI Tree Load Parent/Child Nodes
  • jEasyUI Create Basic TreeGrid
  • jEasyUI Create Complex TreeGrid
  • jEasyUI TreeGrid Dynamic Load
  • jEasyUI TreeGrid Add Pagination
  • jEasyUI TreeGrid Lazy Load Nodes
• jEasyUI Form
  • jEasyUI Create Async Submit Form
  • jEasyUI Form Validation
  • jEasyUI Create Tree ComboBox
  • jEasyUI Format ComboBox
  • jEasyUI Filter ComboBox DataGrid
• jEasyUI Reference Manual

jQuery EasyUI Plugins

jQuery EasyUI Extensions

jQuery EasyUI Form – Filter ComboBox DataGrid (ComboGrid)

jQuery EasyUI Extensions

Deep Dive

Software Utilities

Word Processing Software

Software

Programming

Technical Reference Information

Web Services

Programming Languages

Computer Science

Scripting

Web Service

jQuery EasyUI DataGrid and Tree Plugins - Datagrid

jQuery EasyUI Plugins

Extends from $.fn.panel.defaults. Overrides default defaults via $.fn.datagrid.defaults.

The datagrid displays data in a tabular format and provides rich support for selecting, sorting, grouping, and editing data. The datagrid is designed to reduce development time and does not require developers to have specific knowledge. It is lightweight but feature-rich. Its features include cell merging, multi-column headers, frozen columns and footers, etc.

Dependencies

• panel
• resizable
• linkbutton
• pagination

Usage

Create a datagrid from an existing table element, defining columns, rows, and data in 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 using the <table> tag. 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

These properties extend from panel. Below are the properties added for the datagrid.

Name	Type	Description	Default
columns	array	The configuration object for the datagrid columns. For more details, see the Column Properties.	undefined
frozenColumns	array	Same as the column property, but these columns will be frozen on the left.	undefined
fitColumns	boolean	Set to true to automatically expand or shrink the column size to fit the grid width and prevent horizontal scrolling.	false
resizeHandle	string	Adjust the column position. Available values: 'left', 'right', 'both'. When set to 'right', users can adjust the column by dragging the right edge of the column header. This property is available since version 1.3.2.	right
autoRowHeight	boolean	Defines whether to set the row height based on the row content. Setting to false can improve loading performance.	true
toolbar	array,selector	The header toolbar of the datagrid panel. Possible values: 1. Array, each tool option is the same as linkbutton. 2. Selector, just the toolbar. Define toolbar inside a <div> tag: $('#dg').datagrid({ toolbar: '#tb' }); <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a> </div> Define toolbar via array: $('#dg').datagrid({ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('edit')} },'-',{ iconCls: 'icon-help', handler: function(){alert('help')} }] });	null
striped	boolean	Set to true to stripe the rows. (i.e., use different background colors for odd and even rows)	false
method	string	The method type to request remote data.	post
nowrap	boolean	Set to true to display data in one line. Setting to true can improve loading performance.	true
idField	string	Indicates which field is the identifier field.	null
url	string	The URL to request data from a remote site.	null
data	array,object	The data to load. This property is available since version 1.3.2. Code example: $('#dg').datagrid({ data: [ {f1:'value11', f2:'value12'}, {f1:'value21', f2:'value22'} ] });	null
loadMsg	string	The message displayed when loading data from a remote site.	Processing, please wait …
pagination	boolean	Set to true to show the pagination toolbar at the bottom of the datagrid.	false
rownumbers	boolean	Set to true to show the row number column.	false
singleSelect	boolean	Set to true to allow only one row to be selected.	false
checkOnSelect	boolean	If set to true, when the user clicks a row, it will select/deselect the checkbox. If set to false, the checkbox is only selected/deselected when the user clicks the checkbox itself. This property is available since version 1.3.	true
selectOnCheck	boolean	If set to true, clicking the checkbox will select the row. If set to false, selecting the row will not select the checkbox. This property is available since version 1.3.	true
pagePosition	string	Defines the position of the pagination bar. Available values: 'top', 'bottom', 'both'. This property is available since version 1.3.	bottom
pageNumber	number	Initial page number when the pagination property is set.	1
pageSize	number	Initial page size when the pagination property is set.	10
pageList	array	Initial page size selection list when the pagination property is set.	[10,20,30,40,50]
queryParams	object	Additional parameters sent when requesting remote data. Code example: $('#dg').datagrid({ queryParams: { name: 'easyui', subject: 'datagrid' } });	{}
sortName	string	Defines the sortable column.	null
sortOrder	string	Defines the sort order of the column, can only be 'asc' or 'desc'.	asc
multiSort	boolean	Defines whether to enable multi-column sorting. This property is available since version 1.3.4.	false
remoteSort	boolean	Defines whether to sort data from the server.	true
showHeader	boolean	Defines whether to show the row header.	true
showFooter	boolean	Defines whether to show the row footer.	false
scrollbarSize	number	The scrollbar width (when the scrollbar is vertical) or the scrollbar height (when the scrollbar is horizontal).	18
rowStyler	function	Returns a style string such as 'background:red'. This function requires two parameters: rowIndex: The index of the row, starting from 0. rowData: The corresponding record of the row. Code example: $('#dg').datagrid({ rowStyler: function(index,row){ if (row.listprice>80){ return 'background-color:#6293BB;color:#fff;'; // return inline style // the function can return predefined css class and inline style // return {class:'r1', style:{'color:#fff'}}; } } });
loader	function	Defines how to load data from a remote server. Return false to cancel the action. This function has the following parameters: param: The parameter object to pass to the remote server. success(data): The callback function called when data retrieval is successful. error(): The callback function called when data retrieval fails.	json loader
loadFilter	function	Returns the filtered data to display. This function has one parameter 'data', representing the raw data. You can transform the raw data into a standard data format. This function must return a standard data object containing 'total' and 'rows' properties. Code example: // removing 'd' object from asp.net web service json output $('#dg').datagrid({ loadFilter: function(data){ if (data.d){ return data.d; } else { return data; } } });
editors	object	Defines the editors for editing rows.	predefined editors
view	object	Defines the view of the datagrid.	default view

Column Properties

The DataGrid column is an array object, and each of its elements is also an array. The elements of the element array are configuration objects that define the field for 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}
]]

Name	Type	Description	Default
title	string	The title text of the column.	undefined
field	string	The field name of the column.	undefined
width	number	The width of the column. If not defined, the width will automatically expand to fit its content. Not defining width will reduce performance.	undefined
rowspan	number	Indicates how many rows a cell occupies.	undefined
colspan	number	Indicates how many columns a cell occupies.	undefined
align	string	Indicates how to align the data in this column, can be 'left', 'right', 'center'.	undefined
halign	string	Indicates how to align the header of this column. Possible values: 'left', 'right', 'center'. If no value is assigned, the header alignment will be the same as the data alignment defined by the 'align' property. This property is available since version 1.3.2.	undefined
sortable	boolean	Set to true to allow this column to be sorted.	undefined
order	string	The default sort order, can only be 'asc' or 'desc'. This property is available since version 1.3.2.	undefined
resizable	boolean	Set to true to allow this column to be resized.	undefined
fixed	boolean	Set to true to prevent resizing when 'fitColumns' is set to true.	undefined
hidden	boolean	Set to true to hide this column.	undefined
checkbox	boolean	Set to true to show a checkbox. The checkbox has a fixed width.	undefined
formatter	function	The formatting function for the cell, requires three parameters: value: The value of the field. rowData: The record data of the row. rowIndex: The index of the row. Code example: $('#dg').datagrid({ columns:[[ {field:'userId',title:'User', width:80, formatter: function(value,row,index){ if (row.user){ return row.user.name; } else { return value; } } } ]] });	undefined
styler	function	The style function for the cell, returns a style string to customize the cell's style, such as 'background:red'. This function requires three parameters: value: The value of the field. rowData: The record data of the row. rowIndex: The index of the row. Code example: $('#dg').datagrid({ columns:[[ {field:'listprice',title:'List Price', width:80, align:'right', styler: function(value,row,index){ if (value < 20){ return 'background-color:#ffee00;color:red;'; // the function can return predefined css class and inline style // return {class:'c1',style:'color:red'} } } } ]] });	undefined
sorter	function	A custom field sorting function for local sorting, requires two parameters: a: The first field value. b: The second field value. Code example: $('#dg').datagrid({ remoteSort: false, columns: [[ {field:'date',title:'Date',width:80,sortable:true,align:'center', sorter:function(a,b){ a = a.split('/'); b = b.split('/'); if (a == b){ if (a == b){ return (a>b?1:-1); } else { return (a>b?1:-1); } } else { return (a>b?1:-1); } } } ]] });	undefined
editor	string,object	Indicates the edit type. When it is a string, it refers to the edit type. When it is an object, it contains two properties: type: String, the edit type. Possible types: text, textarea, checkbox, numberbox, validatebox, datebox, combobox, combotree. options: Object, the editor options corresponding to the edit type.	undefined

Editors

Overrides default defaults via $.fn.datagrid.defaults.editors.

Each editor has the following behaviors:

Name	Parameters	Description
init	container, options	Initialize the editor and return the target object.
destroy	target	Destroy the editor if necessary.
getValue	target	Get the value from the editor's text.
setValue	target , value	Set the value to the editor.
resize	target , width	Resize the editor if necessary.

For example, the 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

Overrides default defaults via $.fn.datagrid.defaults.view.

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

Name	Parameters	Description
render	target, container, frozen	Called when data is loaded. target: DOM object, the datagrid object. container: The container for rows. frozen: Indicates whether to render the frozen container.
renderFooter	target, container, frozen	This is an optional function for rendering the row footer.
renderRow	target, fields, frozen, rowIndex, rowData	This is an optional function that will be called by the render function.
refreshRow	target, rowIndex	Defines how to refresh a specific row.
onBeforeRender	target, rows	Triggered before the view is rendered.
onAfterRender	target	Triggered after the view is rendered.

Events

These events extend from panel. Below are the events added for the datagrid.

Name	Parameters	Description
onLoadSuccess	data	Triggered when data is loaded successfully.
onLoadError	none	Triggered when some error occurs while loading remote data.
onBeforeLoad	param	Triggered before the request to load data is sent. If false is returned, the loading action will be canceled.
onClickRow	rowIndex, rowData	Triggered when the user clicks a row. Parameters include: rowIndex: The index of the clicked row, starting from 0. rowData: The record corresponding to the clicked row.
onDblClickRow	rowIndex, rowData	Triggered when the user double-clicks a row. Parameters include: rowIndex: The index of the double-clicked row, starting from 0. rowData: The record corresponding to the double-clicked row.
onClickCell	rowIndex, field, value	Triggered when the user clicks a cell.
onDblClickCell	rowIndex, field, value	Triggered when the user double-clicks a cell. Code example: // when double click a cell, begin editing and make the editor get focus $('#dg').datagrid({ onDblClickCell: function(index,field,value){ $(this).datagrid('beginEdit', index); var ed = $(this).datagrid('getEditor', {index:index,field:field}); $(ed.target).focus(); } });