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" 
    onclick="loadUrl('page-center-right','taijiWidget.do?widgetId=7&SortId=${field:Id}')" 
    href="javascript:void(0)">
${field}</a>

b）數量統計

數量是每個分類下的數量，我們採用SQL查詢語句去統計出來。當然，也可以採用字段存儲，結合觸發器實時更新數量，那麼就只需要查詢出字段值即可。根據實際情況自行選擇合適的方案。

採用SQL語句統計出分類和分類下的數量，SQL語句和查詢結果如下。採用左連接和group by的方式。

因此，需要在組件設置中，設置左連接和查詢字段。如下圖所示，最終會合併爲上圖的SQL語句。

c）組件字段

組件包含2個字段，如下圖所示。

3）創建右邊組件

右邊的組件比較簡單，普通的列表。唯一要注意的，就是需要加上SQL附加條件。附加條件的內容，則是接收URL傳遞的SortId，作爲篩選條件，僅列出滿足SortId條件的數據列表。如下圖所示。

3、總結

經過上面3步的配置，就實現了左右佈局的功能。如果要實現其他頁面佈局，方法相似。

1）採用loadUrl去動態加載各個頁面。

2）採用${field:字段名稱}標籤方式，傳遞字段值；採用${ReqInt:字段名稱}標籤，獲取request傳遞的值。