JQuery Easy Ui dataGrid 數據表格

數據表格 - DataGrid

內容

• 概況 
• 使用方法 
• 數據表格屬性 
• 數據列屬性 
• 編輯 
• 數據視圖 
• 事件 
• 方法 

繼承$.fn.panel.defaults，使用$.fn.datagrid.defaults重載默認值。.

數據表格顯示的數據以表格的形式，並提供了豐富的選擇，排序，分組和編輯數據的支持。這個數據表格被設計以縮短開發時間，並要求開發商沒有具體的知識。它是輕量級的，功能豐富的。單元格合併，多列標題，凍結列和頁腳是其功能只是一小部分。

依賴組件（Dependencies）

• 佈局 - panel
• 縮放 - resizable
• 連接按鈕 -   linkbutton
• 分頁 - pagination

使用方法（Usage Example）

從現有的表單元素建立數據表格，定義在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>

經過<TABLE>標記建立的DataGrid。嵌套的<TH>標籤訂義的列的表。

<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>

使用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'}
    ]]
});

查詢數據填充數據表格。

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

數據更改與服務器交互，刷新當前數據。

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

數據表格屬性（DataGrid Properties）

屬性繼承控制面板，如下是數據表格獨有的屬性。

名稱	類型	描述	默認值
columns	array	數據表格列配置對象，查看列屬性以獲取更多細節。	undefined
frozenColumns	array	跟列屬性同樣，可是這些列固定在左邊，不會滾動。	undefined
fitColumns	boolean	設置爲true將自動使列適應表格寬度以防止出現水平滾動。	false
autoRowHeight	boolean	定義設置行的高度，根據該行的內容。設置爲false能夠提升負載性能。	true
toolbar	array,selector	數據表格頂部面板的工具欄。可能的值： 1）數組，每一個工具選項和連接按鈕相同。 2）選擇顯示的工具欄。 在一個<div>的標籤訂義工具欄: $('#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')} }] });	null
striped	boolean	設置爲true將交替顯示行背景。	false
method	string	請求遠程數據的方法類型。	post
nowrap	boolean	設置爲true，當數據長度超出列寬時將會自動截取。	true
idField	string	代表該列是一個惟一列。	null
url	string	一個用以從遠程站點請求數據的超連接地址。	null
loadMsg	string	當從遠程站點載入數據時，顯示的一條快捷信息。	Processing, please wait …
pagination	boolean	設置true將在數據表格底部顯示分頁工具欄。	false
rownumbers	boolean	設置爲true將顯示行數。	false
singleSelect	boolean	設置爲true將只容許選擇一行。	false
checkOnSelect	boolean	若是爲true，該複選框被選中/取消選中，當用戶點擊某一行上。若是爲false，該複選框僅檢查/取消選中，當用戶點擊徹底的複選框。 此屬性是1.3版本。	true
selectOnCheck	boolean	若是設置爲true，單擊一個複選框，將始終選擇行。若是爲false，不會選擇行選中該複選框。 此屬性是1.3版本。	true
pagePosition	string	定義的分頁欄的位置。可用的值有 'top','bottom','both'。 此屬性是可自1.3版本。	bottom
pageNumber	number	當設置分頁屬性時，初始化分頁碼。	1
pageSize	number	當設置分頁屬性時，初始化每頁記錄數。	10
pageList	array	當設置分頁屬性時，初始化每頁記錄數列表。	[10,20,30,40,50]
queryParams	object	當請求遠程數據時，發送的額外參數。 示例: $('#dg').datagrid({ queryParams: { name: 'easyui', subject: 'datagrid' } });	{}
sortName	string	當數據表格初始化時以哪一列來排序。	null
sortOrder	string	定義排序順序，能夠是'asc'或者'desc'（正序或者倒序）。	asc
remoteSort	boolean	定義是否經過遠程服務器對數據排序。	true
showFooter	boolean	定義是否顯示行底（若是是作統計表格，這裏能夠顯示總計等）。	false
rowStyler	function	返回樣式，如：'background:red'，function有2個參數： index：行索引，從0開始. row：對應於該行記錄的對象。 示例: $('#dg').datagrid({ rowStyler: function(index,row){ if (row.listprice>80){ return 'background-color:#6293BB;color:#fff;'; } } });
loader	function	定義如何從遠程服務器加載數據。返回false能夠取消該操做。這個函數接受如下參數： param: 參數對象傳遞到遠程服務器。 success(data): 回調函數將被調用成功檢索的數據。 error():回調函數將被調用失敗時檢索數據。	json loader
loadFilter	function	返回過濾的數據顯示。該函數須要一個參數'data'，表示原始數據。您能夠更改源數據的標準數據格式。此函數必須返回標準數據對象中包含的「total」和「rows」的屬性。 示例: // 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	定義當編輯一行時的編輯模式。	predefined editors
view	object	定義數據表格的視圖。	default view

 

列屬性（Column Properties）

數據表格的列是一個對象數組，即這個對象中的元素也是一個數組（js中數組是對象）。 對象數組中的每個元素都是可配置的對象，每一個可配置對象定義一個列。

 

示例:

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}
]]

名稱	類型	描述	默認值
title	string	列標題。	undefined
field	string	列字段。	undefined
width	number	列寬。	undefined
rowspan	number	代表一個單元格跨幾行。	undefined
colspan	number	代表一個單元格跨幾列。	undefined
align	string	代表如何對其列數據，可選值：'left'，'right'，'center'。	undefined
sortable	boolean	設置爲true容許對該列排序。	undefined
resizable	boolean	設置爲true容許該列被縮放。	undefined
hidden	boolean	設置爲true將隱藏列。	undefined
checkbox	boolean	設置爲true將顯示覆選框。	undefined
formatter	function	格式化單元格函數，有3個參數： value：字段的值。 rowData：行數據。 rowIndex：行索引。 示例: $('#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	單元格樣式函數，返回樣式字符串裝飾表格如'background:red'，function有3個參數： value：字段值。 rowData：行數據。 rowIndex：行索引。 示例: $('#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;'; } } } ]] });	undefined
sorter	function	T自定義字段排序函數，有2個參數： a：該列的第一個值。 b：該列的第二個值。 示例: $('#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); } } } ]] });	undefined
editor	string,object	代表編輯類型。若是屬性是字符串類型表示編輯類型，若是是對象則包含2個參數： type：字符串，編輯類型，可選值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。 options：對象，對象於編輯類型的編輯器屬性。	undefined

 

編輯器（Editor）

使用$.fn.datagrid.defaults.editors重載默認值。

 

每一個編輯器都有如下方法:

名稱	屬性	描述
init	container, options	初始化編輯器並返回目標對象。
destroy	target	註銷編輯器。
getValue	target	獲取編輯框的值。
setValue	target , value	設置編輯框的值。
resize	target , width	調整編輯器

以下代碼將定義一個文本編輯器:

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

數據表格視圖（DataGrid View）

使用$.fn.datagrid.defaults.view重載默認值。

視圖是一個告訴數據表格如何呈現行記錄的對象，對象必須定義如下方法:

名稱	屬性	描述
render	target, container, frozen	當數據載入時調用。 target: DOM對象，數據網格對象。 container: 行記錄容器。 frozen: 是否呈現固定容器。
renderFooter	target, container, frozen	這是一個可選函數用以展示行底。
renderRow	target, fields, frozen, rowIndex, rowData	這是一個可選函數，它能夠被render函數調用。
refreshRow	target, rowIndex	定義如何刷新指定的行。
onBeforeRender	target, rows	在視圖被呈現以前觸發。
onAfterRender	target	在視圖被程序以後觸發。

 

事件（Events）

事件繼承控制面板，如下是數據表格獨有的屬性。

名稱	屬性	描述
onLoadSuccess	data	當數據載入成功時觸發。
onLoadError	none	當載入遠程數據發生錯誤時觸發。
onBeforeLoad	param	在請求載入數據以前觸發，若是返回false將取消載入。
onClickRow	rowIndex, rowData	當用戶點擊行時觸發，參數以下： rowIndex：被點擊的行索引，從0開始。 rowData：對應於被點擊的行的記錄。
onDblClickRow	rowIndex, rowData	當用戶雙擊一行時觸發，參數以下： rowIndex：被點擊的行索引，從0開始。 rowData：對應於被點擊的行的記錄。
onClickCell	rowIndex, field, value	當用戶點擊單元格時觸發。
onDblClickCell	rowIndex, field, value	當用戶雙擊單元格時觸發。 示例: // 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(); } });
onSortColumn	sort, order	當用戶對列排序時觸發，參數以下： sort：排序字段名稱。 order：排序順序。
onResizeColumn	field, width	當用戶調整列寬時觸發。
onSelect	rowIndex, rowData	當用戶選擇一行是觸發，參數以下： rowIndex：被選擇的行索引，從0開始。 rowData：對應於被選擇行的記錄。
onUnselect	rowIndex, rowData	當用戶取消選擇一行時觸發，參數以下： rowIndex：被取消選擇的行索引，從0開始。 rowData：對應於被取消選擇行的記錄。
onSelectAll	rows	當用戶選擇全部行時觸發。
onUnselectAll	rows	當用戶取消選擇全部行時觸發。
onCheck	rowIndex,rowData	當用戶選中行時觸發，參數包含： rowIndex：選中行的索引，從0開始 rowData：選中的行對應的記錄 此屬性是1.3版本。
onUncheck	rowIndex,rowData	當用戶取消選中行時觸發，參數包含： rowIndex：取消選中行的索引，從0開始 rowData：未經檢查的行對應的記錄 此屬性是1.3版本。
onCheckAll	rows	當用戶檢查全部行時觸發。此屬性是1.3版本。
onUncheckAll	rows	用戶取消全部行時觸發。此屬性是1.3版本。
onBeforeEdit	rowIndex, rowData	當用戶開始編輯一行時觸發，參數以下： rowIndex：正在編輯的行索引，從0開始。 rowData：對應於正在編輯的行的記錄。
onAfterEdit	rowIndex, rowData, changes	當用戶編輯完成時觸發，參數以下： rowIndex：正在編輯的行索引，從0開始。 rowData：對應於正在編輯的行的記錄。 changes：被改變的字段內容，對應方式爲字段：值。
onCancelEdit	rowIndex, rowData	當用戶取消編輯行時觸發，參數以下： rowIndex：正在編輯的行索引，從0開始。 rowData：對應於正在編輯的行的記錄。
onHeaderContextMenu	e, field	當數據表格的列標題被鼠標右鍵單擊時觸發。
onRowContextMenu	e, rowIndex, rowData	當一行被鼠標右鍵單擊時觸發。

 

方法（Methods）

 

名稱	屬性	描述
options	none	返回屬性對象。
getPager	none	返回頁面對象。
getPanel	none	返回控制面板對象。
getColumnFields	frozen	返回列字段，若是設置了frozen屬性爲true，將返回固定列的字段名。 示例: var opts = $('#dg').datagrid('getColumnFields'); // get unfrozen columns var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns
getColumnOption	field	返回特定的列屬性。
resize	param	縮放和佈局。
load	param	載入並顯示第一頁的記錄，若是傳遞了'param'參數，它將會覆蓋查詢參數屬性的值。經過傳遞一些參數，一般作一個查詢，這個方法能夠被稱爲從服務器加載新數據。 $('#dg').datagrid('load',{ code: '01', name: 'name01' });
reload	param	重載記錄，跟'load'方法同樣可是重載的是當前頁的記錄而非第一頁。
reloadFooter	footer	重載行底記錄。 示例: // 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} ]);
loading	none	顯示載入狀態。
loaded	none	隱藏載入狀態。
fitColumns	none	讓列寬自動適應數據表格的寬度。
fixColumnSize	field	固定列尺寸。若是「field' 參數未指定，將全部列的大小固定。 示例: $('#dg').datagrid('fixColumnSize', 'name'); // fix the 'name' column size $('#dg').datagrid('fixColumnSize'); // fix all columns size
fixRowHeight	index	固定特定列的高度。若是「index' 參數未指定，將全部列的高度固定。
autoSizeColumn	field	自動調整列寬，以適應內容。此方法是1.3版本特有的。
loadData	data	載入本地數據，舊記錄將被移除。
getData	none	返回已載入數據。
getRows	none	返回當前頁的記錄。
getFooterRows	none	返回行底記錄。
getRowIndex	row	返回指定行的索引，row參數能夠是行記錄或者是一個id字段的值。
getChecked	none	返回全部行的複選框已被選中。此方法是1.3版本特有的。
getSelected	none	返回第一個被選擇的行記錄或null。
getSelections	none	返回全部被選擇的行，當沒有記錄被選擇時，將返回一個空數組。
clearSelections	none	取消全部的已選擇項。
selectAll	none	選擇全部頁面的行。
unselectAll	none	取消選擇全部頁面的行。
selectRow	index	選擇一行，行索引從0開始。
selectRecord	idValue	經過傳遞id參數來選擇一行。
unselectRow	index	取消選擇一行。
checkAll	none	檢查全部頁面的行。此方法是1.3版本特有的。
uncheckAll	none	取消檢查全部當前頁面的行。此方法是1.3版本特有的。
checkRow	index	檢查行，行索引從0開始。此方法是1.3版本特有的。
uncheckRow	index	取消檢查行，行索引從0開始。此方法是1.3版本特有的。
beginEdit	index	開始編輯一行。
endEdit	index	結束編輯。
cancelEdit	index	取消編輯。
getEditors	index	獲取指定行的編輯器，每一個編輯器有以下屬性： actions：編輯器能夠作的行爲。 target：目標編輯器jQuery對象。 field：字段名。 type：編輯器類型。
getEditor	options	獲取特定的編輯器，options參數有2個屬性： index：行索引。 field:字段名。 示例: // get the datebox editor and change its value var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'}); $(ed.target).datebox('setValue', '5/4/2012');
refreshRow	index	刷新一行。
validateRow	index	校驗指定的行，若是有效返回true。
updateRow	param	更新指定的行，param參數包含以下屬性： index：要更新的行索引。 row：新的行數據。 示例: $('#dg').datagrid('updateRow',{ index: 2, row: { name: 'new name', note: 'new note message' } });
appendRow	row	添加一行。 新的行會被添加到最後一個位置: $('#dg').datagrid('appendRow',{ name: 'new name', age: 30, note: 'some messages' });
insertRow	param	插入一個新行，param參數包含以下屬性： index：要插入的行索引，若是沒有定義則在最後面添加一個新行。 row：行數據。 示例: // 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' } });
deleteRow	index	刪除一行。
getChanges	type	獲取從最後一次提交開始的被修改的全部行，type參數代表修改的類型，可選值：inserted，deleted，updated等 。當沒有傳遞type參數時，返回全部被修改的行。
acceptChanges	none	提交全部修改的數據，提交後的數據將不能再修改或者回滾。
rejectChanges	none	回滾自建立以來或自上次調用AcceptChanges，全部的變化數據。
mergeCells	options	合併單元格，options參數包含以下屬性： index：行索引。 field：字段名。 rowspan：整合單元格要跨的行數。 colspan：整合單元格要跨的列數。
showColumn	field	顯示特定的列。
hideColumn	field	隱藏特定的列。

  1     /////////////////////////////////////////////  2 //初始化數據  3 function initGrid()  4  {  5 $('#grid').datagrid({  6 width:'100%',  7 height:'auto',  8 nowrap: true,  9 striped: true,  10 fitColumns:false,  11 url:'${contextPath}/cardGift/cardGift.do?method=getCardGiftList&activeId=${information.cardGiftActive.activeId}',  12  queryParams:queryParam,  13 remoteSort:false,  14 //Grid對應的主鍵列  15 idField:'',  16 singleSelect:true,  17  columns:[[  18 {field:'serial',title:'',width:15,checkbox:true},  19 {field:'activeName',title:'活動名稱',width:50,sortable:true},  20 {field:'giftGoodId',title:'贈品商品編碼',width:80},  21 {field:'goodsName',title:'商品名稱',width:120},  22 {field:'giftCodeTotal',title:'贈品碼生成數量',width:100},  23 {field:'genCodeNumber',title:'已生成贈品碼數量',width:100},  24 {field:'startTime',title:'贈品發放起始時間',width:125},  25 {field:'endTime',title:'贈品發放結束時間',width:125},  26 {field:'memo',title:'備註',width:120}  27  ]],  28 pagination:true,  29 rownumbers:true,  30  toolbar:[  31 '-',{  32 id:'btnClearSelections',  33 text:'修改活動商品',  34 iconCls:'icon-edit',  35 handler:function(){  36  editData();  37  }  38 },'-',{  39 id:'btnDel',  40 text:'刪除活動商品',  41 iconCls:'icon-no',  42 handler:function(){  43  deleteData();  44  }  45  },  46 '-',{  47 id:'btnClearSelections',  48 text:'清除選擇',  49 iconCls:'icon-cut',  50 handler:function(){  51 $('#grid').datagrid('clearSelections');  52 //設置選中值  53  document.addForm.reset();  54 $('#giftCodeTotal').val("0");  55 $('#memoData').html("");  56 $('#submitBtn').html("確認提交");  57 $('#submitBtn').attr('onclick',"addSubmit('insert');");  58  }  59  }],  60 onLoadError:function(){  61 XW_dialog.alert('','加載數據失敗！');  62  }  63  64  });  65  66 //設置分頁控件  67 var p = $('#grid').datagrid('getPager');  68  $(p).pagination(PAGE_TEMPLATE);  69  }  70  71  72 function editData(){  73 var row = $('#grid').datagrid("getSelections");  74 if($(row).length < 1 || $(row).length > 1)  75  {  76 XW_dialog.alert('',"請選擇要查看的記錄，只能選取單行！");  77 return ;  78  }  79 //設置默認選中  80 $('#goodsSelect').combogrid('grid').datagrid('selectRecord',row[0].giftGoodId);  81 $('#goodsSelect').hide();  82 //設置選中值  83 $('#giftCodeTotal').val(row[0].giftCodeTotal);  84 $('#memoData').html(row[0].memo);  85 $('#submitBtn').html("更新");  86 $('#submitBtn').attr('onclick',"addSubmit('update');");  87 $('#resetBtn').hide();  88  89  } 90 91 92 function deleteData(){ 93 var data = $('#grid').datagrid("getSelections"); 94 //刪除 95 var delurl = "${contextPath}/cardGift/cardGift.do?method=deleteCardGift&activeId="+data[0].activeId+"&giftGoodId="+data[0].giftGoodId; 96 //發送刪除請求 97 $.ajax({ 98 type: "POST", 99 dataType:'json', 100 url: delurl, 101 success: function(msg){ 102 if(msg.success) 103 { 104 //保存回調函數使用的數據 105 XW_dialog.addData('callbackData',msg.map); 106 //刪除成功 107 XW_dialog.tips(msg.errorMsg, 3); 108 deleteCallBack(); 109 } 110 else 111 { 112 XW_dialog.alert('',msg.errorMsg); 113 } 114 } 115 }); 116 } 117 118 119 //刪除記錄回調函數，默認調用刷新記錄方法， 120 function deleteCallBack(){ 121 reloadGrid("grid"); 122 } 123