asp.net 中點選按鈕彈出模式對話方塊,選擇值後返回到頁面中(window.showModalDialog實現)

暖楓無敵發表於2015-07-13


<td>現從事專業</td>
<td>
       <asp:TextBox ID="tbMajor" runat="server" ReadOnly="true"></asp:TextBox>
        <input type="hidden" id="hidV" runat="server" />
       <input type="button" value="選擇專業" onclick="OpenWin(300, 400);" />
 </td> 



<script type="text/javascript">
        function OpenWin(width, height) {
            var me;
            // 把父頁面視窗物件當作引數傳遞到對話方塊中,以便對話方塊操縱父頁自動重新整理。 
            me = window;
            // 顯示對話方塊。 
            var a = window.showModalDialog("MajorTree.aspx", me, 'dialogWidth=' + width + 'px;dialogHeight=' + height + 'px;help:no;status=no,toolbar=no,menubar=no,scrollbars=no,location=no');
            if (typeof (a) != "undefined")
                var str = new Array();
            str = a.split("|");
            var text = str[1];
            var textv = str[0];
            //返回值賦給TextBox

            window.document.getElementById("tbMajor").value = text;

            window.document.getElementById("hidV").value = textv;
        }
</script>



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MajorTree.aspx.cs" Inherits="ProvincePlat.EnergyService.MajorTree" %>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="../Js/jquery-1.7.2.min.js"></script>
    <script src="../Js/jquery.ztree.core-3.5.min.js"></script>
    <link href="../Css/master.css" rel="stylesheet" />
    <link href="../Css/GridView.css" rel="stylesheet" />
    <!-- 防止重新開啟頁面形式的對話方塊 -->
    <base target="_self" />
    <script type="text/javascript">
        var zNodes;
        var zTree;
        //setting非同步載入的設定
        var setting = {
            async: {
                enable: true, //表示非同步載入生效
                url: "../Ajax/MajorData.aspx", // 非同步載入時訪問的頁面
                autoParam: ["id"], // 非同步載入時自動提交的父節點屬性的引數
                otherParam: ["ajaxMethod", 'AnsyData'], //ajax請求時提交的引數
                type: 'post',
                dataType: 'json'
            },
            checkable: true,
            showIcon: true,
            showLine: true, // zTree顯示連線線
            data: {  //用pId來標識父子節點的關係
                simpleData: {
                    enable: true
                }
            },
            expandSpeed: "", // 設定 zTree 節點展開、摺疊的動畫速度,預設為"fast",""表示無動畫
            callback: { // 回撥函式
                onClick: zTreeOnClick, // 單擊滑鼠事件
                asyncSuccess: zTreeOnAsyncSuccess //非同步載入成功事件
            }
        };


        $(document).ready(function () {
            InitMajor();
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });


        //初始化載入節點
        function InitMajor() {
            $.ajax({
                url: '../Ajax/MajorData.aspx',
                type: 'post',
                dataType: 'json',
                async: false,
                data: { 'ajaxMethod': 'FirstAnsyData' },
                success: function (data) {
                    zNodes = data;
                }
            });
        };


        //單擊時獲取zTree節點的Id,和value的值
        function zTreeOnClick(event, treeId, treeNode, clickFlag) {
            var treeValue = treeNode.id + "," + treeNode.name;
            //單擊給文字框賦值
            var Id = treeNode.pId;
            var v = "";
            if (Id == '' || Id == undefined || Id == null) {
                v = treeNode.name;
            }
            else {
                v = treeNode.name;
            }

            //這裡獲取到目錄樹點選後的值
            window.returnValue = treeNode.id + "|" + treeNode.name;
            window.close();

        };


        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div style="text-align: center;" class="midtitle">
                專業類別
            </div>
            <div class="midtitle">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
    </form>
</body>
</html>



===========================================================================

如果覺得對您有幫助,微信掃一掃支援一下:



相關文章