关于在eXtremeComponents列表中隔页存值的解决办法

程序员文章站 2023-12-25 15:33:51

...

关于在eXtremeComponents列表中隔页存值的解决办法

环境描述：
在eXtremeComponents列表中在我们点击上下页翻页和选择每页多少行时，该组件是将列表的整个form提交，这时会带来整个页面的刷新，无法将每页由用户所产生的数据存储到当前页面的javaScript对象中，不能很好的实现隔页存值。在一个查询页面中，我们需要将查询条件和数据列表在一个页面中显示（查询条件在页面的上半部分页面，数据列表在下半部分显示），数据列表中每行都有一个checkbox选择框在每行记录的最前端，提供给用户对查询出来的数据列表进行筛选，并且在上下翻页，切换每页显示多少行时要记录原先所选择的记录（即实现隔页存值）。
解决方案：
方案一：使用ajax实现异步提交，只刷新数据列表，将用户所选值记录在列表以外的javaScript对象中。
方案二：使用iframe，在iframe中显示数据列表，当用户进行上下翻页或切换每页显示行数时将form提交到iframe页面中，将用户所选记录保存在查询的父页面中。

参考实现：
方案一在不改动eXtremeComponents组件源代码的情况下使用ajax异步提交，需要对页面上翻页和切换每页显示多少行的按钮进行再包装，实际写出来的代码量要比方案二要多很多，所以在此使用方案二，具体实现如下：
首先有两个页面，一个是数据列表显示的页面文件，一个是查询页面文件，在这个查询页面中使用iframe引用数据列表页面文件。以下是两个演示页面的源文件：

Noname1.html 查询页面

   function submitCheck(){
      alert("将要提交的id为："+saveCBValues);
   }

   function submitQuery() {
  document.forms(0).target="dataList";//提交到iframe
  document.forms(0).submit();
}

</script>
</HEAD>

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"/>
   </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"/>
   </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>

关于在eXtremeComponents列表中隔页存值的解决办法

关于在eXtremeComponents列表中隔页存值的解决办法

关于ECSdie列表中隔页存值的问题(CheckBox_Select)