jQuery EasyUI是一組基於jQuery的UI外掛集合體,而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富並且美觀的UI介面。開發者不需要編寫複雜的javascript,也不需要對css樣式有深入的瞭解,開發者需要了解的只有一些簡單的html標籤。
本經驗是 【jQuery EasyUI從入門到精通】系列教程的第2部分
工具/原料
膝上型電腦或是桌上型電腦
網際網路
jQuery EasyUI
方法/步驟
以下為Expand Row Form示例
Edit form in expanded row details(編輯表格以行細節的方式)
form{
margin:0;
padding:0;
}
.dv-table td{
border:0;
}
.dv-table input{
border:1px solid #ccc;
}
Expand Row Form,效果如下圖所示。
EasyUI Portal,This example shows how to build a simple portal system with floating panels.
這個案例展示如何建立一個簡單的門戶系統通過浮動面板。
.demo-rtl .portal-column-left{
padding-left: 10px;
padding-right: 10px;
}
.demo-rtl .portal-column-right{
padding-left:10px;
padding-right: 0;
}
var panels = [
{id:'p1',title:'Tutorials',height:200,collapsible:true,href:'portal_p1.html'},
{id:'p2',title:'Clock',href:'portal_p2.html'},
{id:'p3',title:'PropertyGrid',height:200,collapsible:true,closable:true,href:'portal_p3.html'},
{id:'p4',title:'DataGrid',height:200,closable:true,href:'portal_p4.html'},
{id:'p5',title:'Searching',href:'portal_p5.html'},
{id:'p6',title:'Graph',href:'portal_p6.html'}
];
function getCookie(name){
var cookies = document.cookie.split(';');
if (!cookies.length) return '';
for(var i=0; i var pair = cookies[i].split('='); if ($.trim(pair[0]) == name){ return $.trim(pair[1]); } } return ''; } function getPanelOptions(id){ for(var i=0; i if (panels[i].id == id){ return panels[i]; } } return undefined; } function getPortalState(){ var aa = []; for(var columnIndex=0; columnIndex<3; columnIndex++){ var cc = []; var panels = $('#pp').portal('getPanels', columnIndex); for(var i=0; i cc.push(panels[i].attr('id')); } aa.push(cc.join(',')); } return aa.join(':'); } function addPanels(portalState){ var columns = portalState.split(':'); for(var columnIndex=0; columnIndex var cc = columns[columnIndex].split(','); for(var j=0; j var options = getPanelOptions(cc[j]); if (options){ var p = $(' p.panel(options); $('#pp').portal('add',{ panel:p, columnIndex:columnIndex }); } } } } $(function(){ $('#pp').portal({ onStateChange:function(){ var state = getPortalState(); var date = new Date(); date.setTime(date.getTime() + 24*3600*1000); document.cookie = 'portal-state='+state+';expires='+date.toGMTString(); } }); var state = getCookie('portal-state'); if (!state){ state = 'p1,p2:p3,p4:p5,p6'; // the default portal state } addPanels(state); $('#pp').portal('resize'); }); EasyUI Portal案例,執行效果如下圖所示。 Pivot Grid,The PivotGrid allows you to quickly do a lot of reporting & analysis from a table of data. 透視網格允許你快速地對錶格資料進行大量的報告和分析。
The PivotGrid allows you to quickly do a lot of reporting & analysis from a table of data. .icon-load{ background:url('/tutorial/app/pivotgrid/load.png') no-repeat center center; } .icon-layout{ background:url('/tutorial/app/pivotgrid/layout.png') no-repeat center center; } .demo-rtl a.pivotgrid-item{ text-align: right; } $(function(){ load1(); }); function load1(){ $('#pg').pivotgrid({ url:'pivotgrid_data1.json', method:'get', pivot:{ rows:['Country','Category'], columns:['Color'], values:[ {field:'Price',op:'sum'}, {field:'Discount',op:'sum'} ] }, forzenColumnTitle:'Pivot Grid', valuePrecision:0, valueStyler:function(value,row,index){ if (/Discount$/.test(this.field) && value>100 && value<500){ return 'background:#D8FFD8' } } }) } function load2(){ $('#pg').pivotgrid({ url:'pivotgrid_data2.json', method:'get', pivot:{ rows:['form','name'], columns:['year'], values:[ {field:'gdp'}, {field:'oil'}, {field:'balance'} ] }, valuePrecision:3, valueStyler:function(value,row,index){ if (/balance$/.test(this.field) && value<0){ return 'background:pink' } } }) } Pivot Grid案例,執行效果圖如下圖所示。 jQuery EasyUI外掛依賴於JQuery,需要在easyui.min.js之前引入JQuery庫 除了引入easyui.min.js檔案之外,還引入相應的庫檔案。Pivot Grid
注意事項