JQuery Easy Ui DataGrid

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.

依賴

• panel
• resizable
• linkbutton
• pagination

用法示例

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>
11. <td>001</td<td>name1</td<td>2323</td
12. </tr
13. <tr>
14. <td>002</td<td>name2</td<td>4612</td
15. </tr
16. </tbody
17. </table

Create datagrid via <table> markup. The nested <th> tags define the columns on the table.

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

Create datagrid using javascript is also allowed.

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

1. $('#dg').datagrid({
2. url:'datagrid_data.json',
3. columns:[[
4. {field:'code',title:'Code',width:100},
5. {field:'name',title:'Name',width:100},
6. {field:'price',title:'Price',width:100,align:'right'}
7. ]]
8. });

Query data with some parameters.

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

After changing data to server, refresh the front data.

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

表格屬性

The properties extend from panel. below is the added properties for datagrid.

$('#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>

$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('edit')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('help')}
	}]
});

$('#dg').datagrid({
	data: [
		{f1:'value11', f2:'value12'},
		{f1:'value21', f2:'value22'}
	]
});

$('#dg').datagrid({
	queryParams: {
		name: 'easyui',
		subject: 'datagrid'
	}
});

$('#dg').datagrid({
	rowStyler: function(index,row){
		if (row.listprice>80){
			return 'background-color:#6293BB;color:#fff;';
		}
	}
});

// removing 'd' object from asp.net web service json output
$('#dg').datagrid({
	loadFilter: function(data){
		if (data.d){
			return data.d;
		} else {
			return data;
		}
	}
});

列屬性

The DataGrid Columns is an array object, which element is an array too. The element of element array is a config object, which defines every column field.

Code example:

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

$('#dg').datagrid({
	columns:[[
		{field:'userId',title:'User', width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});

$('#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;';
				}
			}
		}
	]]
});

$('#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[2] == b[2]){  
					if (a[0] == b[0]){  
						return (a[1]>b[1]?1:-1);  
					} else {  
						return (a[0]>b[0]?1:-1);  
					}  
				} else {  
					return (a[2]>b[2]?1:-1);  
				}  
			}  
		}
	]]
});

編輯器

Override defaults with $.fn.datagrid.defaults.editors.

Every editor has following actions:

For example, the text editor is defined as following:

1. $.extend($.fn.datagrid.defaults.editors, {
2. text: {
3. init: function(container, options){
4. var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
5. return input;
6. },
7. destroy: function(target){
8. $(target).remove();
9. },
10. getValue: function(target){
11. return $(target).val();
12. },
13. setValue: function(target, value){
14. $(target).val(value);
15. },
16. resize: function(target, width){
17. $(target)._outerWidth(width);
18. }
19. }
20. });

表格視圖

Override defaults with $.fn.datagrid.defaults.view.

The view is an object that will tell datagrid how to render rows. The object must defines the following functions:

事件

The events extend from panel, below is the added events for datagrid.

// 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();
	}
});

方法

var opts = $('#dg').datagrid('getColumnFields');	// get unfrozen columns
var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns

$('#dg').datagrid('load',{
	code: '01',
	name: 'name01'
});

// update footer row values and then refresh
var rows = $('#dg').datagrid('getFooterRows');
rows[0]['name'] = 'new name';
rows[0]['salary'] = 60000;
$('#dg').datagrid('reloadFooter');

// update footer rows with new data
$('#dg').datagrid('reloadFooter',[
	{name: 'name1', salary: 60000},
	{name: 'name2', salary: 65000}
]);

$('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size
$('#dg').datagrid('fixColumnSize');  // fix all columns size

// get the datebox editor and change its value
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');

$('#dg').datagrid('updateRow',{
	index: 2,
	row: {
		name: 'new name',
		note: 'new note message'
	}
});

$('#dg').datagrid('appendRow',{
	name: 'new name',
	age: 30,
	note: 'some messages'
});

// insert a new row at second row position
$('#dg').datagrid('insertRow',{
	index: 1,	// index start with 0
	row: {
		name: 'new name',
		age: 30,
		note: 'some messages'
	}
});