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

相关文章

来自专栏恰同学骚年

ASP.Net WebForm温故知新学习笔记:一、aspx与服务器控件探秘

开篇:毫无疑问,ASP.Net WebForm是微软推出的一个跨时代的Web开发模式,它将WinForm开发模式的快捷便利的优点移植到了Web开发上,我们只要学...

492
来自专栏Timhbw博客

iOS基础问答面试题连载(二)-附答案

2016-11-2120:41:52 发表评论 7℃热度 1.xcode5和xcode7区别? 2.pch文件原理? 3.UIApplication常见...

3379
来自专栏圣杰的专栏

ABP入门系列(9)——权限管理

源码路径:Github-LearningMpaAbp 完成了简单的增删改查和分页功能,是不是觉得少了点什么? 是的,少了权限管理。既然涉及到了权限,那我们...

3905
来自专栏Java技术分享

基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

在上篇《基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理》介绍了Bootstrap开发框架的一些基础性概括,包括总体界面...

2665
来自专栏有趣的Python

11- vue django restful framework 打造生鲜超市 -用户登录和手机注册(下)

Vue+Django REST framework实战 搭建一个前后端分离的生鲜超市网站 Django rtf 完成 手机注册和用户登录(下) user...

3958
来自专栏finleyMa

Laravel Vue 前后端分离 使用token认证

在做前后台分离的项目中,认证是必须的,由于http是无状态的。前台用户登录成功后,后台给前台返回token。之后前台给后台发请求每次携带token。

932
来自专栏大内老A

“前.NET Core时代”如何实现跨平台代码重用 ——程序集重用

除了在源代码层面实现共享(“前.NET Core时代”如何实现跨平台代码重用 ——源文件重用)之外,我们还可以跨平台共享同一个程序集,这种独立于具体平台的“中性...

1878
来自专栏lonelydawn的前端猿区

打造炫酷的通知插件EasyToaster

引用 <link rel="stylesheet" type="text/css" href="./index.css"> <div id="slider"><...

3439
来自专栏林冠宏的技术文章

关于java连接mysql数据库的几个问题的解决方法。

今天就为了连接下数据库获取信息来提供给ListView使用,搞了足足5小时。 出现的问题有:       第一个是,DriverManager.getConne...

1736
来自专栏沈唁志

整合ThinkPHP功能系列之PHPExcel生成Excel表格文件

35319

扫码关注云+社区