实现翻页或查询后保持复选框勾选状态
来源:互联网 发布:sql注入攻击语句 编辑:程序博客网 时间:2024/05/22 05:32
首先先梳理一下复选框的相关逻辑
当你看着每个选项的名字而勾选选项时,传入后台的一定是这些选项所对应的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++) { //遍历str for (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");}
这样就可以实现翻页或查询后复选框状态的保持功能了。
办法永远比问题多,以上只是实现复选框状态保持的一个思路。
- 实现翻页或查询后保持复选框勾选状态
- js实现翻页后保持checkbox选中状态
- GridView 翻页后保持checkbox选中状态
- extjs4当中的gridpanel,翻页后保持复选框内容。
- EasyUI datagrid实现翻页保持checkbox状态
- EasyUI datagrid实现翻页保持选中状态
- SpringMVC与JS一起实现checkbox翻页后保持已选中状态
- flexgrid的全选按钮翻页后复选框还是选中状态的bug
- 复选框翻页勾选状态不变
- GridView翻页时保持CheckBox选择状态
- GridView翻页时保持CheckBox选择状态
- GridView翻页时保持CheckBox选择状态
- 翻页时保持复选框的选中的解决办法
- js实现刷新页面后select标签保持选中状态
- 登录后保持在线状态
- Fragment保持状态替换,转换屏幕方向或被回收后唤起
- [转]GridView翻页时保持CheckBox选择状态
- Ecside checkbox 翻页后保存状态问题解决
- PLL
- C标准库的阅读(1)
- Docker部署web应用
- java设计模式---单例模式篇
- SpringBoot(三):SpringBoot 属性配置文件详解
- 实现翻页或查询后保持复选框勾选状态
- requests库的请求头部信息修改
- 文章标题
- Latex排版全解
- HTML 语法学习
- 2017暑假集训 div1 简单搜索
- hdfs读写数据的工作机制
- Python3 安装 BuiltWith 模块
- 【原创】【数论】HDU-1452 Happy 2004(约数和定理)