弹出层

最新推荐文章于 2022-01-29 10:15:05 发布

原创最新推荐文章于 2022-01-29 10:15:05 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#弹出层

Jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个基于网页的经销商列表查询系统实现方案，该系统利用ArtDialog弹窗组件和Ajax技术进行实时查询与显示，能够根据输入的关键词动态更新下拉列表选项。


    <!-- artDialog -->
    <link href="../Content/Js/ArtDialog/skins/blue.css" rel="stylesheet" />
    <script src="../Content/Js/ArtDialog/artDialog.source.js" type="text/javascript"></script>
    <script src="../Content/Js/ArtDialog/iframeTools.source.js" type="text/javascript"></script>

$('#txtJXS').click(function () {
                $('#txtJXS').val("");
                var url = "SupplierView.aspx";
                art.dialog.open(url, {
                    lock: true,
                    title: "经销商列表",
                    width: '400px',
                    height: '600px',
                    ok: function () {
                        jxsname = this.iframe.contentWindow.$('#selJXS option:selected').text();
                        jxsID = this.iframe.contentWindow.$('#selJXS option:selected').val();
                        if (IsNullOrEmpty1(jxsname) && IsNullOrEmpty1(jxsID)) {
                            $('#txtJXS').val(jxsname);
                            $('#hidJXSID').val(jxsID);
                        }
                    },
                    cancel: true
                });
            });

<%@ Page Language="C#" AutoEventWireup="true" %>

<!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="../Content/Css/style.css" rel="stylesheet" type="text/css" />
    <link href="../Content/Js/ArtDialog/skins/blue.css" rel="stylesheet" />
    <script src="../Content/Js/jquery-1.7.2.js" type="text/jscript"></script>

    <script type="text/javascript">

        $(function () {
            //页面加载
            $.ajax({
                url: '../Control/SingleScan.ashx?Action=JXSList',
                type: 'get',
                dataType: 'json',
                cache: false,
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("#selJXS").append('<option value="' + data[i].FItemID + '" >' + data[i].FName + '</option>')
                    }
                },
                error: function () {
                    alert(0)
                }
            });

            //查询文本框发生变化时，查询
            $('#txtJXSMC').keyup(function () {
                $('#selJXS').empty();
                var jxsmc = $('#txtJXSMC').val();
                $.ajax({
                    url: '../Control/SingleScan.ashx?Action=SearchJXS&jxsmc=' + jxsmc,
                    type: "get",
                    dataType: "json",
                    cache: false,
                    success: function (data) {
                        if (data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                $('#selJXS').append('<option value="' + data[i].FItemID + '" >' + data[i].FName + '</option>')
                            }
                        }
                    }
                });
            });

            //点击查询按钮时，查询
            $('#btnSearch').click(function () {
                $('#selJXS').empty();
                var jxsmc = $('#txtJXSMC').val();
                $.ajax({
                    url: '../Control/SingleScan.ashx?Action=SearchJXS&jxsmc=' + jxsmc,
                    type: "get",
                    dataType: "json",
                    cache: false,
                    success: function (data) {
                        if (data.length > 0) {
                            for (var i = 0; i < data.length; i++) {
                                $('#selJXS').append('<option value="' + data[i].FItemID + '" >' + data[i].FName + '</option>')
                            }
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div class="content-box">
        <div class="two-tcbox-kkxz fl">
            <div class="two-tcbox-kkxz-search">
                <input id="txtJXSMC" name="txtJXSMC" style="width: 240px; height: 28px;" type="text" />
                <a id="btnSearch" name="btnSearch" class="search-bt"><span class="icon icon16 bt16-search-white"></span>查询</a>
            </div>
            <div class="two-tcbox-kkxz-list">
                <select id="selJXS" name="selJXS" multiple="multiple" style="width: 360px; height: 522px; font-size: 16px;">
                </select>
            </div>
        </div>
    </div>
</body>
</html>

//新增
        function Add(){
            var url = "../../../View/System/Dictionary/DictionaryEdit.aspx?Type=Add&ID="+id;
            art.dialog.open(url, {
                lock : true,
                title : "新增字典分类",
                width : '420px',
                height : '387px',
                ok:true,
                ok : function () {
                    this.iframe.contentWindow.$("#form1").submit();
                    return false;
                },
                cancel:true
            });
        }

        //编辑
        function Edit() {
            var KeyValue = GetJqGridRowValue("#gridTable", "XH");
            if (IsChecked(KeyValue)) {
                var url = "../../../View/System/Dictionary/DictionaryEdit.aspx?Type=Edit&ID="+KeyValue;
                art.dialog.open(url, {
                    lock : true,
                    title : "编辑字典分类",
                    width : '420px',
                    height : '387px',
                    ok: true,
                    ok: function () {
                        this.iframe.contentWindow.$("#form1").submit();
                        return false;
                    },
                    cancel:true
                });
            }
        }

        //删除
        function Delete(){
            var KeyValue = GetJqGridRowValue("#gridTable", "XH");
            if (IsDelData(KeyValue)) {
                showConfirmMsg('注：您确认要删除已选中的'+KeyValue.split(",").length+'记录？', function (result) {
                    if(result) {
                        art.dialog({id:'confirmId'}).close();
                        $.ajax({
                            url: "../../../Control/System/Dictionary/Dictionary.ashx?action=Delete",
                            data: {"ID":KeyValue},
                            type: "post",
                            dataType: "text",                          
                            success: function (data) {
                                if (data == "1") {
                                    alert("删除成功!");
                                    GetGrid();
                                }
                                else if(data == "-1"){
                                    alert("当前字典分类已存在子分类，不能删除！");
                                }
                                else {
                                    alert("删除失败!");
                                }
                            },
                            error: function (data, status, e)
                            {
                                alert("请求失败!");
                            }
                        });
                    }
                });
            }
        }