基于WebForm+EasyUI的業務管理系統形成之旅 -- 首頁Portal界面拖拽(Ⅵ)

上篇《基于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             //渲染panel15             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: i26                         });27                     }28                 }29             }30             renderPanel();31             portal.portal('resize');

實現隨用戶自己定義首頁功能區塊位置。