【新特性速遞】工具欄自動換行，再也不會重疊了！

前言

很多網友都會遇到這個問題，在手機平板等小屏幕設備上，表格分頁工具欄右側的分頁信息會和左側的分頁按鈕重疊：

 

一般遇到這種情況，我們會讓用戶設置 ShowPagingMessage=false 來隱藏右側的分頁信息，示例如下：

https://pro.fineui.com/#/gridpaging/gridpaging_database.aspx

 

但這終究不是一個好辦法，如何能同時兼顧大屏幕和小屏幕呢？

思考

最好的辦法就是換行，由於工具欄支持 ToolbarFill 將工具欄分成左右兩部分，以及左中右三部分，因此我們首先考慮的做法就是：

1. 在ToolbarFill處換行。

隨着思考的深入，我們發現這個方法有缺陷，那就是如果左側部分本身很多控件，同樣會超出窗體的可見區域。因此ToolbarFill處換行解決不了某個區域過長的問題。

那不如就忽略ToolbarFill好了，這就是最終定下的換行策略：

2. 當子項總長度超出邊界時，忽略ToolbarFill，將所有子項作為一個整體自動換行

我在草紙上畫了一個簡略的設計草稿，不知道你是否能看出個大概意思：

 

實現

思路理順了，實現起來就順理成章了，關鍵代碼如下所示：

//:: 多行之間的間隔
var paddingBottom = parseInt(me._fjs_el.css('padding-left'));

var count = me.items.length;
var startIndex = 0, startTop = 0;
do {
    var result = me._fjs_adjustMultiLineItems(startIndex, count - 1, startTop);
    if(result[0] === count) {
        startTop += result[1];
        break;
    }
    
    startIndex = result[0];
    startTop += result[1] + paddingBottom;
} while(true);

將所有子項作為一個整體考慮，_fjs_adjustMultiLineItems 會一項一項的布局，遇到超出容器邊界，就換到下一行。這樣適用面很廣，不論工具欄哪一個部分超長，都沒問題。

效果對比

1. https://pro.fineui.com/#/iframe/grid_iframe.aspx

 

2. https://pro.fineui.com/#/gridpaging/gridpaging_pagingtype.aspx

 

3. https://pro.fineui.com/#/gridpaging/gridpaging_pageitems_rowexpander.aspx

 

4. https://pro.fineui.com/#/gridpaging/gridpaging_pageitems_rowexpander.aspx

5. https://pro.fineui.com/#/toolbar/toolbar_multi.aspx

 

注： 本功能會在 FineUIPro/Mvc/Core v5.6.0 中支持，下載基礎版請先加入知識星球：https://fineui.com/fans/ 

 

不忘初心，方得始終！