关于在eXtremeComponents列表中隔页存值的解决办法
编程技术 / houtizong 发布于 3年前 64
关于在eXtremeComponents列表中隔页存值的解决办法
环境描述：
在eXtremeComponents列表中在我们点击上下页翻页和选择每页多少行时，该组件是将列表的整个form提交，这时会带来整个页面的刷新，无法将每页由用户所产生的数据存储到当前页面的javaScript对象中，不能很好的实现隔页存值。在一个查询页面中，我们需要将查询条件和数据列表在一个页面中显示（查询条件在页面的上半部分页面，数据列表在下半部分显示），数据列表中每行都有一个checkbox选择框在每行记录的最前端，提供给用户对查询出来的数据列表进行筛选，并且在上下翻页，切换每页显示多少行时要记录原先所选择的记录（即实现隔页存值）。
解决方案：
方案一：使用ajax实现异步提交，只刷新数据列表，将用户所选值记录在列表以外的javaScript对象中。
方案二：使用iframe，在iframe中显示数据列表，当用户进行上下翻页或切换每页显示行数时将form提交到iframe页面中，将用户所选记录保存在查询的父页面中。
参考实现：
方案一在不改动eXtremeComponents组件源代码的情况下使用ajax异步提交，需要对页面上翻页和切换每页显示多少行的按钮进行再包装，实际写出来的代码量要比方案二要多很多，所以在此使用方案二，具体实现如下：
首先有两个页面，一个是数据列表显示的页面文件，一个是查询页面文件，在这个查询页面中使用iframe引用数据列表页面文件。以下是两个演示页面的源文件：
Noname1.html 查询页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
var saveCBValues=new Array();//保存所有选择的值
function submitCheck(){
alert("将要提交的id为："+saveCBValues);
}
function submitQuery() {
document.forms(0).target="dataList";//提交到iframe
document.forms(0).submit();
}
</script>
</HEAD>
<BODY>
<input type="button" value="提交用户所选值" onclick="submitCheck()"/>
<form action="./Noname2.html">
<table align='center' border='1' bordercolor='#8CB3E3' cellpadding='0'
cellspacing='0'>
<tr>
<td width="125" >查询条件1</td>
<td width="125" >1</td>
</tr>
<tr>
<td>查询条件2</td>
<td>2</td>
</tr>
<tr>
<td>查询条件3</td>
<td>3</td>
</tr>
<tr>
<td colspan="2" align="middle">
<input type="button" value="查询" onclick="submitQuery()"/>
</td>
</tr>
</table>
</form>
<IFrame name="dataList" id="dataList" src="" frameBorder="0" width="100%" height="500">
</IFrame>
</BODY>
</HTML>
Noname2.html 数据列表页面（没有使用eXtremeComponents标签，只是演示，仅供参考）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
//是否全选功能
function checkAll(cbObj){
var rowcbList=document.getElementsByName("rowCB");
if(rowcbList!=null&&rowcbList.length>0){
if(cbObj.checked){//被选中，此时要全选
for(var i=0;i<rowcbList.length;i++){
rowcbList[i].checked=true;
saveCBVal(rowcbList[i]);
}
}else{//未被选中，此时不要全选，全部撤掉
for(var i=0;i<rowcbList.length;i++){
rowcbList[i].checked=false;
saveCBVal(rowcbList[i]);
}
}
}
//alert("全选所保存的值为："+parent.saveCBValues);
}
//保存所选值,操作父窗口中的javaScript数组对象得用parent.来引用
function saveCBVal(cbObj){
if(cbObj.checked){//被选中
//保存所选值
parent.saveCBValues[cbObj.rowId]=cbObj.content;
}else{//未被选中
//删掉所选值
parent.saveCBValues[cbObj.rowId]=null;
}
//alert("保存的值为："+parent.saveCBValues);
}
</script>
</HEAD>
<BODY>
<table align='center' border='1' bordercolor='#8CB3E3' cellpadding='0'
cellspacing='0'>
<tr>
<td width="75">
<input type='checkbox' id='isAllSelect' onclick='checkAll(this)'>全选
</td>
<td width="125">
属性1
</td>
<td width="125">
属性2
</td>
<td width="125">
属性3
</td>
</tr>
<tr>
<td>
<input type='checkbox' rowId='1' id='rowCB' onclick="saveCBVal(this)" content="本行记录ID_1"/><!--其中rowId是数据列表查询时所返回的rownumber-->
</td>
<td>
a
</td>
<td>
b
</td>
<td>
c
</td>
</tr>
<tr>
<td>
<input type='checkbox' rowId='2' id='rowCB' onclick="saveCBVal(this)" content="本行记录ID_2"/><!--其中rowId是数据列表查询时所返回的rownumber-->
</td>
<td>
d
</td>
<td>
e
</td>
<td>
f
</td>
</tr>
</table>
<script>
//回显示先前所选值
function reViewCB(){
var rowcbList=document.getElementsByName("rowCB");
if(rowcbList!=null&&rowcbList.length>0){
var flag=true;//是否全选的标记
for(var i=0;i<rowcbList.length;i++){
if(parent.saveCBValues[rowcbList[i].rowId]!=null&&parent.saveCBValues[rowcbList[i].rowId]==rowcbList[i].rowId){
rowcbList[i].checked=true;//回显
}else{
flag=false;
}
}
if(flag){//将全选checkbox设置为选中
document.getElementById("isAllSelect").checked=true;
}
}
}
reViewCB();
</script>
</BODY>
</HTML>
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
