基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页Portal界面拖拽(Ⅵ)

上篇《基于WebForm+EasyUI的业务管理系统形成之旅 -- 构建Web界面》，主要介绍系统界面布局、导出数据等。

本篇将介绍首页Portal界面拖拽。 

一、首页Portal界面拖拽效果

---

 效果对比，如下图所示。

具体实现代码

 //在一起的用，分割，不在一起的用：分割
            var local = 'p1,p4,p2:p3';
            if ($.cookie("panelStates")) {
                local = $.cookie("panelStates");
            }
            function getPanelById(id) {
                for (var i = 0; i < panels.length; i++) {
                    if (panels[i].id == id) {
                        return panels[i];
                    }
                }
                return undefined;
            }
            //渲染panel
            function renderPanel() {
                var cols = local.split(":");
                for (var i = 0; i < cols.length; i++) {
                    var rows = cols[i].split(",");
                    for (var j = 0; j < rows.length; j++) {
                        var op = getPanelById(rows[j]);
                        var p = $('<div><div/>').attr('id', op.id).appendTo('body');
                        p.panel(op);
                        portal.portal('add', {
                            panel: p,
                            columnIndex: i
                        });
                    }
                }
            }
            renderPanel();
            portal.portal('resize');

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