跨页面的多选功能实现

这两天做了个人员选择的东西，觉得还有点意思，上来给大家砸一砸。先说说需求，就是要从部门人员的树中选择人或者部门，得到相关的ID来进行保存。考虑到很多页面都会用这个功能每个页面去做显然太傻就做成了个用户控件。如果把树放在控件中的话页面会很不美观而且很占页面控件（试想如果有几百个人员，树展开的话用户会想抽你的脸）。
我是这样思考的将控件分成两个部门，用一个ListBox来显示选中了哪些人，用一个页面来显示树并进行选择操作。用户用控件的BUTTON打开选择页面进行选择，完成后关闭选择页面并把选择的值插入到LISTBOX里面，我的思路就是这样的，两个页面传值以前用JavaScript做过，觉得没太大问题，但是后来这个小问题还让我伤了下脑筋。至于怎么从树中取得值的问题我在这里就不说了。
首先是通过用户控件打开选择页面，因为后面我们要把值回写到用户控件的控件中，所以必须让打开的页面知道要对哪些控件进行操作，所以我把要操作的控件的ID做为一个参数传到要打开的页面。在用户控件中的控件显示到页面的时候他的实际ID会发生变化，所以在这里要用CLIENTID属性，不然无法正确获得控件的ID

Page.RegisterClientScriptBlock("open",@"

function openWin( )

{

var newwin=window.open('selectUser.aspx?par="+lbuser.ClientID+@"','selectUser','width=200,height=200');

newwin.opener=this.window;;

}</script>");

btShow.Attributes.Add("onclick","openWin();");

在来说说打开后的选择页面。我把树中选中节点的名字和值分别用两个ARRAYLIST保存（当然他们对应的顺序是在保存时候控制的，不会出现不对应的问题）。然后用程序生成JAVASCRIPT。

string option="";

for(int o=0;o<al.Count;o++)

{

option=option+"opener.document.all."+Request.QueryString["par"].ToString()+".options["+o.ToString()+"]=new Option('"+alname[o].ToString()+"','"+al[o].ToString()+"');";

}

string scr=@"

"+option+@"

window.close();

</script>";

Response.Write(scr);

这样就完成了我要的功能。但是实际操作的时候发现JAVASCRIPT报错，说错误操作方法。看了代码觉得没有什么问题，把生成的对LISTBOX进行赋值的代码插到控件的页面执行就是好的，但是在打开的子页面却出现错误，但是以前做过类似的程序如修改斧页面TEXTBOX的值都是行的通了。后来做了几个实验发现是Option对象的问题，我想可能是子页面的对象无法在父页面使用吧，我试成把代码改成

option=option+"opener.document.all."+Request.QueryString["par"].ToString()+".options["+o.ToString()+"]=opener.Option('"+alname[o].ToString()+"','"+al[o].ToString()+"');";

问题解决了，原来要用opener的Option对象才行（以前没遇到过这个问题，呵呵，太笨了）。当我以为这个功能已经完成的时候又发现一个致命的BUG，就是LISTBOX在有提交动作以后就变成初始状态了，里面的值无法保存，再次郁闷了，如果在提交以后LISTBOX初始化那对这个功能来说就没有任何意义了，不能获得值了不别人保存吧。只看不用？会被人砸的。试了很多方法，最后得出一个结论，用JAVASCRIPT填充的LISTBOX在提交过程中会回到初试状态。后来想了一个办法，加了一个隐藏域，当子页面反写的时候反写隐藏域（隐藏域在提交过程中里面的值是可以保存的），LISTBOX用来显示，隐藏域用来保存值。经过测试以后问题得到解决，这样前面打开窗口的代码要修改一下，要把隐藏域的ID也传到子页面，这样才能回写值。
这还不算完，还要加一个小功能，就是在页面每次PAGE_LOAD的时候要检查隐藏域，如果不为空就要把值取出来对LISTBOX进行赋值，不然有提交动作的时候LISTBOX就又空了

lbuser.Items.Clear();

if (!tbValue.Value.Equals(""))

{

string[] vv=tbValue.Value.Split(';');

for (int i=0;i<vv.Length;i++)

{

if(vv[i].Equals(""))continue;

string[] nv=vv[i].Split(',');

ListItem li=new ListItem(nv[0],nv[1]);

lbuser.Items.Add(li);

}

功能到此就全部完成了，希望能给有同样问题的朋友一点启示。

转载于:https://www.cnblogs.com/DarkAngel/archive/2005/08/30/225965.html

跨页面的多选功能实现相关推荐

在ASP.NET中跨页面实现多选
作者:孟宪会微软MVP SelectMultiPages.aspx <%@ Page EnableViewState="true" CodeBehind="Sel ...
Vue3 - Element plus 实现 “带分页“ 表格组件，实现跨页进行 “分页勾选“ 的多选功能（解决分页表格组件＜el-table＞跨页后已前勾选的行自动消失问题）详细示例解决教程
前言在 Vue3 项目中,使用 Element Plus 组件库的表格组件时,出现了跨页勾选复选框消失的问题. 本文实现了 vue3 中 element plus 表格组件 <el-table ...
php中在页面显示多选的内容,在html页面的表单选项中如何能有多选功能?（示例）...
在上篇文章[html页面中的单选框功能是怎么操作实现的?(示例)]中,我为大家详细介绍了如何实现html页面中单选框功能,那边本篇文章继续给大家介绍关于html复选框怎么设置即html多选按钮的相关知 ...
如何在vue项目中，跨页面（跨路由）使用新手引导工具 Intro.js
文章目录功能要求使用Intro.js遇到的问题以及代码 1.不能跨路由 utils -> intro.js 2.要在页面引导所需显示的数据全部拿到且渲染完毕以后加载Intro.js intr ...
面试官：前端跨页面通信，你知道哪些方法？
引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个"独立"的运行环境,即使是全局对象也不会在多个Tab间共享.然而有些时候,我们希望能在这些" ...
URL、Session、Cookies、Server.Transfer、Application和跨页面传送。
URL.Session.Cookies.Server.Transfer.Application和跨页面传送. [分析] 本题考查面试者对ASP.NET中多页面传值的理解是否全面.因为ASP.NET的页 ...
php 微信小程序循环多选,微信小程序实现多选功能
本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下代码: {{num + 1}}/{{quesyion.length}}{{question[num][0]}} A {{qu ...
java按钮触发另一个页面_前端跨页面通信，你知道哪些方法？
戳蓝字「前端技术优选」关注我们哦! 引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个"独立"的运行环境,即使是全局对象也不会在多个Tab间共享.然而有 ...
点击编辑框全选内容java_Android 中使用EditText 点击全选再次点击取消全选功能
最近在开发浏览器碰到这么一个需求:点击地址栏的时候,需要全选并调出键盘,再次点击就取消全选显示光标.点击屏幕除地址栏其他位置时,键盘隐藏,隐藏光标. 大部分浏览器都是这样的逻辑,这样可以提高用户体验, ...
两个html页面之间通讯,面试官：前端跨页面通信，你知道哪些方法？
引言在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个"独立"的运行环境,即使是全局对象也不会在多个Tab间共享.然而有些时候,我们希望能在这些" ...

跨页面的多选功能实现

跨页面的多选功能实现相关推荐

最新文章

热门文章