码迷,mamicode.com
首页 > 其他好文 > 详细

多级外框模块的设计

时间:2014-12-26 14:22:00      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:

在设计报表的过程中,为了保证模块之间功能清晰,简单。规定,单个div元素只能够初始化为一个数据显示元素,(什么是数据显示元素,如图表,表格等等)

但这样也使得我们需要一个功能足够强大的外框,来吧一个大的div划分为几块,分别显示。

技术分享

 

上图是我认为的外框控制和管理模块,我称为divManager,他通过在div中添加新的小div元素,划分窗口。

之后需要做的是确定这个模块的输入,也就是json的数据格式,让他能足够描述上图中的信息。

之前说过一个div定义的数据是:

{
    x: 20,
    y: 20,
    width: 800,
    height: 510
}

那么如果有多层,应该是下面这样:

{
    x: 20,
    y: 20,
    width: 800,
    height: 510
    children: [
        {
             x: 20,
             y: 20,
             width: 800,
             height: 510
             children:[....]
         }
    ]
}

在这里还有一个问题,那就是需要从外部定位到每一个div,那就需要为每个外框加一个id属性,id可以在生成时用函数随机生成GUID

{
    id:ad71f2de,
    x: 20,
    y: 20,
    width: 800,
    height: 510
    children: [...]
}

 

另外,还要考虑多标签的情况,多标签之前做过一个Panel模块,这里关键的问题是,上面都是一个div框对应一个children元素,单如果吧一个框变成多标签,那么上面的方法就不能用了,因为不能一一对应。所以之后是一种更加极端的方式,很黄很暴力。

{
    id: ad71f2de,
    x: 20,
    y: 20,
    width: 800,
    height: 510,
    father: eag93g17
}

上面是经过深思熟虑以后的可以适应多标签,且更容易动态添加下层元素的方式。而上面的这个json对象会被渲染为一个框,如果是panel,有多个框,那么就需要下面这样:

{
    id: [‘ad71f2de‘,‘2dd71fae‘],
    x: 20,
    y: 20,
    width: 800,
    height: 510,
    father: eag93g17
}

那么这里就一下子清晰了,我们只要判断id是一个值还是一个数组,如果是数组,则使用panel初始化。

可以把上面的思路理解为一颗树,我们通过指定上层节点(father)来将一个节点按到树上。

接下去就是实现了,滚去写代码....

最后效果如下

 技术分享

多级外框模块的设计

标签:

原文地址:http://www.cnblogs.com/william7neral/p/4186535.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!