B\S备忘录05——团控

    忙了三天，终于是给我们系统做出一个新的功能了。

    一直在改Bug，基本上算是熟悉了javascript怎么写的了，还有一些会用但是不知道是什么的玩意，暂时统统归到JS里了，以后看他们到底是啥玩意- -。

    幸好有前面改这些Bug的积累，不然让我写出这个控制页面的JS实在是困难啊。

    先说思路，当时分析需求的时候，我们系统的所有页面都是在权限的框架里面的，每个系统下面对应着模块，模块下面可以分成好几个页面。在1.0的系统中，师姐们控制到了模块，在登陆的角色没有模块的权限情况下，他们是看不到进入这个模块的按钮的。

    而我现在的任务是在可以看到的模块中，如果分成了几个页面，那就在左边加一个导航栏，导航栏中的每一个按钮都连接到一个页面。

    首先看了看之前他们各个系统都做成了什么样子，基本上是参照了基础和新生的左侧边栏，整个页面基本上就是点击左边的按钮，然后跳到各个页面的。那么按照他们的做法，先将导航栏拼出来，然后右面留出一个div放要现实的页面就好了。

    那么先拼导航栏。在之前加载权限的框架的的时候，就已经获得了用户所拥有的资源，分别存在了systemList，moduleList，pageList和buttonList中。

function addTab(tableName, controlerAddress) {
            //如果点击的模块已经存在，那么选中这个模块
            if ($('#tt').tabs('exists', tableName)) {
                $('#tt').tabs('select', tableName);
            }
            else {

                var moduleResourceId;
                var strLiInfo = [];
                var num = 0;
                var Li;

                //获得点击的模块的ResourceId
                for (var i = 0; i < moduleList.length; i++) {
                    if (tableName == moduleList[i].ResourceName) {
                        moduleResourceId = moduleList[i].ResourceId;
                    }
                }

                //如果页面集合中的PId等于当前模块的resourceID添加页面
                for (var i = 0; i < pageList.length; i++) {
                    if (pageList[i].PId == moduleResourceId) {
                   //用循环添加Li，在Li中的a标签添加onclick事件
                        Li = '<li><a href="#" οnclick="addPage(' + "'" + tableName + "'" + "," + "'" + pageList[i].Url + "'" + ')"><span>' + pageList[i].ResourceName + '</span></a></li>';
                        strLiInfo.push(Li);
                        num++
                    }
                }
                //如果模块下面不存在页面，直接显示模块的界面
                if (num == 0) {
                    $("#tt").tabs('add', {
                        title: tableName,
                        content: '<div style="width:100%;height:99%;">'
                                + '<iframe id="abc" name="PageFrame" frameBorder="0" width="100%" height="100%" src=' + controlerAddress + '>'
                                + '</iframe>'
                                + '</div>',
                        closable: true
                    });

                }
                    //如果模块下面存在页面，左侧添加一个导航，并且动态改变导航显示的内容
                else {
                    $('#tt').tabs('add', {
                        title: tableName,
                        content: '<div style="width:100%;height:99%;">'
                                + '<div data-options="region:' + "'" + 'west' + "'" + ';icon:' + "'" + 'icon-help' + "'" + '",split:true" title="' + tableName + '" style="width:150px;height:100%;float:left">'
                                + '<div id="' + tableName + 'pageTree" class="easyui-accordion" style="height:769px;border-width:0px" >'
                                + '</div>'
                                + '</div>' 
                                + '<div id="' + tableName + 'PageChange" style="width:85%;height:100%;float:right">'
                                + '</div>'
                                + '</div>',
                        closable: true
                    });

                    //在Tree中添加页面信息
                    var innerHtml;
                    for (var i = 0; i <= strLiInfo.length; i++) {
                        innerHtml += strLiInfo[i];
                    }

                    //向左侧控制页面div中的accordion控件添加各个页面
                    $("#" +   tableName + "pageTree").accordion('add', {
                        title: tableName,
                        content: '<ul class="easyui-tree">'
                                    + innerHtml
                                    + '</ul>'
                        //position: "center"
                    });

                }
            }
        }

    之后是点击导航栏中各个按钮的事件，由于iframe的src属性不可更改，所以只能使用div的innerHTML来动态的更改Iframe。

function addPage(tableName, NewUrl) {
            if (NewUrl != PageUrl) { //如果要加载的页面Url和当前加载的Url不同，改变div中的Ifrme的html代码
                document.getElementById(tableName + "PageChange").innerHTML = "<iframe frameBorder='0' width='97%' height='100%' src=" + NewUrl + "></iframe>'"
            }
            PageUrl = NewUrl;<span style="white-space:pre">	</span>//记录当前打开的页面Url
        }

   好了，差不多就是这样了，接下来控制按钮又要头疼一阵子了。

   最后，权限汪的感觉真好，想关了谁，就关了谁- -

以上