現在做的項目代碼是原來其他公司做的，要在原來基礎上業務進行适當調整加上一些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的清單
1 public with sharing class SelectCheckboxesController {
2
3 public List<SelectOption> options{get;set;}
4
5 public Integer optionSize{get;set;}
6
7 public SelectCheckboxesController() {
8 options = new List<SelectOption>();
9 for(Integer i=0;i<50;i++) {
10 options.add(new SelectOption(String.valueOf(i),String.valueOf(i)));
11 }
12 optionSize = options.size();
13 }
14
15 } Visualforce Page:顯示資料
1 <apex:page controller="SelectCheckboxesController" sidebar="true">
2 <apex:form >
3 <apex:outputPanel id="xxPanel">
4 <apex:selectCheckboxes layout="pageDirection" styleClass="xxStyle" id="xxId" rendered="{!optionSize > 0}">
5 <apex:selectOptions value="{!options}"/>
6 </apex:selectCheckboxes>
7 <apex:outputLabel value="無複選框清單" rendered="{!optionSize == 0}"/>
8 </apex:outputPanel>
9
10 </apex:form>
11 </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:
1 <apex:page controller="SelectCheckListController">
2 <apex:form >
3 <table>
4 <apex:repeat value="{!itemList}" var="ite">
5 <tr>
6 <td width="100px">{!ite.item1}<apex:inputCheckbox value="{!ite.item1}"/></td>
7 <td width="100px">{!ite.item2}<apex:inputCheckbox value="{!ite.item2}"/></td>
8 <td width="100px">{!ite.item3}<apex:inputCheckbox value="{!ite.item3}"/></td>
9 <td width="100px">{!ite.item4}<apex:inputCheckbox value="{!ite.item4}"/></td>
10 </tr>
11 </apex:repeat>
12 </table>
13 </apex:form>
14 </apex:page> 此種方式顯示效果如下：
此種方式設計出來的樣式其實沒有太大的作用，如果每個item的value長度不同，則顯示效果很醜，是以添加搜尋框，過濾資料方式顯得更加符合要求。
二.過濾資料：
1 public class SimpleSelectCheckboxesController {
2 public List<SelectOption> options{get;set;}
3
4 public Integer optionSize{get;set;}
5
6 public List<SelectOption> optionsBackUp{get;set;}
7
8 public String inputValue{get;set;}
9
10 public SimpleSelectCheckboxesController() {
11 options = new List<SelectOption>();
12 optionsBackUp = new List<SelectOption>();
13 for(Integer i=0;i<100;i++) {
14 options.add(new SelectOption(String.valueOf(i),String.valueOf(i)));
15 }
16 optionSize = options.size();
17 optionsBackUp.addAll(options);
18 }
19
20 public void doAction() {
21 options = new List<SelectOption>();
22 for(Integer i=0;i<optionsBackUp.size();i++) {
23 SelectOption option = optionsBackUp.get(i);
24 if(option.getLabel().contains(inputValue)) {
25 options.add(option);
26 }
27 }
28 optionSize = options.size();
29 }
30 } Visualforce Page
1 <apex:page controller="SimpleSelectCheckboxesController" sidebar="true">
2
3 <apex:includeScript value="{!$Resource.JQuery2}"/>
4 <script type="text/javascript">
5 function showInfo() {
6 var value = $('.xxList').val();
7 doAction(value);
8 }
9 </script>
10 <apex:form >
11 <apex:inputText onkeyup="showInfo()" value="{!inputValue}" id="xxList" styleClass="xxList"/>
12 <apex:outputPanel id="xxPanel">
13 <apex:selectCheckboxes layout="pageDirection" styleClass="basicRequiresSelect" accesskey="basicRequireAccessKey" id="basic" rendered="{!optionSize > 0}">
14 <apex:selectOptions value="{!options}"/>
15 </apex:selectCheckboxes>
16 <apex:outputLabel value="無搜尋結果，請重新輸入查詢條件" rendered="{!optionSize == 0}"/>
17 </apex:outputPanel>
18
19 <apex:actionFunction action="{!doAction}" status="LoadingStatusSpinner" name="doAction" reRender="xxPanel" immediate="true">
20 <apex:param name="inputValue" value="" assignTo="{!inputValue}" />
21 </apex:actionFunction>
22 </apex:form>
23 </apex:page> 顯示效果展示：
1.初始進入畫面
2.模糊搜尋顯示結果布局
3.搜尋内容不存在情況下布局
總結：此種方式并沒有特别制作checkbox選中後往背景如何傳值，感興趣的夥伴可以自行玩耍。通過這個小需求的改造可以看出最開始設計項目的時候頁面相關盡量選用靈活的一些控件，很多VF自帶的控件限制特别多，如果項目需要經常頁面改動的建議少量使用VF自帶控件。如果checkbox清單有更加好的優化方案，歡迎留言。如果篇中有錯誤的地方歡迎指正。
作者：zero
部落格位址：http://www.cnblogs.com/zero-zyq/
本文歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接
個人下載下傳了一些相關學習的PDF檔案，如果需要下載下傳請通路百度雲 點選此處通路 密碼：jhuy
如果文章的内容對你有幫助，歡迎點贊~
為友善手機端檢視部落格，現正在将部落格遷移至微信公衆号：Salesforce零基礎學習，歡迎各位關注。