jQuery EasyUI是一組基於jQuery的UI插件集合體,而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富並且美觀的UI界面。開發者不需要編寫複雜的javascript,也不需要對css樣式有深入的瞭解,開發者需要了解的只有一些簡單的html標籤。
本經驗是 【jQuery EasyUI從入門到精通】系列教程的第20部分,在第19部分基礎上,繼續講述 jQuery EasyUI Web Demos之DataGrid(數據表格)。
工具/原料
筆記本電腦或是臺式機
互聯網
jQuery EasyUI
DataGrid(數據表格)
方法/步驟
Context Menu on DataGrid(數據表格DataGrid中的語境菜單),Right click on the header of DataGrid to display context menu(右擊數據報告頭部以顯示語境菜單).
案例HTML基本結構如下所示:
Context Menu on DataGrid
Right click on the header of DataGrid to display context menu.
Context Menu on DataGrid(數據表格DataGrid中的語境菜單),Javascript代碼如下所示:
$(function(){
$('#dg').datagrid({
url: 'datagrid_data1.json',
method: 'get',
title: 'Context Menu on DataGrid',
iconCls: 'icon-save',
width: 700,
height: 250,
fitColumns: true,
singleSelect: true,
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:120},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:250},
{field:'status',title:'Status',width:60,align:'center'}
]],
onHeaderContextMenu: function(e, field){
e.preventDefault();
if (!cmenu){
createColumnMenu();
}
cmenu.menu('show', {
left:e.pageX,
top:e.pageY
});
}
});
});
var cmenu;
function createColumnMenu(){
cmenu = $('
').appendTo('body');cmenu.menu({
onClick: function(item){
if (item.iconCls == 'icon-ok'){
$('#dg').datagrid('hideColumn', item.name);
cmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-empty'
});
} else {
$('#dg').datagrid('showColumn', item.name);
cmenu.menu('setIcon', {
target: item.target,
iconCls: 'icon-ok'
});
}
}
});
var fields = $('#dg').datagrid('getColumnFields');
for(var i=0; i var field = fields[i]; var col = $('#dg').datagrid('getColumnOption', field); cmenu.menu('appendItem', { text: col.title, name: field, iconCls: 'icon-ok' }); } } Context Menu on DataGrid(數據表格DataGrid中的語境菜單),運行效果如下圖所示。 Master Detail,Expand row in DataGrid to show details(在數據表格裡擴展行以顯示細節),Click the expand button to expand row and view details.
Item ID | Product ID | List Price | Unit Cost | Attribute | Status |
---|
$(function(){
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '
';},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
ddv.panel({
height:80,
border:false,
cache:false,
href:'datagrid21_getdetail.php?itemid='+row.itemid,
onLoad:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
});
Expand row in DataGrid to show details(在數據表格裡擴展行以顯示細節),運行效果如下圖所示。
SubGrid,Expand row in DataGrid to show subgrid(在數據表格中擴展行以顯示子表格)。Click the expand button to expand row and view subgrid.
HTML基本結構如下所示:
Item ID | Product ID | List Price | Unit Cost | Attribute | Status |
---|