8.1、創建DataGrid
html代碼
<table id="dg"></table>
$("#dg").datagrid({
// url: "datagrid_data.json",
data: [
{ "code": "001", "name": "Name 1", "addr": "Address 11", "col4": "col4 data" },
{ "code": "002", "name": "Name 2", "addr": "Address 13", "col4": "col4 data" },
{ "code": "003", "name": "Name 3", "addr": "Address 87", "col4": "col4 data" },
{ "code": "004", "name": "Name 4", "addr": "Address 63", "col4": "col4 data" },
{ "code": "005", "name": "Name 5", "addr": "Address 45", "col4": "col4 data" },
{ "code": "006", "name": "Name 6", "addr": "Address 16", "col4": "col4 data" },
{ "code": "007", "name": "Name 7", "addr": "Address 27", "col4": "col4 data" },
{ "code": "008", "name": "Name 8", "addr": "Address 81", "col4": "col4 data" },
{ "code": "009", "name": "Name 9", "addr": "Address 69", "col4": "col4 data" },
{ "code": "010", "name": "Name 10", "addr": "Address 78", "col4": "col4 data" }
],
width: 400,
height: 400,
columns: [[{
title: "編號",
field: "code",
width: 100
}, {
title: "名稱",
field: "name",
width: 100
}, {
title: "地址",
field: "addr",
width: 100
}, {
title: "col4",
field: "col4",
width: 100
}]]
});
也可以這樣使用：
$("#dg").datagrid({
url: "datagrid_data.json",
width: 400,
height: 400,
columns: [[{ title: "編號",field: "code",width: 100 },
{ title: "名稱", field: "name",width: 100 },
{ title: "地址", field: "addr", width: 100},
{ title: "col4", field: "col4", width: 100
}]]
});
通過上面的代碼我們發現,配置一個簡單grid非常簡單,使用columns屬性定義列，只需要按照columns定義的格式給定json數據就能完成顯示
8.2、toolbar
定義toolbar 有兩種方式
1、先定義好linkbutton，然后再通過id引用進來
$('#dg').datagrid({
toolbar: '#tb'
});
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
</div>
2通過數組方式進行配置
$('#dg').datagrid({
toolbar: [{iconCls: 'icon-edit',handler: function(){alert('edit')}}
,'-',{iconCls: 'icon-help',handler: function(){alert('help')}}]
});
"-",這個符號表示在兩個button間添加一個分隔符
8.3、Column屬性說明
title:列顯示名
field:列隱藏名
width:寬
rowspan:跨行
colspan:跨列
align:數據顯示位置,'left','right','center'
halign:列標題顯示位置,'left','right','center'
sortable:是否允許排序
order:排序方式 ,'asc' 、 'desc'.
resizable:是否允許調整大小
hidden:隱藏改列
checkbox:是否顯示復選框
formatter:設置列樣式 ,value、rowData、rowIndex 是fn的三個參數
style:定制單元格樣式value、rowData、rowIndex 是fn的三個參數
sorter:自定義排序
8.4、DataGrid 屬性說明
columns:列配置對象
frozenColumns:配置固定在左邊的列對象
fitColumns:列自動適應寬高
resizeHandle:重新調整列寬度的位置默認右邊, 'left','right','both'
autoRowHeight:行高是否自動
toolbar:定義工具欄,定義功能欄有兩種方式處理見(7.*)
striped:是否隔行變色
method:以什么類型的方法請求遠程數據,默認post
nowrap:是否一行顯示,默認為true
idField:指定標示字段
url:數據請求地址
data:定義數據
loadMsg:加載時顯示的文字,默認是"Processing, please wait … "
pagination:是否顯示分頁條
rownumbers:是否顯示行號
singleSelect:單選模式
checkOnSelect:復選框選擇則選擇該行
selectOnCheck:該行選中的同時選中復選框
pagePosition:分頁工具條顯示位置,'top','bottom','both'.
pageNumber:默認顯示的多少頁
pageSize:每頁顯示條數,
pageList:可選的每頁顯示條數,例如:[10,20,30,40,50],
queryParams:請求數據帶的額外參數
sortName:指定排序列
sortOrder:指定排序方式 ，默認asc,'asc' 、 'desc'.
remoteSort:如果是服務器數據則進行排序
showHeader:是否顯示表頭
showFooter:定義是否顯示頁腳
rowStyler:定義行樣式
8.5、dataGrid常用方法
load:從服務器加載新數據,如果有參數則會替代QueryParams的參數
reload:根據上次"load"的參數，重新加載數據
loading:顯示加載狀態
loaded:隱藏加載狀態
getData:得到加載到的數據
getRows:返回當前頁的所有rows
getRowIndex:返回指定行的index
getChecked:返回所有復選框被選中的行
getSelected：返回選中項
getSelections:返回所有選中項
clearSelections:清除所有選中項
clearChecked:清除所有被選中的復選框
selectAll:選擇全部
unselectAll:取消全選
selectRow:選擇一行，行索引從0開始。
8.6、dataGrid常見事件
onLoadSuccess:數據加載成功
onLoadError:數據加載錯
onBeforeLoad:數據加載前
onClickRow:點擊一行觸發
onDblClickRow:雙擊一行觸發
onClickCell:點擊一個單元格觸發
onDblClickCell:雙擊單元觸發
onSelect:選擇一行觸發
onCheck:復選框選中后觸發
8.7、editDateGrid(可編輯表格)
可編輯表格與普通表格使用大致相同，只是可編輯表格需要給每個單元格指定一個編輯對象即可
editor: {
type: "text",
options: {
required: true
}
}
指定編輯對象后，我們還需要使用beginEdit方法開始一個編輯。同時也使endEdit方法結束一個編輯
$("#dg").datagrid("beginEdit", rowIndex);
$("#dg").datagrid("endEdit", lastIndex);
8.8、添加頁腳
要使用頁腳，需要使用showFooter:true設置顯示頁腳，然后在數據里面添加名稱為footer的數據數組。
rows: [{ "code": "001",
"name": "Name 1",
"addr": "Address 11",
"col4": "col4 data" }]
footer: [{
"name": "400",
"addr": "天河區"
}]
8.9、創建自定義視圖
創建自定義視圖的時候需要繼承 $.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:在視圖被呈現之前觸發。
onAfterRender:在視圖被程序之后觸發。
繼承$.fn.datagrid.defaults.view后，重寫了renderRow方法來定義每一行的顯示樣子
var renderView = $.extend({}, $.fn.datagrid.defaults.view, {
renderRow: function (target, fields, frozen, rowIndex, rowData) {
var cc = [];
cc.push("<td colspan=" + fields.length + ">");
if (!frozen) {
cc.push('<img src="adders.png" style="height:150px;float:left">');
cc.push('<div style="float:left;margin-left:20px;">');
for (var i = 0; i < fields.length; i++) {
var copts = $(target).datagrid('getColumnOption', fields[i]);
cc.push('<p><span class="c-label">' + copts.title + ':</span> ' + rowData[fields[i]] + '</p>');
}
cc.push('</div>');
}
cc.push("</td>");
return cc.join("");
}
});
8.10、PropertyGrid(屬性表格)
用法
使用標簽創建一個屬性表格。注意：列已經內置不需要再去聲明它。
<table id="pg" class="easyui-propertygrid" style="width:300px"
data-options="url:'get_data.php',showGroup:true,scrollbarSize:0"></table>
使用Javascript創建一個屬性表格。
<table id="pg" style="width:300px"></table>
$('#pg').propertygrid({
url: 'get_data.php',
showGroup: true,
scrollbarSize: 0
});
追加一個新行到屬性表格。
var row = {
name:'AddName',
value:'',
group:'Marketing Settings',
editor:'text'
};
$('#pg').propertygrid('appendRow',row);
行數據
屬性表格擴展自datagrid(數據表格)。它的行數據格式和數據表格相同。作為一個屬性行，以下字段是必須的：
name：字段名稱。
value：字段值。
group：分組字段值。
editor：在編輯屬性值的時候使用的編輯器對象。
行數據示例：
{"total":4,"rows":[
{"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},
{"name":"Address","value":"","group":"ID Settings","editor":"text"},
{"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},
{"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{
"type":"validatebox",
"options":{
"validType":"email"
}
}}
]}
屬性：
showGroup:定義是否顯示特性組。
groupField:定義組的字段名。
groupFormatter:定義如何格式化組的值。
方法:
expandGroup(groupIndex):展開指定組。沒有’groupIndex‘參數，展開所有組。
collapseGroup(groupIndex):折疊指定組。沒有‘groupIndex’參數，折疊所有組。
8.11、combogrid(數據表格下拉框)
$('#cc1').combogrid({
panelWidth: 310,
value: '006',
idField: 'id',
textField: 'name',
columns: [[
{ field: 'id', title: 'Id', width: 60 },
{ field: 'name', title: '姓名', width: 100 },
{ field: 'age', title: '年齡', width: 120 },
]],
data: [
{ "id": "001", "name": "Name 1", "age": "11" },
{ "id": "002", "name": "Name 2", "age": "13" },
{ "id": "003", "name": "Name 3", "age": "87" },
{ "id": "004", "name": "Name 4", "age": "63" },
{ "id": "005", "name": "Name 5", "age": "45" },
{ "id": "006", "name": "Name 6", "age": "16" },
{ "id": "007", "name": "Name 7", "age": "27" },
]
});
<select id="cc1" class="easyui-combogrid" name="dept" style="width:250px;"
></select>
自動完成功能
讓我們為數據表格下拉框控件添加高級的自動完成功能。下拉數據表格會根據用戶輸入顯示適合的結果。
$('#cc1').combogrid({
delay: 500,
mode: 'remote',
url: 'get_data.php',
idField: 'id',
textField: 'name',
columns: [[
{field:'code',title:'Code',width:120,sortable:true},
{field:'name',title:'Name',width:400,sortable:true}
]]
});
在服務器端，參數'q'必須先檢索。用戶可以查詢數據庫，然后返回一個SQL查詢結果的JSON格式給瀏覽器。
get_data.php:
$q = isset($_POST['q']) ? $_POST['q'] : ''; // the request parameter
// query database and return JSON result data
$rs = mysql_query("select * from item where name like '$q%'");
echo json_encode(...);
轉載地址:
http://www.cnblogs.com/yxlblogs/archive/2013/12/11/3468921.html