保存跨页面选择的数据

使用JAVASCRIPT操作COOKIE保存跨页面选择的数据，原理很简单：使用javascript把选中的数据写入cookie和一个隐藏控件(这样服务器端也可获取到选中的数据了)，避免选中的数据在url上传递，带来潜在的危险。
在这个例子里最重要的是JS，如何获取数据和分页与JS实现方法是无关的，当然需要把Chebox控件的值设为要保存的数据。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SaveValueOfMultiPages.aspx.cs" Inherits="test.DEMO.SaveValueOfMultiPages" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>多页面选择值</title>
    <script language="JAVASCRIPT" type="text/JavaScript">
        var splitCharacter = [{id:1,name:"doll"},{id:2,name:"doll;"},{id:3,name:"doll="},{id:4,name:"#ff0000"}]; 
        
        var ObjSelectValue ;//获取存放选中值的控件对象
        var ObjCheckBox ;//获取CheckBox对象集合
        window.onload = function()
        {
            ObjSelectValue = getObjByID("HdSelectedValues");  
            ObjCheckBox = getObjByName("ckBox");          
            CheckIn(getSelectValue());
        };
  
        //初始化选中信息
        function CheckIn(cookies) 
        {  
           for(var i=0;i<ObjCheckBox.length;i++)
           {        
                if(cookies.split(ObjCheckBox[i].value + ",").length > 1)
                {   
                      ObjCheckBox[i].checked = true;
                  }
           }
        }        
        //添加或移出选中的值        
        function AddOrRemoveValues(objCkBox) 
        {  
            if(objCkBox.checked)
            { 
                var cookies = document.cookie;
                if(cookies.split(splitCharacter[1].name).length == 1)
                {
                    if(cookies.split(splitCharacter[0].name).length > 1)
                    {
                        cookies = getSelectValue();    
                        if(cookies.split(",").length > 10) //如果超过10个就不让选择，并提示
                        {
                           alert("最多只能对比10个!");
                           objCkBox.checked = false;
                           return;
                        }
                        if(cookies.split(splitCharacter[3].name).length > 1)
                        {
                            cookies = cookieStr.replace(splitCharacter[3].name,"");
                        }
                    }
                }           
               ObjSelectValue.value += objCkBox.value + ",";   
            }
            else
            {
                 ObjSelectValue.value = ObjSelectValue.value.replace(objCkBox.value+",","");
            }
            document.cookie = splitCharacter[2].name+ObjSelectValue.value;  
        }    

        //清除选中的值
        function clearSelectValue() 
        {           
           var cookies = getSelectValue();
           for(var i=0;i<ObjCheckBox.length;i++)
           {            
                if(cookies.split(ObjCheckBox[i].value+",").length > 1)
                {   
                      ObjCheckBox[i].checked = false;
                  }
           }
           document.cookie = splitCharacter[2].name + "null";
           ObjSelectValue.value = "";
           alert("数据清空完成");
       }
           
        //获取选中的值
        function getSelectValue () 
        { 
            var ReturnValue = "";   
            var CookieString = document.cookie.split(splitCharacter[2].name);
               if(CookieString.length > 1)   
            { 
                var CookieArray = CookieString[1].split(';'); 
                if(CookieArray.length>0)
                {
                    ReturnValue = CookieArray[0];   
                }
            }
            else
            {
                ReturnValue = "";
            }
            if(ReturnValue.indexOf(",") != -1)
            {
                ObjSelectValue.value = ReturnValue;
            }
            return ReturnValue;  
        }
        function getObjByID(objID)
        {
            return document.getElementById(objID);
        }
        function getObjByName(objName)
        {
            return document.getElementsByName(objName);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" value="clear check value" onclick="clearSelectValue();">
     <table width="70%" height="36" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td width="40px">check</td>
            <td width="50%" align="left">ShipName</td>
            <td align="left">ShipAddress</td>
        </tr>
        <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
        <tr>
            <td><input onclick="AddOrRemoveValues(this)" value="<%# Eval("OrderID") %>" name="ckBox" type="checkbox" /></td>
            <td align="left" width="50%" ><%# Eval("ShipName") %></td>
            <td align="left" ><%# Eval("ShipAddress") %></td>
            </tr>
        </ItemTemplate>
        </asp:Repeater> 
        
     </table> 
    </div>
        <asp:Literal ID="ltPage" runat="server"></asp:Literal>
        <input type="hidden" id="HdSelectedValues" />
    </form>
</body>
</html>
posted on 2007-06-02 12:36  空空儿  阅读(866)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3