4.3.太极平台：使用模块制作左右布局，实现分类下数据列表

1、需求场景

某些场合下，仅有一个列表的页面，是不能满足需求的。有时需要左右布局，或者上下布局，甚至是页面上多个区域。

比如左右布局，点击左边，右边则进行响应。

我们以供应商管理来作为示例，讲解如何使用模块，去实现左右布局效果。实现效果如下图所示。

2、实现方法

该页面效果由模块来制作，页面是左右布局，包含有2个列表，每个列表是1个组件，因此该模块页面由2个组件合成。

实现此效果，就需要创建1个模块，2个组件。把这2个组件放到此模块中，通过左边组件设置，去响应右边的组件。

1）创建模块

在模块管理中添加模块：供应商管理，如下图所示。模板内容就是一个简单的左右布局，2个div，通过ajax动态加载，进行load内容填充。

代码如下：

<div class="row">
    <div id="page-center-left" class="col-lg-3"></div>
    <div id="page-center-right" class="col-lg-9"></div>
</div>

<script type="text/javascript">
    loadUrl("page-center-left", "taijiWidget.do?widgetId=8");
    loadUrl("page-center-right", "taijiWidget.do?widgetId=7");
</script>

如果初次进入页面时，不加载右边数据，提示只有点击了左边，才会加载，如下面的效果。

初始时不需要加载右边页面，代码如下：

<div class="row">
    <div id="page-center-left" class="col-lg-3"></div>
    <div id="page-center-right" class="col-lg-9">
        <div class="alert alert-info">
            请点击左边的分类名称。
        </div>
    </div>
</div>

<script type="text/javascript">
    loadUrl("page-center-left", "taijiWidget.do?widgetId=8");
</script>

2）创建左边组件

左边组件是一个列表，列出分类名称和分类下的统计数量。分类名称带超链接，点击后，右边会加载该分类下的数据。

此组件的重点有2块：超链接点击响应、数量统计显示。

a）超链接点击响应

点击响应的实现原理很简单，只需要设置该字段的自定义显示格式即可。要实现功能：点击后，ajax加载列表数据，填充到右边的div中。

我们采用loadUrl函数，加载链接到page-center-right区域中，链接中使用了${field:Id}标签，会替换为ID值。

<a class="text-success" 
    οnclick="loadUrl('page-center-right','taijiWidget.do?widgetId=7&SortId=${field:Id}')" 
    href="javascript:void(0)">
${field}</a>

b）数量统计

数量是每个分类下的数量，我们采用SQL查询语句去统计出来。当然，也可以采用字段存储，结合触发器实时更新数量，那么就只需要查询出字段值即可。根据实际情况自行选择合适的方案。

采用SQL语句统计出分类和分类下的数量，SQL语句和查询结果如下。采用左连接和group by的方式。