window.showModalDialog弹出模态窗口

[转http://www.cnblogs.com/zhouzhaokun/archive/2011/11/14/2248523.html] 

在我们平时的B/S web开发当中，可能很多时候我们需要有这么一个场景！某些文本框的值是用户可以输入的，也是可以选择的，比如：新增一篇文章，我们可以指定作者是张三，这样的话我们可以在文本框中输入“张三”这个名字，但是有时候，我们可能是转载的文章，有可能这个作者是系统中已经存在的，又或者不一定是系统中存在的。这个时候我们可以给网编这样一个功能：如果作者是系统中已经存在的，网编可以点击某个连接或者别的什么东西来从系统中选择作者，如果作者是系统之外的，网编可以直接输入作者的姓名。

      以上这个情景完全虚构，或者上边这一段文字在系统设计当中有问题。此刻，我们可以忽略掉。本文重点不再系统设计是否合理。

     直接上图：效果图大致如下：

     现在是需求是这样的：当网编点击超链接“选择的时候”，我们会有一个模态弹窗蹦出来让网编去选择某个数据。（当然这里可以用JS控制弹出DIV来实现，也不在本文讨论范畴！）

     以上情况是，姓名直到体重5个内容 ，网编可以去输入（如果网编想偷懒，也可以点击选择按钮），也可以选择。当在弹出的模态窗体中任意一行数据上鼠标点击的时候。返回这一行的数据。并且赋值给页面中的文本框。

    这种效果想想很容易实现，不过鉴于本人技术有限，以前实现类似功能只能返回一个数据。实现代码如下：

//超连接ID为 div , 点击超链接后调用本JS函数弹出datalist.aspx

//并且关闭datalist.aspx模态窗体之后给父页面返回一个string值

//并且赋值给 textbox1

$('#div').click(function() {

    var result = window.showModalDialog("datalist.aspx", title, 'dialogHeight:300px;dialogWidth:300px ;status:no;help:no');

    if (typeof (result) != "undefined") {

        $('#textbox1').val(result);

    }

    else {

        alert("没有选择任何数据");

        return false;

    }

});

接下来，在 datalist.aspx 页面代码实现如下：

            <tr onclick="returnCode('李四')">

                <td>

                    李四

                </td>

                <td>

                    男

                </td>

                <td>

                    14

                </td>

                <td>

                    150

                </td>

                <td>

                    60

                </td>

            </tr>

由于需要点击模态窗体中的任意一行返回数据。非点击某个 “选择”连接才返回数据。所以将 click 事件写在 tr 中。

JS返回数据代码如下：

<script language="javascript">

    function returnCode(name) {

        //        if (confirm("您确定选择此顾客吗？") != true) {

        //            return;

        //        }



        window.returnValue = name;

        window.close();

    }

</script>

当在模态窗体中选择数据之后，关闭模态窗体 然后返回选择的数据。。。。

 

到这里，一个模态窗体返回数据的示例就完成了！不过这里有个问题。。

如果我需要返回的数据是多个。而并非单纯一个name…..好像我只能将多个数据用特殊符号比如‘&’或者别的什么分割组装成一个字符串来返回。然后在父页面在分拆！

NO。这不是个好办法！

 

经过思考以及同事的体系，我做了如下修改：

 

<script language="javascript">

    function returnCode(name, sex, age, height, weight) {

        //        if (confirm("您确定选择此顾客吗？") != true) {

        //            return;

        //        }

        var jsonData = {};

        jsonData.name = name;

        jsonData.sex = sex;

        jsonData.age = age;

        jsonData.height = height;

        jsonData.weight = weight;

        //alert(jsonData);

        window.returnValue = jsonData;

        window.close();

    }

</script>

我在返回之前声明一个类似json的数组。然后给数组赋值，将json数据返回去。比如这里，我返回 name,sex,age,heght,weight 5个数据组成的json数据。

html 代码如下： so easy!

<tr onclick="returnCode('王妩','女','21','170',90)">

    <td>

        王妩

    </td>

    <td>

        女

    </td>

    <td>

        21

    </td>

    <td>

        170

    </td>

    <td>

        90

    </td>

</tr>

如上写的话。我这个 datalist.aspx 页面只管负责返回json数组，数组里边放置了所有可能需要返回的内容。然后页面上你自个去拿出来真正需要的数据！

JS文件中我在高度封装一下。再允许我过度封装一下：o(∩_∩)o

function Choose(url, title, iWidth, iheight) {

    /// <summary>

    ///     JS模态弹窗辅助支持函数

    /// </summary>

    /// <param name="url" type="String">

    ///     列表页面相对地址

    /// </param>

    /// <param name="title" type="String">

    ///     列表页面页面标题

    /// </param>

    /// <param name="iWidth" type="Number">

    ///     弹窗宽度

    /// </param>

    /// <param name="iheight" type="Number">

    ///     弹窗高度

    /// </param>

    /// <returns type="String" />

    var height = 300;

    var width = 500;

    if (iheight != null)

        height = iheight;

    if (iWidth != null)

        width = iWidth;

    var retvalue;

    retvalue = window.showModalDialog(url, title, 'dialogHeight:' + height + 'px;dialogWidth:' + width + 'px ;status:no;help:no');

    return retvalue;

}

我把模态窗体的属性能提取的尽量都提取出来做成参数。

Choose 这个函数仅仅是实现一个功能。弹出并且返回数据。由于 js 是弱语言。var 真是 提供了极大的便利，我管你返回什么类型的数据。var 都可以搞定！

因为要封装。我要把这个函数做成近可能的公共。近可以的在客户端减少代码量。

我们先来思考一下，要弹出模态窗口：

1、首先必须得有选择数据的模态窗体内容。以上已经解释如何去做（没看明白的同学翻回去看。）

2、必须得有触发这个事件的对象

3、我要考虑将值在这个方法中就赋值给控件

4、还需要一个高度和宽度。因为Choose()方法虽然提供了默认的高度和宽度。但是也提供了这样可以修改的参数。

 

以上必备条件基本上算是完备了！但是有个问题。我如何才能在高度封装的JS函数中完成对页面文本框的赋值，而且要保证没有“嫁错郎”。由于调用页面是未知的世界。我不知道哪个页面要去调用这个函数。并且我不知道他会传来几个控件。怎么办？

好吧！我可以考虑约定一下，你要调用我这个函数来实现功能，那好，你传给我的文本框必须是个数组类型的。而且必须有可区分的“下标”。

接下来我就可以来封装了！封装封装封装封封封……装！

function ChooseDataFromUrl(EventControl, ValueControls, Url, Title, iWidth, iheight) {

    /// <summary>

    ///   js模态窗口

    /// </summary>

    /// <returns type="Json" />

    /// <param name="EventControl" type="String">

    ///     点击触发弹窗的对象

    /// </param>

    /// <param name="ValueControl" type="Elements">

    ///     要赋值的控件数组

    /// </param>

    /// <param name="Url" type="String">列表页面相对地址</param>

    /// <param name="Title" type="String">列表页面页面title标题（貌似没作用）</param>

    /// <param name="iWidth" type="Number">弹窗宽度</param>

    /// <param name="iheight" type="Number">弹窗高度</param>

    $('#' + EventControl).click(function() {

        var result = Choose(Url, Title, iWidth, iheight);

        if (typeof (result) != "undefined") {

            for (control in ValueControls) {

                $('#' + ValueControls[control]).val(result[control]);

            }

        }

        else {

            alert("没有选择任何数据");

            return false;

        }

    });

}

以上函数中有6个参数。

1、触发函数事件的对象

2、要赋值的控件s

3、一个string的url参数，这里就是模态窗体的相对路径地址

4、页面title（这个貌似没什么用）

5、高度

6、宽度

首先呢，当调用了这个函数之后就会传进来以上6个参数，首先给 触发该函数事件的对象绑定触发条件。

$('#' + EventControl).click(function() { }

其次，调用Choose函数返回 var 类型的数据。大家知道，这个 Choolse 返回的是个 json 数组。

接下来，我要遍历 控件集合了！我取控件集合的可区分下标来从模态窗体中取值并且赋值给控件。

for (control in ValueControls) { $('#' + ValueControls[control]).val(result[control]); }

这部分有点难以理解。看完页面调用就会豁然开朗！

 

页面HTML代码其实很简单：

<body>

    <form id="form1" runat="server">

    <div>

        姓名：<asp:TextBox ID="txtName" runat="server"></asp:TextBox>

        <br />

        性别：<asp:TextBox ID="txtSex" runat="server"></asp:TextBox>

        <br />

        年龄：<asp:TextBox ID="txtAge" runat="server"></asp:TextBox>

        <br />

        身高：<asp:TextBox ID="txtHeight" runat="server"></asp:TextBox>

        <br />

        体重：<asp:TextBox ID="txtweight" runat="server"></asp:TextBox>

        <br />

        <a href="javascript:;" id="selectEmployee">选择</a>

    </div>

    </form>

</body>

一用jquery库，我用的是1.6.2

<script src="../Script/jquery-1.6.2.min.js" type="text/javascript"></script>

js调用代码也很简单：

<script language="javascript" type="text/javascript">



    //声明集合，  .后边的关键字名称必须和弹窗页面返回的json 名称一致

    //声明一个文本框集合。    

    var controls = {};

    controls.name = "<%=txtName.ClientID %>";

    controls.sex = "<%=txtSex.ClientID %>"

    controls.age = "<%=txtAge.ClientID %>"

    new ChooseDataFromUrl("selectEmployee", controls, "showlist.aspx", "选择员工",500,800);

    new ChooseDataFromUrl("<%=txtName.ClientID %>", controls, "showlist.aspx", "选择员工", 800, 500);

    

</script>

以上实现了2中触发ChooseDataFromUrl的事件。第一是点击“选择”超链接触发，另外一种是点击第一个，也就是“姓名”文本框触发。当然也可以在文本框旁边放个 小图标来触发咯。

 

 

      关于ASP.NET中服务器端控件有ClientID和ServerID 引起的代码混乱，导致无法在.JS文件中写直接写JS代码的问题。用以上 new 传参的方式可以解决。当然，这中方式不是我想出来的，俺直到现在JS水平还处于下游水平，以前这部分也是我非常头疼的问题。

这样写是前段时间看到老赵博客中对这部分的介绍才豁然开朗的！传送门！抱歉的是，具体是那篇文章我找不到了。只记得讲这一部分的是一个系列。关于性能方面！后边如果我找到了我会补充上来！