You are on page 1of 14

DataGrid Contents

 Overview  Usage Example  DataGrid Properties  Column Properties  Editor  DataGrid View  Events  Methods
Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults. The datagrid displays data in a tabular format and offers rich support to select, sort, group and edit data. The datagrid has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich. Cell merging, multi-column headers, frozen columns and footers are just a few of its features.

Dependencies
   
panel resizable linkbutton pagination

Usage Example
Create datagrid from an existing table element, defining columns, rows, and data in html. 1. <table class="easyui-datagrid"> 2. <thead> 3. <tr> 4. <th data-options="field:'code'">Code</th> 5. <th data-options="field:'name'">Name</th> 6. <th data-options="field:'price'">Price</th> 7. </tr> 8. </thead> 9. <tbody> 10. <tr>

5. }). <th data-options="field:'name'. name: 'easyui'.width:100">Name</th> 7. </table> Create datagrid via <table> markup. address: 'ho' 4. <th data-options="field:'code'. }).11. columns:[[ 4.datagrid({ 2.title:'Price'. <td>002</td><td>name2</td><td>4612</td> 15. {field:'name'. <tr> 5. 1. 1.width:100}. </tr> 16. 1.json'. {field:'code'.datagrid('reload').width:100">Code</th> 6.width:100}. $('#dg'). below is the added properties for datagrid. $('#dg'). dataoptions="url:'datagrid_data. ]] 8. </tbody> 17.json'.singleSelect:true"> 3.width:100.width:100. Name Type Description Default . </thead> 10. </tr> 9. <td>001</td><td>name1</td><td>2323</td> 12. <tr> 14. 3. // reload the current page data DataGrid Properties The properties extend from panel. <thead> 4. {field:'price'.title:'Code'. <th dataoptions="field:'price'. 6. <table id="dg"></table> 1. Query data with some parameters. </tr> 13. url:'datagrid_data.align:'right'">Price</th> 8. 1. After changing data to server. refresh the front data. { 2. </table> Create datagrid using javascript is also allowed. The nested <th> tags define the columns on the table. 3.datagrid('load'.title:'Name'. <table class="easyui-datagrid" style="width:400px. $('#dg').align:'right'} 7.fitColumns:true.height:250px" 2.

{ iconCls: 'icon-help'. When 'right'. The data to be loaded.plain:true"/a> </div> undefined undefined fitColumns boolean false resizeHandle string right autoRowHeight boolean true toolbar array. Defines if set the row height based on the contents of that row. True to display data in one line.columns frozenColumns array array The datagrid columns config object. handler: function(){alert('edit')} }.'right'.2.selector null Define toolbar via array: $('#dg'). Indicate which field is an identity field.plain:true"/a> <a href="#" class="easyui-linkbutton" dataoptions="iconCls:'icon-help'. users can resize columns by dragging the right edge of column headers. The top toolbar of datagrid panel. The method type to request remote data. <div id="tb"> <a href="#" class="easyui-linkbutton" dataoptions="iconCls:'icon-edit'. This property is available since version 1. striped method nowrap idField url data boolean string boolean string string array.2. but the these columns will be frozen on left. A URL to request data from remote site. This property is available since version 1. see column properties for more details.3. false post true null null null .3.datagrid({ toolbar: '#tb' }). True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling.datagrid({ toolbar: [{ iconCls: 'icon-edit'. Resizing column position. etc.'both'. Set to false can improve loading performance. 2) a selector that indicate the toolbar.object True to stripe the rows. each tool options are same as linkbutton. Available value are: 'left'.'-'. Define toolbar within a <div> tag: $('#dg'). Possible values: 1) an array. Same as the columns property. handler: function(){alert('help')} }] }). Set to true can improve loading performance.

{} sortName sortOrder string string Defines which column can be sorted. True to allow selecting only one row. If false.'bottom'.3.'both'. null asc . When request remote data.datagrid({ data: [ f2:'value12'}.Code example: $('#dg').20. Defines the column sort order.40.50] queryParams object $('#dg'). This property is available since version 1. If true. When set pagination property. loadMsg pagination rownumbers singleSelect string boolean boolean boolean When loading data from remote site. This property is available since version 1.3.datagrid({ queryParams: { name: 'easyui'. clicking a checkbox will always select the row. This property is available since version 1. When set pagination property. True to show a row number column. {f1:'value21'. {f1:'value11'. sending additional parameters also. initialize the page number. the checkbox is checked/unchecked when the user clicks on a row. True to show a pagination toolbar on datagrid bottom. please wait … false false false checkOnSelect boolean true selectOnCheck boolean true pagePosition string bottom pageNumber pageSize pageList number number array 1 10 [10. Available values are: 'top'. initialize the page size selecting list.3. the checkbox is only checked/unchecked when the user clicks exactly on the checkbox. f2:'value22'} ] }). selecting a row will not check the checkbox.30. If false. Defines position of the pager bar. subject: 'datagrid' } }). initialize the page size. Code example: Processing. If set to true. can only be 'asc' or 'desc'. show a prompt message. When set pagination property.

This function takes following parameters: param: the parameter object to pass to remote server. The function take one parameter 'data' that indicate the original data. Defines if to show row footer. style:{'color:#fff'}}. Return false can abort this action. } } }).d.datagrid({ loadFilter: function(data){ if (data. The scrollbar width(when scrollbar is vertical) or height(when scrollbar is horizontal). error(): the callback function that will be called when failed to retrieve data. The function take two parameters: rowIndex: the row index. start with 0 rowData: the record corresponding to this row Code example: $('#dg').row){ if (row.datagrid({ rowStyler: function(index. This function must return standard data object that contain 'total' and 'rows' properties. . You can change original source data to standard data format.d){ return data. This property is available since version 1.'.net web service json output $('#dg').4. success(data): the callback function that will be called when retrieve data successfully. // return inline style // the function can return predefined css class and inline style // return {class:'r1'. Return style such as 'background:red'.3. Defines if to sort data from server.multiSort remoteSort showHeader showFooter scrollbarSize boolean boolean boolean boolean number Defines if to enable multiple column sorting. json loader loadFilter function Code example: // removing 'd' object from asp.color:#fff. Return the filtered data to display. false true true false 18 rowStyler function loader function Defines how to load data from remote server.listprice>80){ return 'background-color:#6293BB. Defines if to show row header.

This property is available since version 1. Indicate how to align the column header. 'left'. If not assigned.'right'.sortable:true}.width:60} 10. No width definition will reduce performance. Indicate how many columns a cell should take up. Defines the view of datagrid.'center' can be used.[ 6. which defines every column field.sortable:true}. the header alignment is same as data alignment defined via 'align' property. 9.'right'. The column field name.align:'right'. 4. number number string halign string sortabl e boolean . Code example: 1.width:100}.width:80. ]] Defaul t undefin ed undefin ed undefin ed undefin ed undefin ed undefin ed undefin ed undefin ed Name title field Type string string The column title text. {field:'listprice'. which element is an array too.width:80.sortable:true}. {field:'status'. 8. {field:'productid'. {field:'itemid'. Possible values are: 'left'.colspan:4} 5.title:'Attribute'. ].width:80.'center'. {field:'unitcost'. Indicate how many rows a cell should take up. True to allow the column can be sorted.rowspan:2.} else { } } return data. If not defined. {title:'Item Details'.sortable:true}. editors view object object Defines the editor when editing a row. predefined editors default view Column Properties The DataGrid Columns is an array object.title:'Unit Cost'. 7. }).align:'right'. Description width rowspa n colspan align number The width of column.title:'Status'.2.title:'Item ID'. columns:[[ 2.width:80.title:'List Price'. The element of element array is a config object. Indicate how to align the column data. {field:'attr1'. 3.title:'Product ID'.rowspan:2. the width will auto expand to fit its contents.3.

width:80.datagrid({ columns:[[ undefin ed undefin ed undefin ed undefin ed undefin ed formatt er function {field:'userId'. True to show a checkbox. Code example: $('#dg').index){ if (row. rowIndex: the row index.3. formatter: function(value.name. The function take three parameter: value: the field value. True to allow the column can be resized. True to hide the column. undefin ed The cell styler function. return style string to custom the cell style such as 'background:red'. rowData: the row record data. styler: function(value. This property is available since version 1.2.user){ return row. rowIndex: the row index. {field:'listprice'.index){ if (value < 20){ return 'background-color:#ffee00.row. undefin ed sorter function The custom field sort function that used to do local sorting. rowData: the row record data.user. True to prevent from adjusting width when 'fitColumns' is set to true.title:'User'. The checkbox column has fixed width. Code example: $('#dg').datagrid({ columns:[[ styler function align:'right'.style:'color:red'} } } } ]] }). take two parameters: undefin ed .'. width:80. } } } ]] }).color:red. The cell formatter function.title:'List Price'. } else { return value.order resizab le fixed hidden checkb ox string boolean boolean boolean boolean The default sort order.row. take three parameters: value: the field value. can only be 'asc' or 'desc'. // the function can return predefined css class and inline style // return {class:'c1'.

align:'cente sorter:function(a. value target . When string indicates the edit type.obj ect Indicate the edit type. b = b. Resize the editor if necessary. when object contains two properties: type: string.editors.split('/').numberbox.width:80.sortable:true. text: { .validatebox. {field:'date'. Get value from editor text.extend($. { 2.datagrid.fn. Set value for editor. } else { return (a[0]>b[0]?1:-1).textarea. Destroy the editor if necessary.defaults. the edit type.datebox.datagrid. columns: [[ r'. } else { (a[2]>b[2]?1:-1).checkbox.editors. width Description Initialize the editor and return the target object. if (a[2] == b[2]){ if (a[0] == return (a[1]>b[1]?1:-1). the text editor is defined as following: 1. Code example: $('#dg'). Every editor has following actions: Name init destroy getValue setValue resize Parameters container. $. options: object.comb obox.datagrid({ remoteSort: false. undefin ed Editor Override defaults with $. b: the second field value.split('/'). editor string. the editor options corresponding to the edit type. For example. possible type is: text. options target target target .a: the first field value.defaults.title:'Date'.b){ a = a.combotree.fn. } } } } return b[0]){ ]] }).

_outerWidth(width). 6.view. init: function(container. container: the rows container. 13. resize: function(target. frozen renderFooter renderRow refreshRow onBeforeRender onAfterRender target. }.val(). container. DataGrid View Override defaults with $. rowData target. rowIndex target. below is the added events for datagrid. fields. The object must defines the following functions: Name Parameters Description Called when the data is loaded.val(value). width){ 17. 15. frozen: indicate if to render the frozen container. }.remove(). setValue: function(target. 9. value){ 14. 7. getValue: function(target){ 11. Fires before the view is rendered.3. Fires before a request is made to load data. } 20. }. render target. target: DOM object. options){ var input = $('<input type="text" class="datagrid-editableinput">'). This is an option function and will be called by render function. frozen. If . 4. 12. } 19. destroy: function(target){ 8. }). Fires after the view is rendered.defaults. $(target).datagrid. The view is an object that will tell datagrid how to render rows. This is an option function to render row footer. $(target). 5.fn. rows target Events The events extend from panel. rowIndex. Defines how to refresh the specified row. return $(target). the datagrid object. }. $(target). 18. container. frozen target. 10. 16. Fires when some error occur to load remote data.appendTo(container). return input. Name onLoadSuccess onLoadError onBeforeLoad Parameters data none param Description Fires when data is loaded successfully.

Fires when user unselect all rows. the parameters contains: onResizeColumn field. index). width onSelect rowIndex. rowData onSelectAll onUnselectAll rows rows onCheck rowIndex. onClickRow rowIndex. start with 0 rowData: the record corresponding to the unselected row Fires when user select all rows. start with 0 rowData: the record corresponding to the clicked row Fires when user click a cell.rowData onUncheck rowIndex. Code example: // when double click a cell.field.value){ $(this).target). the parameters contains: rowIndex: the clicked row index. start with 0 rowData: the record corresponding to the checked row This event is available since version 1.3.datagrid('beginEdit'. Fires when user dblclick a cell. Fires when user select a row. Fires when user check a row. value onDblClickCell rowIndex. rowData onDblClickRow rowIndex. the parameters contains: rowIndex: the unselected row index.rowData . var ed = $(this). Fires when user uncheck a row. field.focus(). the parameters contains: rowIndex: the checked row index. begin editing and make the editor get focus $('#dg').field:field}). {index:index. value onSortColumn sort. $(ed. the parameters contains: rowIndex: the selected row index.datagrid('getEditor'.datagrid({ onDblClickCell: function(index. the parameters contains: rowIndex: the clicked row index. rowData onUnselect rowIndex. start with 0 rowData: the record corresponding to the selected row Fires when user unselect a row. Fires when user click a row.return false the load action will be canceled. start with 0 rowData: the record corresponding to the clicked row Fires when user dblclick a row. } }). the parameters contains: sort: the sort column field name order: the sort column order Fires when user resize the column. order Fires when user sort a column. field. rowData onClickCell rowIndex.

Usually do a query by passing some parameters. changes onCancelEdit rowIndex. Fires when a row is right clicked. Fires when user uncheck all rows. start with 0 rowData: the record corresponding to the unchecked row This event is available since version 1. Return the panel object. Code example: getColumnFields frozen var opts = $('#dg'). onCheckAll onUncheckAll rows rows Fires when user check all rows.datagrid('load'.{ load param . this method can be called to load new data from server. onBeforeEdit rowIndex. start with 0 rowData: the record corresponding to the editing row changes: the changed field/value pairs Fires when user cancel editing a row. rowData Methods Name options getPager getPanel Parameter none none none Description Return the options object.3.rowIndex: the unchecked row index. start with 0 rowData: the record corresponding to the editing row Fires when user finish editing.datagrid('getColumnFields'). field e. Load and show the first page rows. start with 0 rowData: the record corresponding to the editing row Fires when the header of datagrid is right clicked. rowData. $('#dg'). Fires when user start editing a row. rowIndex. // get unfrozen columns var opts = $('#dg'). Do resize and do layout. Return the column fields. it will replace with the queryParams property. Return the pager object.datagrid('getColumnFields'. This event is available since version 1. true). the parameters contains: rowIndex: the editing row index.3.3. the parameters contains: rowIndex: the editing row index. If frozen setted to true the frozen column fields is returned. rowData onAfterEdit rowIndex. // get frozen columns getColumnOption resize field param Return the specified column option. If the 'param' is specified. This event is available since version 1. the parameters contains: rowIndex: the editing row index. rowData onHeaderContextMenu onRowContextMenu e.

2. Return the first selected row record or null. Return all rows where the checkbox has been checked. This method is available since version 1. Return all selected rows.2. salary: 60000}. Hide loading status. Freeze the specify row that will always be displayed at the top when the datagrid is scrolled down. adjusts the column width to fit the contents. Scroll to the specified row.datagrid('getFooterRows'). code: '01'. Code examples: // update footer row values and then refresh var rows = $('#dg'). fixColumnSize field Code example: $('#dg'). This method is available since version 1. when no record selected. the row parameter can be a row record or an id field value. // fix all columns size fixRowHeight index Fix the specified row height.3. // update footer rows with new data $('#dg').3.datagrid('reloadFooter'. If 'field' parameter is not assigned.datagrid('fixColumnSize'). This method is available since version 1. Return the current page rows.3.3. {name: 'name2'. reloadFooter footer loading loaded fitColumns none none none Display loading status. name: 'name01' reload param Reload the rows. Reload the footer rows.datagrid('reloadFooter'). If 'index' parameter is not assigned. rows[0]['salary'] = 60000. Return the specified row index. Return the footer rows. all columns size will be fixed. am empty array will return. Fix columns size. Load local data. Clear all selections. 'name'). This method is available since freezeRow index autoSizeColumn loadData getData getRows getFooterRows getRowIndex getChecked getSelected getSelections clearSelections clearChecked scrollTo field data none none none row none none none none none index . salary: 65000} ]). Return the loaded data. This method is available since version 1.}). all rows height will be fixed.[ {name: 'name1'. rows[0]['name'] = 'new name'. Make columns auto expand/collapse to fit datagrid width. // fix the 'name' column size $('#dg'). the old rows will be removed. $('#dg'). Clear all checked rows. Same as the 'load' method but stay on current page.datagrid('fixColumnSize'.

same as the editor definition. Select a row.datagrid('updateRow'. Get the specified row editors.3. the row index start with 0. Uncheck a row. Each editor has the following properties: actions: the actions that the editor can do.'combobox'. Cancel editing a row. getEditor options Code example: // get the datebox editor and change its value var ed = $('#dg'). Unselect all current page rows.target).'datebox'. row: { name: 'new name'. Update the specified row. row: the new row data. This method is available since version 1. This method is available since version 1.3. highlightRow selectAll unselectAll selectRow selectRecord unselectRow checkAll uncheckAll checkRow uncheckRow beginEdit endEdit cancelEdit index none none index idValue index none none index index index index index Highlight a row. note: 'new note message' } }). Check a row.3. Unselect a row. field: the field name. etc. End editing a row. {index:1. type: the editor type.3. $(ed. This method is available since version 1. '5/4/2012').3. This method is available since version 1. . Get the specified editor. Code example: updateRow param $('#dg'). This method is available since version 1. validate the specified row. field: the field name. Uncheck all current page rows.datebox('setValue'. Check all current page rows.3. Begin editing a row. the row index start with 0. the param contains following properties: index: the row index to be updated. such as 'text'.field:'birthday'}). Select a row by passing id value parameter.3. getEditors index refreshRow validateRow index index Refresh a row. the row index start with 0. target: the target editor jQuery object.3.version 1.datagrid('getEditor'. the options contains two properties: index: the row index. Select all current page rows. return true when valid.{ index: 2.

Hide the specified column. Get changed rows since the last commit. Merge some cells to one cell. Display the specified column.updated. note: 'some messages' } }). When the type parameter is not assigned.{ name: 'new name'.datagrid('appendRow'. // index start with 0 row: { name: 'new name'. deleteRow index Delete a row. The type parameter indicate which type changed rows. if not defined.datagrid('insertRow'. return all changed rows. Insert a new row.Append a new row. Rolls back all the changes data since it was created.etc. The new row will be added to the last position: appendRow row $('#dg'). Commits all the changes data since it was loaded or since the last time acceptChanges was called. the param contains following properties: index: the row index to insert into. Code examples: insertRow param // insert a new row at second row position $('#dg'). possible value is: inserted.{ index: 1. getChanges type acceptChanges rejectChanges none none mergeCells options showColumn hideColumn field field . rowspan: the rowspan count to be merged. note: 'some messages' }). row: the row data. colspan: the colspan count to be merged. append the new row. or since the last time acceptChanges was called. age: 30.deleted. age: 30. the options contains following properties: index: the row index. field: the field name.