弹出对话窗口

最新推荐文章于 2018-06-18 21:24:11 发布

seminmredoxu

最新推荐文章于 2018-06-18 21:24:11 发布

阅读量1.1k

点赞数

文章标签： class function border input url div

本文链接：https://blog.csdn.net/seminmredoxu/article/details/7035777

版权

最近写了一个弹出对话窗口进行选择的功能，由于公司框架的问题加上自己经验不够，实现起来遇到了一定的问题。当用window.showModalDialog()很容易弹出窗口，但是要查询的时候就的访问数据库，并返回到弹出的对话框，这是第一个问题就来了，就是框架内是利用div填充技术来实现页面的布局，这样就没有了对弹出窗口刷新的方法（试过对form的submit提交，没用，猜测是提交到action后回调函数找不到弹出窗口地址），这时我就想用ajax+json去实现，并成功从数据库返回了自己要的list，可惜展现js展现list又是个问题，后面我想返回一个request=html的页面，那就得从框架入手了，我把框架内部的js实现div填充看了下，发现它固定填充了局部的div，那么刚好，我只要用这个方法，从新写个页面，数据填充到该页面，并把该页面给填充到弹出窗口的div即可。

其中还遇到一些小问题，比如div填充的时候，当从原窗口点击弹出窗口时，页面先加载js还是先加载body的问题，当我初次进入弹出窗口的时候要实现一次查询，那么就在加载body后去做一次查询，$(function(){ });方法可以实现body加载后在掉它里面的js，从而实现首次加载查询。还遇到一个要提出来的问题就是当用form提交的时候，由于弹出窗口跟填充页面加载顺序的问题，导致填充页面的<input>文本框在form（弹出窗口内的）提交找不到。最好以免麻烦，用的是个get带参提交。

现在我就把它拿出来共享下，同时也是对自己的一个提高：

首先在原窗口写弹出窗口的js：

</script>

<body>

</body>

弹出窗口：

// 首页
function msCheck1(){
  var customerCode = $('#customerCode').val();
  var customerName = $('#customerName').val();
  forwordForm(1,customerCode,customerName);
}
// 上一页
function msCheck2(){
var pageNo = parseInt($('#currPageNo').val())-1;
  var customerCode = $('#customerCode').val();
  var customerName = $('#customerName').val();
  forwordForm(pageNo,customerCode,customerName);
}
// 下一页
function msCheck3(){
  var pageNo = parseInt($('#currPageNo').val())+1;
  var customerCode = $('#customerCode').val();
  var customerName = $('#customerName').val();
  forwordForm(pageNo,customerCode,customerName);
}
// 尾页
function msCheck4(){
  var pageNo = $('#pageCount').val();
  var customerCode = $('#customerCode').val();
  var customerName = $('#customerName').val();
  forwordForm(pageNo,customerCode,customerName);
}
// goto页
function msCheck5(){
  var pageNo = $('#goPageNo').val();
  var customerCode = $('#customerCode').val();
  var customerName = $('#customerName').val();
  forwordForm(pageNo,customerCode,customerName);
}

// query
function msCheck(){
     var customerCode = $('#customerCode').val();
  var customerName = $('#customerName').val();
  forwordForm(1,customerCode,customerName);
}

//跳转至
function forwordForm(pageNo, customerCode, customerName){
  var url = '/DKFCustomer/dkf/trade/customerSelectQuery.do?pageNo='+pageNo+'&customerCode='+customerCode+'&customerName='+customerName;
  url = encodeURI(url);
  url = encodeURI(url);
  getOperationPage(url);
}

function customer() {
  var value;
}
function chooseReason() {
  var cus = new customer();
  cus.value = $('#value').val();
  window.returnValue = cus;
  window.close();
}
//此处当body加载完后执行
$(function(){
  var customerCode = $('#code').val();
     var customerName = "";
     forwordForm(1,customerCode,customerName);
});

</script>

</head>

填充页面：这下面的好写，留了重点

                <td align="right"><input type="button" class="STYLE2" id="button" value="查询" οnclick="msCheck();"/></td>
                <tr>
             <td width="4%" height="22" background="/biz/image/biz/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE2">客户编号</span></div></td>
             <td width="4%" height="22" background="/biz/image/biz/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE2">客户名称</span></div></td>
             <td width="2%" height="22" background="/biz/image/biz/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE2">选择</span></div></td>
            </tr>
            <#list orgcustomerlist as list>
             <tr>
               <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE2">${list.value!''}</span></div></td>
               <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE2">${list.name!''}</span></div></td>
               <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE2" style="cursor:hand" οnclick="javascript:$('#value').val(${list.value!''});chooseReason();"><img alt="选择" src="/biz/image/biz/edit.gif"></span></div></td>
             </tr>
                      <tr>
          <input type="hidden" name="pageCount" id="pageCount" value="${pageCount!''}"/>
   <input type="hidden" name="currPageNo" id="currPageNo" value="${currPageNo!'1'}"/>
            <td class="STYLE2">  当前第 ${currPageNo}/${pageCount} 页</td>
            <td><table border="0" align="right" cellpadding="0" cellspacing="0">
                <tr>
                <#if currPageNo gt 1>
                  <td width="40"><span οnclick="msCheck1();"><img border="0" style="cursor:hand" alt="第一页" src="/biz/image/biz/first.gif" width="37" height="15"/></span></td>
                  <td width="45"><span οnclick="msCheck2();"><img border="0" style="cursor:hand" alt="上一页" src="/biz/image/biz/back.gif" width="43" height="15"/></span></td>
       </#if>
    <#if currPageNo lt pageCount>
      <td width="45"><span οnclick="msCheck3();"><img border="0" style="cursor:hand" alt="下一页" src="/biz/image/biz/next.gif" width="43" height="15" /></span></td>
                  <td width="40"><span οnclick="msCheck4();"><img style="cursor:hand" alt="最后一页" src="/biz/image/biz/last.gif" width="37" height="15" border="0"/></span></td>
    </#if>
                  <td width="100"><div align="center"><span class="STYLE2">转到第<input id="goPageNo" name="goPageNo" type="text" maxlength="4" style="width:30px; border:1px solid #999999;" />页</span></div></td>
                  <td width="40"><span οnclick="msCheck5();"><img style="cursor:hand" alt="跳转到指定页面" src="/biz/image/biz/go.gif" width="37" height="15" border="0"/></span></td>
                </tr>

seminmredoxu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹出对话窗口

最近写了一个弹出对话窗口进行选择的功能，由于公司框架的问题加上自己经验不够，实现起来遇到了一定的问题。当用window.showModalDialog()很容易弹出窗口，但是要查询的时候就的访问数据库，并返回到弹出的对话框，这是第一个问题就来了，就是框架内是利用div填充技术来实现页面的布局，这样就没有了对弹出窗口刷新的方法（试过对form的submit提交，没用，猜测是提交到action后回调函
复制链接

扫一扫