salesforce 零基礎學習（四十四）實現checkbox列表簡單過濾功能

現在做的項目代碼是原來其他公司做的，要在原來基礎上業務進行適當調整加上一些CR，其中有一個需要調整的需求如下：

原來使用apex:selectCheckboxes封裝了一個checkbox列表，因為數據太多導致顯示起來比較丑，用戶希望改進一下UI。

apex:selectCheckboxes作用原理為解析成html以后變成table標簽，

大概層級結構可以分成<table><tbody><tr><td><input type="checkbox"/><label></td></tr></tbody></table>.並且每一個checkbox作為一個tr存在。

原來的代碼演示如下：

Apex:模擬50個checkbox的列表

public with sharing class SelectCheckboxesController {
    
    public List<SelectOption> options{get;set;}
    
    public Integer optionSize{get;set;}
    
    public SelectCheckboxesController() {
        options = new List<SelectOption>();
        for(Integer i=0;i<50;i++) {
            options.add(new SelectOption(String.valueOf(i),String.valueOf(i)));
        }
        optionSize = options.size();
    }
    
}

Visualforce Page:顯示數據

<apex:page controller="SelectCheckboxesController" sidebar="true">
    <apex:form >
    <apex:outputPanel id="xxPanel">
    <apex:selectCheckboxes layout="pageDirection" styleClass="xxStyle"  id="xxId" rendered="{!optionSize > 0}">
         <apex:selectOptions value="{!options}"/>
     </apex:selectCheckboxes>
     <apex:outputLabel value="無復選框列表" rendered="{!optionSize == 0}"/>
     </apex:outputPanel>
     
     </apex:form>
</apex:page>

此種方式顯示效果如下所示：

此種方式對於用戶選擇來說確實不方便，顯示也不夠美觀，因為數據量多但是每行只顯示一條數據。

想出來的解決方案有兩個，一種是擴展列數，比如每行顯示4列，另一種是新增搜索功能，通過搜索篩選符合條件的數據。

一.擴展列數，每行顯示4列數據

原來的控件僅支持單列，如果擴展列數，則需要使用其他控件，比如pageblocktable或者html中的table，使用apex:repeat渲染，這里使用第二種

Apex代碼：

public with sharing class SelectCheckListController {
    
    public Integer itemSize{get;set;}
    
    public Integer itemSizeDown{get;set;}
    
    public List<Item> itemList{get;set;}
    
    public SelectCheckListController() {
        init();
    }
    
    public void init() {
        List<String> tempItemList = new List<String>();
        for(Integer i=0;i < 100;i ++) {
            tempItemList.add('item ' + String.valueOf(i));
        }
        itemList = new List<Item>();
        Decimal itemListSizeDouble = Decimal.valueOf(tempItemList.size()) / 4;
        itemSize = Integer.valueOf(itemListSizeDouble.round(System.RoundingMode.CEILING));
        itemSizeDown = Integer.valueOf(itemListSizeDouble.round(System.RoundingMode.DOWN));
        for(Integer i = 0;i < itemSize;i++) {
            Item tempItem = new Item();
            if(i * 4 < tempItemList.size()) {
                tempItem.item1 = tempItemList.get(i * 4);
            }
            if(4 * i + 1 < tempItemList.size()) {
                tempItem.item2 = tempItemList.get(i* 4 + 1);
            }
            if(4 * i + 2 < tempItemList.size()) {
                tempItem.item3 = tempItemList.get(i * 4 + 2);
            }
            if(4 * i + 3 < tempItemList.size()) {
                tempItem.item4 = tempItemList.get(i* 4 + 3);
            }
            itemList.add(tempItem);
        }
    }
    
    
    public class Item {
        public String item1{get;set;}
        public String item2{get;set;}
        public String item3{get;set;}
        public String item4{get;set;}
    }
}

Visualforce Page:

<apex:page controller="SelectCheckListController">
    <apex:form >
         <table>
             <apex:repeat value="{!itemList}" var="ite">
             <tr>
                 <td width="100px">{!ite.item1}<apex:inputCheckbox value="{!ite.item1}"/></td>
                 <td width="100px">{!ite.item2}<apex:inputCheckbox value="{!ite.item2}"/></td>
                 <td width="100px">{!ite.item3}<apex:inputCheckbox value="{!ite.item3}"/></td>
                 <td width="100px">{!ite.item4}<apex:inputCheckbox value="{!ite.item4}"/></td>
             </tr>
             </apex:repeat>
         </table>
    </apex:form> 
</apex:page>

此種方式顯示效果如下：

此種方式設計出來的樣式其實沒有太大的作用，如果每個item的value長度不同，則顯示效果很丑，所以添加搜索框，過濾數據方式顯得更加符合要求。

二.過濾數據：

Apex代碼：

 public class SimpleSelectCheckboxesController {
    public List<SelectOption> options{get;set;}
    
    public Integer optionSize{get;set;}
    
    public List<SelectOption> optionsBackUp{get;set;}
    
    public String inputValue{get;set;}
    
    public SimpleSelectCheckboxesController() {
        options = new List<SelectOption>();
        optionsBackUp = new List<SelectOption>();
        for(Integer i=0;i<100;i++) {
            options.add(new SelectOption(String.valueOf(i),String.valueOf(i)));
        }
        optionSize = options.size();
        optionsBackUp.addAll(options);
    }
    
    public void doAction() {
        options = new List<SelectOption>();
        for(Integer i=0;i<optionsBackUp.size();i++) {
            SelectOption option = optionsBackUp.get(i);
            if(option.getLabel().contains(inputValue)) {
                options.add(option);
            }
        }
        optionSize = options.size();
    }
}

Visualforce Page

<apex:page controller="SimpleSelectCheckboxesController" sidebar="true">

<apex:includeScript value="{!$Resource.JQuery2}"/>
<script type="text/javascript">
function showInfo() {
    var value = $('.xxList').val();
    doAction(value);
}
</script>
    <apex:form >
    <apex:inputText onkeyup="showInfo()" value="{!inputValue}" id="xxList" styleClass="xxList"/>
    <apex:outputPanel id="xxPanel">
    <apex:selectCheckboxes layout="pageDirection" styleClass="basicRequiresSelect"  accesskey="basicRequireAccessKey" id="basic" rendered="{!optionSize > 0}">
         <apex:selectOptions value="{!options}"/>
     </apex:selectCheckboxes>
     <apex:outputLabel value="無搜索結果，請重新輸入查詢條件" rendered="{!optionSize == 0}"/>
     </apex:outputPanel>
     
     <apex:actionFunction action="{!doAction}" status="LoadingStatusSpinner" name="doAction" reRender="xxPanel" immediate="true">
     <apex:param name="inputValue" value="" assignTo="{!inputValue}" />
     </apex:actionFunction>
     </apex:form>
</apex:page>

顯示效果展示：

1.初始進入畫面

2.模糊搜索顯示結果布局

3.搜索內容不存在情況下布局

總結：此種方式並沒有特別制作checkbox選中后往后台如何傳值，感興趣的伙伴可以自行玩耍。通過這個小需求的改造可以看出最開始設計項目的時候頁面相關盡量選用靈活的一些控件，很多VF自帶的控件限制特別多，如果項目需要經常頁面改動的建議少量使用VF自帶控件。如果checkbox列表有更加好的優化方案，歡迎留言。如果篇中有錯誤的地方歡迎指正。