jquery中在一个页面饮弹出编辑对话框的实例

jquery中在一个页面中弹出编辑对话框的实例

在web开发中，一个页面的某些字段可能需要通过弹出浮出对话框的形式完成，这就要用到弹出框和其依赖的父类窗口的控制句柄，只有利用这个句柄才能操作对应页面的字段值的修改，当然具体的业务场景需要中的页面来源的数据需要从数据库中获取，并且带有更有的处理判断逻辑，这里只是给一个简单的弹出对话框，并且用jquery对页面元素对值进行回写。

主要用到的插件是：

弹窗的父页面：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="lhgdialog.min.js
?self=true&skin=default"></script>
 <link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>
                      <div class="consolestick">
                <div class="stickname"><strong>名称</strong><span style="color:red; font-weight:600;">*</span>
				</div>
                <div class="stickdetail">
                <div class="nomalinput33">
                <input class="noborderinput33" id="riskNameId" type="text" maxlength="10" value="爆炸物相关书籍" readonly />
				</div>
                </div>
                </div>
				
                <div class="consolestick">
				<div class="stickname"><strong>父节点<span style="color:red; font-weight:600;">*</span>[<a href="#" onclick="editPath()">编辑</a>]</strong>
				 </div>
                 <div class="stickdetail">
                 <div class="nomalinput22">
			        <input class="noborderinput22"  id="parentPathId"  type="text" maxlength="900" value="禁售商品>易燃易爆类>其他涉爆商品" readonly/>
			   	 </div>
                 </div>
                 </div>
   
</body>



<script type="text/javascript">

 var riskId="123";

    function editPath(){         //从父类窗口中弹出编辑路径对话框

        var dialog = $ .dialog({

            title:'编辑风险路径',
            data
:riskId,
            content:'url:casepathmodify11.html',

            lock:true,
            width:700,
            height:200,
            resize:true
        });
    }

</script>
</html>

弹窗页面的html：

casepathmodify11.html:

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        var api = frameElement.api, W = api.opener;
  //父子窗口的句柄，可以通过他们操作对应页面的标签和属性值，类似jquery选择器

        var riskId = api.data
;        // 得到riskId,通过这种方式得到父类窗口中穿过来的post参数值

        window.onload = function () {
            $('#riskName').val(W.
$('#riskNameId').val());
            var pathArray = W.$('#parentPathId').val().split(">");
            for (var i = 0; i <pathArray.length; i++) {
			   var j=i+1;
			   var selectedText=pathArray[i];
              $("#"+j+"Catalog option
").each
(function(){
			     var optionText=$(this)
.text().trim();   // this指的是前面的option标签选择器

				 if(optionText==selectedText){
				   $(this).attr("selected",true);
   //遍历对选菜单属性值，一个多选菜单中的某一个option属性为selected

				 }
			  });
            }
        };

        api.button({
            id:'valueOk',
            name:'确定',
            callback:ok
      //执行确定操作后的回调函数

        });
        api.button({
            id:'valueCancel',
            name:'取消'
        });
        /* 函数ok即为上面添加按钮方法中callback回调函数调用的函数 */

        function ok()
        {
           
                W.$('#riskNameId').val($('#riskName').val());
                var newPath="";
                for(var i=1;i<=4;i++){
                    var elem = $("#"+i+"Catalog").find("option:selected").text().trim();
                    if(elem=="") {
					alert("不能选项中不能有空选！");
					return;
					}
                    newPath+=elem+">";
                }
                W.$('#parentPathId').val(newPath.substring(newPath,newPath.length-1));
            alert("修改成功!");
            return true;

        };
    </script>

    <style type="text/css">
        td {
            padding: 6px;
            height: 10px;
        }

        .selects {
            margin-left: 2px;
            width: 120px;
            height: 25px;
        }

        .titles {
            text-align: right;
            height: 25px;
            font-size: 14px;
        }

        input {
            height: 22px;
            font-size: 13px;
        }
    </style>

</head>
<body>
<table>
    <tr>
        <td class="titles">名称</td>
        <td>
            <input name="riskName" id="riskName" maxlength="16">
        </td>
    </tr>
    <tr>
        <td class="titles">类型</td>
        <td>
            <select class="selects" id="1Catalog" name="1Catalog" >
                <option value=""></option>
				<option value="cashi1">ceshi1</option>
				<option value="cashi1">ceshi2</option>
				<option value="cashi1">禁售商品</option>		
            </select>
            <select class="selects" id="2Catalog" name="2Catalog" >
                <option value=""></option>
				<option value="cashi1">ceshi1</option>
				<option value="cashi1">ceshi2</option>
				<option value="cashi1">易燃易爆类</option>		
            </select>
            <select class="selects" id="3Catalog" name="3Catalog" >
                <option value=""></option>
				<option value="cashi1">ceshi1</option>
				<option value="cashi1">ceshi2</option>
				<option value="cashi1">其他涉爆商品</option>		
            </select>
            <select class="selects" id="4Catalog" name="4Catalog" >
                <option value=""></option>
				<option value="cashi1">ceshi1</option>
				<option value="cashi1">ceshi2</option>
				<option value="cashi1">其他涉爆商品</option>		
            </select>
        </td>
    </tr>
</table>
<div id="tips"></div>
</body>


</html>

相见具体效果，请参考附件。

jquery中在一个页面饮弹出编辑对话框的实例

相关推荐