showModalDialog传值

项目中出现一个bug，就是在弹出框选择了部门的值以后，写入父页面，当在点击查找部门的按钮后，已经选择的值要带入到弹出框中。类似下面的情况。

解决方案就是利用showModalDialog 与json进行传值

父页面在点击按钮调用下面的js方法。js代码

function updateVisibleDept() {//获得部门ID和部门名称var visibleDeptIds= document.getElementById("userVisibleDeptIds").value;var deptNames =document.getElementById("userVisibleDeptNames").value;var obj = new Object();obj.deptId = visibleDeptIds;obj.deptName = deptNames;var url="../common/user_manage!showUserUpdateDeptPage.action";var dataJson = window.showModalDialog(url,obj,"dialogWidth = 450px;dialogHeight =400px");var deptNames =$("userVisibleDeptNames");var deptIds =$("userVisibleDeptIds");if(dataJson != null ) {deptNames.setValue(dataJson.dataName);deptIds.setValue(dataJson.dataId); }}

弹出页面的js代码，在数据加载完成后显示

function afterWindowOnload() {var obj = window.dialogArguments ;if(obj !=null) {//得到拼接的deptId和名称var deptIds = obj.deptId.replace(/(^\s*)|(\s*$)/g, "");var deptNames = obj.deptName;//获得selectvar visbleDept = document.getElementById("selectedData");//创建optionvar opt = document.createElement('option');if(deptIds != "" && deptIds !=null) {if(deptIds.indexOf(",") == -1 ) {//如果不包括","则说明只选择了一个部门 获得为空、空字符串opt.setAttribute("value", deptIds);opt.innerText = deptNames;visbleDept.appendChild(opt); //移除已经选择的部门fnRemoveItem(deptNames);}else {var deptIdArray = deptIds.split(",");var deptNameArray = deptNames.split(",");visbleDept.options.length = deptIdArray.length;for(i=0 ; i<deptIdArray.length;i++) {visbleDept.options[i].text = deptNameArray[i];visbleDept.options[i].value = deptIdArray[i];fnRemoveItem(deptNameArray[i]);}}}}}

//移除已经选过的部门function fnRemoveItem(strText){var selTarget = document.getElementById("selectingData");for(var i=0;i<selTarget.options.length;i++){if(selTarget.options[i].text == strText){selTarget.remove(i);i = i - 1;//注意这一行}}}

在选择部门点击确定以后，返回父页面并给父页面赋值

function getSelectedDept() {var dataJson = getSelectedData();window.returnValue = dataJson;closeWin();}

getSelectData();

// 得到选择的数据function getSelectedData() {var oRight = $("selectedData");var dataJson = {dataId:"", dataName:""};if(!hasOptions(oRight)) {return dataJson; } var dataId = "";var dataName = "";for (var i=0;i<oRight.options.length;i++) {if (dataId == "") {dataId = oRight.options[i].value;dataName = oRight.options[i].text;}else {dataId = dataId + "," + oRight.options[i].value;dataName = dataName + "," + oRight.options[i].text;}}dataJson.dataId = dataId;dataJson.dataName = dataName;return dataJson; }

相应的select

 <select id="selectedData" name="selectedData" class="selectDept" οnclick="unSelectData()" multiple style="width: 85%; height: 95%; overflow: auto;font-size: 18px;background-color: #CDD0FD"></select>

其中红色部分是父页面的值传递给弹出框，绿色部门则是弹出框的值返回给父页面。

图片中的解决方法也是利用该方法，只是因为过程比上面的更稍微复杂一些所以没有写出来，不过思路是一样的。

showModalDialog传值相关推荐

showModalDialog 传值及刷新
(一)showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口. farther.html ------------------------- ...
window.open()和window.showModalDialog 的使用及传值操作
本人在使用时主要实现如下个功能, 以对话框形式弹出画面,且要求对话框置顶,不可操作其他画面,并且关闭画面时刷新父页面. window.open 可实现以对话框形式弹出画面,并且关闭画面时刷新父页面.但 ...
自己使用window.open和window.showModalDialog在父子窗口传值的实践简单总结
朋友最近问我一个问题:子窗口添加数据并返回给父窗口一些添加成功的数据,同时父窗口刷新显示添加前的页面.相比很多人都相当熟知了,顺便记录一下: ==========================win ...
Chrome不支持showModalDialog的解决方案
Chrome不支持showModalDialog的解决方案昨天在使用showModalDialog的时候,遇到如下问题: 如果子窗口被刷新过,那么父窗口就接受不到子窗口的返回值. 为了解决这个问题, ...
asp.net url传值，弹窗
一,<a>标签链接式传值 1, <a href="News_list.aspx?ClassID=<%#((DataRowView)Container.DataItem ...
模式窗口window.showModalDialog()的用法
模式窗口的用法一.问题: 我想弹出一个窗口,然后在弹出的窗口里,选择或输入一些信息,要求这些信息返回到父页面. 建立父页面:a.htm <html> <head> & ...
关于模态窗口(showModalDialog)的专题【收藏】
关于模态窗口(showModalDialog)的专题[收藏] 转自:http://www.cnblogs.com/donnet/articles/1039509.html 1.模态窗口的打开,mode ...
window.showModalDialog不兼容解决办法
1.传值的解决办法 1.直接设置父窗口的DOM对象的值. window.opener.document.getElementById("parentWindowControlId" ...
window.showModalDialog() 过时替代方案
一.window.showModalDialog 方法说明 window.showModalDialog( ) 方法的作用是创建和展示一个指向特定网页的模态对话框. 该方法已经过时,特性已经从 Web ...

showModalDialog传值

showModalDialog传值相关推荐

最新文章

热门文章