当前位置:首页 > 开发 > 系统架构 > 架构 > 正文

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

发表于: 2008-12-11   作者:crabdave   来源:转载   浏览次数:
摘要: 关于在eXtremeComponents列表中隔页存值的解决办法   环境描述:在eXtremeComponents列表中在我们点击上下页翻页和选择每页多少行时,该组件是将列表的整个form提交,这时会带来整个页面的刷新,无法将每页由用户所产生的数据存储到当前页面的javaScript对象中,不能很好的实现隔页存值。在一个查询页面中,我们需要将查询条件和数据列表在一个页面中显示(查询

关于在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>

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
之前有人提到要在列表显示一些特定的属性,除了自带的名字,价格等。因为列表页和产品页都有一个同
如下图所示,用户在上传文件时,弹出的服务器列表选择对话框为空,无法进行选择操作。 可能的问题原
首先介绍一个简单的方法: SharePoint不提供视图权限的直接控制方法。 不过可以采用另一种方式实现
  昨天,乐晨分享了“如何用织梦程序搭建一个网站”,当我们把一个完整的织梦程序网站搭建好后,
一、介绍 在系统中有两个公用的jsp页面,listCommon.jsp和addCommon.jsp,分别是公共列表页和公共编
以“简单的领导简介”为例,欢迎大家指正 背景:项目中需要有领导简介的模块,就开始制作领导简介,
上周末抽空重构了一下JX3PVE的PVE栏目,只上线了宏库栏目,结果出了一堆Bug。奈何公司这段时间都在
在PSI的QQ群中,聊起了关于PSI在插件方面的话题,这个方面我有更宏大的计划,写这篇博客作为备忘录
dedecms在软件列表页调出下载链接 修改前: <img alt="ded
当用户查看一个版块帖子列表页,短时间内没有刷新操作,如果有其它用户在相同版块发帖时,一定时间
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号