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 条评论
登录 后参与评论

相关文章

来自专栏CRPER折腾记

Vue 折腾记 - (4) 写一个不大靠谱的 loading 组件

有需求,就要动手丰衣足食...公司考虑兼容IE9,那么css3 animation写的loading就无缘了 因为keyframes IE10+ , 那么要实现...

772
来自专栏Java帮帮-微信公众号-技术文章全总结

深入浅出爬虫之道: Python、Golang与GraphQuery的对比

本文将分别使用 Python ,Golang 以及 GraphQuery 来解析某网站的 素材详情页面 ,这个页面的特色是具有清晰的数据结构,但是DOM结构不够...

781
来自专栏前端大白专栏

使用react心得

1515
来自专栏iKcamp

React 深入系列5:事件处理

1613
来自专栏Flutter&Dart

Flutter之MaterialApp使用详解

5582
来自专栏农夫安全

浅析XSS的几种测试方法

0x00 背景 最近看到一个好玩的xss社区,准备通过几个经典的关卡来剖析一下XSS,本文仅提供经典案例。 试玩链接:http://tr.secevery...

3158
来自专栏华仔的技术笔记

GO语言学习笔记

46110
来自专栏小狼的世界

使用YUI3创建Popup弹出层

很多互联网的项目应用中,弹出层出现的越来越多,使用YUI3可以快速的实现制作弹出层的效果。

741
来自专栏Python爬虫与数据挖掘

Python网络爬虫四大选择器(正则表达式、BS4、Xpath、CSS)总结

前几天小编连续写了四篇关于Python选择器的文章,分别用正则表达式、BeautifulSoup、Xpath、CSS选择器分别抓取京东网的商品信...

1001
来自专栏玄魂工作室

如何将HTML字符转换为DOM节点并动态添加到文档中

将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术。 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题:<br />

1292

扫码关注云+社区