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列表有更加好的优化方案，欢迎留言。如果篇中有错误的地方欢迎指正。