实现翻页或查询后保持复选框勾选状态
首先先梳理一下复选框的相关逻辑
当你看着每个选项的名字而勾选选项时,传入后台的一定是这些选项所对应的id(即唯一的标识符)。由于一个复选框的选项个数基本是不变的,在这个项目中所有的复选框的id和name都存入到了数据字典表中。一个项目中会有多个复选框,为了区分不同的复选框选项,数据字典表中一定会有一个字段用来区分不同的复选框。否则一号复选框中没准会出现二号复选框的选项。以我之前最长见到的复选框为例,当复选框随页面加载时,会从数据字典表查询出这个复选框的所有值(id和name 下面的的项目中成为dvalue和dname),将每个选项的这两个id和name封装成一个对象,再将这个复选框中所有已封装成对象的选项添加入集合list中,在控制层将list加入request带回到页面,在页面加载的时候利用jstl动态的生成复选框。要保存复选框的勾选状态,只需要将勾选的选项传回页面就可以了。
如下图所示(请记住这个样式,下面的复选框的代码就是这个样式):
扯得有点远,回到正题。
那么我们要看一下,当时这个查询页面的jsp中复选框的代码。
<td align="right" nowrap>复选框:</td> <td align="left"><input type="text" id="_mselect_text_fuxuankuang" name="_mselect_text_fuxuankuang" value="${fuxuankuangNames}" onClick='_mselect_doSelect("fuxuankuang");' size="30" class='mselect' readonly/><div class='mselect_hideDiv' style='z-index:10;' id='_mselect_div_fuxuankuang' ><div class='mselect_tableDiv'><table><c:forEach items="${fuxuankuang}" var="vip"><tr><td nowrap><input type='checkbox' name='fuxuankuang' value="${vip.dvalue}"/></td><td>${vip.dname}</td></tr></c:forEach></table></div><div><hr></div><div align='right'><input type='button' value='确定' onClick='_mselect_hideSelect("fuxuankuang")'/></div></div></td>
接下来是这一段代码中所涉及到function的代码:
function _mselect_doSelect(mname){var selectDiv = document.getElementById("_mselect_div_"+mname);if(selectDiv.className=="mselect_showDiv"){_mselect_hideSelect(mname);}else{_mselect_showSelect(mname);}
}function _mselect_hideSelect(mname){var selectDiv = document.getElementById('_mselect_div_'+mname);selectDiv.className="mselect_hideDiv";var selects = document.getElementsByName(mname);var showtext = "";for(i=0;i<selects.length;i++){if(selects[i].checked){showtext+=","+selects[i].parentNode.parentNode.cells[1].innerHTML}}if(showtext.length>1)showtext=showtext.substr(1);document.getElementById('_mselect_text_'+mname).value=showtext;
}function _mselect_showSelect(mname){var selectDiv = document.getElementById("_mselect_div_"+mname);var t = document.getElementById("_mselect_text_"+mname);selectDiv.className="mselect_showDiv";var theight=t.style.height;var height=selectDiv.offsetHeight;var sheight=window.screen.availHeight-30;if(theight==0)theight=24;var ttop=_mselect_getTop(t);var tleft=_mselect_getLeft(t);selectDiv.style.left=tleft;if(document.body.offsetHeight-ttop-theight-height>0){selectDiv.style.top=ttop+theight;}else{selectDiv.style.top="0";selectDiv.style.zIndex = 100;selectDiv.style.height="300";selectDiv.style.overflow="auto";}if(selectDiv.style.width==0){selectDiv.style.width=selectDiv.offsetWidth;if(selectDiv.offsetWidth<t.offsetWidth){selectDiv.style.width=t.offsetWidth;}}}
在该项目中,点击查询或翻页时已经勾选的选项其实是能够传到控制层的,但从控制层返回到页面时,是需要将哪些选项已经勾选的情况传回到页面,这样才能保留住复选框选项的勾选状态。而原代码是没有这个过程的,这自然是无法保存勾选状态。
由于勾选了选项后,传入控制层的是这些勾选选项的dvalue,因此在控制层加入一个自己写的方法代码如下:
/*** 此方法根据勾选的dvalue查出所有的已勾选选项的对象* @param list 复选框所有的选项* @param attribute 勾选的选项* @param str 每个选项对应的dvalue */
public void saveInfoForCheckBox(List<DataDictionary> list,String attribute,String[] str) {//声明集合用以承装勾选的选项List<DataDictionary> listChecked = new ArrayList<DataDictionary>();//遍历该复选框总所有的选项for (int i = 0; i < list.size(); i++) {//遍历strfor (int j = 0; j < str.length; j++) {//判断勾选选项的dvalue 是否同复选框选项dvalue相同 若相同则将此对象装入集合if (str[j].equals(list.get(i).getDvalue())) {listChecked.add(list.get(i));break; }}}//将勾选的选项集合封入request中 request.setAttribute(attribute, listChecked);
}
上面代码中的attribute对应下面的fuxuankuangChecked
现在已经看到了我们将勾选的选项重新传回了查询页面,那么判断哪些选项勾选的任务就要交由前台去实现了。我们将复选框的代码重新修改了一下:
<td align="right" nowrap>复选框:</td><td align="left"><input type="text" id="_mselect_text_fuxuankuang" name="_mselect_text_fuxuankuang" value="${fuxuankuangNames}" onClick='_mselect_doSelect("fuxuankuang");' size="30" class='mselect' readonly/><div class='mselect_hideDiv' style='z-index:10;' id='_mselect_div_fuxuankuang' ><div class='mselect_tableDiv'><table><c:forEach items="${fuxuankuang}" var="vip"><c:if test="${fuxuankuangChecked!=null }"><c:set var="fuxuankuangflag" value="0" scope="page"></c:set><c:forEach items="${fuxuankuangChecked}" var="v"><c:if test="${v.dvalue==vip.dvalue}"><c:if test="${fuxuankuangflag == 0}"><tr><td nowrap><input type='checkbox' name='fuxuankuang' value="${vip.dvalue}" checked/></td><td>${vip.dname}</td></tr><c:set var="fuxuankuangflag" value="1" scope="page"></c:set></c:if></c:if><c:if test="${vip.dvalue!=v.dvalue }"></c:if></c:forEach><c:if test="${fuxuankuangflag==0 }"><tr><td nowrap><input type='checkbox' name='fuxuankuang' value="${vip.dvalue}"/></td><td>${vip.dname}</td></tr></c:if> </c:if><c:if test="${fuxuankuangChecked==null }"><tr><td nowrap><input type='checkbox' name='fuxuankuang' value="${vip.dvalue}"/></td><td>${vip.dname}</td></tr></c:if></c:forEach></table></div><div><hr></div><div align='right'><input type='button' value='确定' onClick='_mselect_hideSelect("fuxuankuang")'/></div></div></td>
最后只需要在页面加载的function中添加上复选框确认勾选的方法即可。
function init(){_mselect_hideSelect("fuxuankuang");
}
这样就可以实现翻页或查询后复选框状态的保持功能了。
办法永远比问题多,以上只是实现复选框状态保持的一个思路。
实现翻页或查询后保持复选框勾选状态相关推荐
- QAbstractItemView子类如:QTreeView、QTableView等子项单元格复选框勾选/取消勾选功能实现
1.前言 本博文所说的技术点适用于同时满足下面条件的所有QAbstractItemView视图类的子类: 模型类从 QAbstractItemModel派生. 代理类从QStyledItemDeleg ...
- java 模板生成PDF文件 复选框勾选
java 模板生成PDF文件 复选框勾选 // pdf填充时要有第三个参数s.setField("A", On, true);
- uview Checkbox 复选框勾选,删除某一项遇见的bug,复用导致的问题
uview Checkbox 复选框勾选,删除某一项遇见的bug 如下图,所示,正常新建了子任务123,1跟3勾选. 紧接着删除子任务2,发现原本子任务3勾选消失了 查看里面保存勾选的值,的的确确有两 ...
- vue设置多选框默认勾选_Angular/Vue多复选框勾选问题
此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...
- 打印时候复选框勾选不见了_checkbox 选中未显示对号勾选的问题
今天同事 让帮忙调试一个checkbox只选中一个的方法,代码如下: ID平台代码平台名称 选项2选项2选项3选项4 varEleInput=$("[name = ptcode]:check ...
- 产生复选框的html,html根据复选框勾选顺序生成字符串
check 猴子 大象 狮子 String.prototype.trim = function (c) { if (!c) c = "\\s"; return this.repla ...
- 苹果手机和安卓手机的复选框勾选框大小不一致问题
在iOS中,当标签的长度超过通常的长度时,就会发生这种情况 样式中设置一下就ok了min-width: 20px style="min-width: 20px" 参考链接
- datatables实现复选框全选反选!!(亲测有效)
关于datatables的全选和反选实现 html部分: <table data-toggle="table" class="table table-bordere ...
- axure实现复选框全选_AxureRP8实战手册-案例73(全选与取消全选效果)
案例73. 全选与取消全选效果 案例来源: 百度音乐-音乐盒 案例效果: 初始状态/取消全选时:(图5-117) 全选后取消任一选项时:(图5-118) 全选/单选全部选中时:(图5-119) 案例描 ...
最新文章
- ElasticSearch面试题
- 用 Blink 打造你的技术朋友圈
- JSjQuery全选反选父项子项联动多选框
- thymeleaf语法介绍
- P4445 最长回文串
- 黄聪:PHP获取MAC地址(转)
- 【AI视野·今日NLP 自然语言处理论文速览 第十九期】Mon, 5 Jul 2021
- td和div超出部分隐藏的区别和用法
- 6.1 API : AdaBoostClassifier与AdaBoostRegressor
- DSP28335学习记录(三)——ePWM
- 解决docker pull 速度过慢问题 - 使用阿里云加速器
- MyScript 手写识别数学公式、图形 自动计算
- word中多级列表编号错乱怎么办?
- 【摘记】彼得·林奇的成功投资
- python中添加.pth_使用.pth文件扩展python环境路径
- 概率公式中的分号、逗号、竖线
- echarts关系图配置详解
- C++ 多态介绍详解
- 大数据审计的发展_大数据时代的审计发展趋势
- Android清除WebView缓存