上篇《基於WebForm+EasyUI的業務管理系統形成之旅 -- 構建Web界面》，主要介紹系統界面布局、導出數據等。
本篇將介紹首頁Portal界面拖拽。
一、首頁Portal界面拖拽效果
效果對比，如下圖所示。
具體實現代碼
1 //在一起的用，分割，不在一起的用：分割
2 var local = 'p1,p4,p2:p3'; 3 if ($.cookie("panelStates")) { 4 local = $.cookie("panelStates"); 5 } 6 function getPanelById(id) { 7 for (var i = 0; i < panels.length; i++) { 8 if (panels[i].id == id) { 9 return panels[i]; 10 } 11 } 12 return undefined; 13 } 14 //渲染panel
15 function renderPanel() { 16 var cols = local.split(":"); 17 for (var i = 0; i < cols.length; i++) { 18 var rows = cols[i].split(","); 19 for (var j = 0; j < rows.length; j++) { 20 var op = getPanelById(rows[j]); 21 var p = $('<div><div/>').attr('id', op.id).appendTo('body'); 22 p.panel(op); 23 portal.portal('add', { 24 panel: p, 25 columnIndex: i 26 }); 27 } 28 } 29 } 30 renderPanel(); 31 portal.portal('resize');
實現隨用戶自己定義首頁功能區塊位置。