salesforce 零基础学习(四十四)实现checkbox列表简单过滤功能
2016-09-04 00:11
716 查看
现在做的项目代码是原来其他公司做的,要在原来基础上业务进行适当调整加上一些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的列表
Visualforce Page:显示数据
此种方式显示效果如下所示:
此种方式对于用户选择来说确实不方便,显示也不够美观,因为数据量多但是每行只显示一条数据。
想出来的解决方案有两个,一种是扩展列数,比如每行显示4列,另一种是新增搜索功能,通过搜索筛选符合条件的数据。
一.扩展列数,每行显示4列数据
原来的控件仅支持单列,如果扩展列数,则需要使用其他控件,比如pageblocktable或者html中的table,使用apex:repeat渲染,这里使用第二种
Apex代码:
Visualforce Page:
此种方式显示效果如下:
此种方式设计出来的样式其实没有太大的作用,如果每个item的value长度不同,则显示效果很丑,所以添加搜索框,过滤数据方式显得更加符合要求。
二.过滤数据:
Apex代码:
Visualforce Page
显示效果展示:
1.初始进入画面
2.模糊搜索显示结果布局
3.搜索内容不存在情况下布局
总结:此种方式并没有特别制作checkbox选中后往后台如何传值,感兴趣的伙伴可以自行玩耍。通过这个小需求的改造可以看出最开始设计项目的时候页面相关尽量选用灵活的一些控件,很多VF自带的控件限制特别多,如果项目需要经常页面改动的建议少量使用VF自带控件。如果checkbox列表有更加好的优化方案,欢迎留言。如果篇中有错误的地方欢迎指正。
原来使用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列表有更加好的优化方案,欢迎留言。如果篇中有错误的地方欢迎指正。
相关文章推荐
- 【tcp-ip学习总结】基础UDP实现的简单通信功能小程序
- salesforce 零基础学习(二十六)自定义图表chart简单介绍(使用apex和VF实现)
- salesforce 零基础学习(四十九)自定义列表分页之使用Pagination实现分页效果 ※※※
- salesforce 零基础学习(五十一)使用 Salesforce.com SOAP API 实现用户登录以及简单的增删改查(JAVA访问salesforce)
- salesforce 零基础学习(六十一)apex:component简单使用以及图片轮转播放的实现
- salesforce 零基础学习(六十三)Comparable实现Object列表数据的自定义排序
- 用HTML+PHP写一个留言板来进行XSS测试&学习 第三篇(简单的过滤标签功能实现&绕过)
- salesforce零基础学习(八十三)analytics:reportChart实现Dashboard(仪表盘)功能效果
- Cordova系列学习教程03 Cordova简单功能的实现
- App中二级列表购物车的简单实现,查,删,改的功能
- django学习——如何实现简单的搜索功能
- python基础学习——利用Flask实现一个简单博客
- Android基础学习笔记-简单实现绘画板
- [知了堂学习笔记]网络编程扩展_实现简单的聊天室功能
- iOS 超简单实现列表的索引功能
- Android基础学习总结(七)——简单实现新闻选项卡滑动效果(CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager大合成)
- 利用可变参数列表简单实现printf函数的功能
- Android 仿联系人列表 实现ListView的A-Z字母排序和过滤搜索功能
- salesforce 零基础学习(四十二)简单文件上传下载
- [原创]unity3D学习【功能实现】之七:Animator动画以及传递参数,简单功能