基于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             //渲染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');

实现随用户自己定义首页功能区块位置。