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的列表

 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长度不同,则显示效果很丑,所以添加搜索框,过滤数据方式显得更加符合要求。

二.过滤数据:

Apex代码:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android 开发学习

data-binding 踩坑记

1484
来自专栏编程微刊

2018年各大互联网前端面试题五(今日头条)

2773
来自专栏深度学习之tensorflow实战篇

HTML5与HTML4的区别,新增的元素有哪些?

注:部分格式编写存在<>封闭错误,只为在博客中显示,并非正确写法。 1. HTML5推出的理由 解决Web上存在的问题: Web浏览器间的兼容性低:在...

3636
来自专栏Lambda

vue2.0知识点汇总

Vue简介 数据流 Vue实例对象 vue常用指令 class结合v-bind使用 methods 和 v-on的使用 v-on高级用法 v-for的使用 简...

6937
来自专栏小怪聊职场

爬虫课堂(十九)|编写Spider之使用Item封装数据

2136
来自专栏游戏开发那些事

【随笔】android开发的学习路线

第一阶段:Java面向对象编程 1.Java基本数据类型与表达式,分支循环。  2.String和StringBuffer的使用、正则表达式。  3.面向对象...

913
来自专栏ionic3+

【组件篇】ionic3均分列等宽高图像显示(上)

我在《ionic3开源组件》提到了图片选择组件,但是后来发现其实现功能很简单,而且我不喜欢它写死了宽高大小,这对于不同分别率不太友好。于是尝试实现了一下,先上效...

715
来自专栏前端学习心得

Vue2.0学习(四)--组件的继承与扩展

本文将介绍vue2.0中的组件的继承与扩展,主要分享slot、mixins/extends和extend的用法。

851
来自专栏非著名程序员

你真的会用Android中Strings资源吗

Android为了帮助开发者把应用更方便发布给全球不同语言的人们使用,建议开发者在进行开发时不要把UI呈现相关的文本内容硬编码,而是把内容写入到strings....

2199
来自专栏十月梦想

Vue.set方法(响应数据和视图层)

前面一篇说过直接修改数据vue是检测不到的,所以视图层和数据层不能保持同步!那么vue是否提供了保持响应的方法,答案肯定是有的!

653

扫码关注云+社区