利用kendo ui window创建自己的promise window

最新推荐文章于 2020-09-25 17:21:03 发布

zhangyuanwei88

最新推荐文章于 2020-09-25 17:21:03 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： kendo ui 文章标签： promise window kendo ui 关闭之后回传值至打开窗

本文链接：https://blog.youkuaiyun.com/zhangyuanwei88/article/details/38312171

kendo ui 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何在kendo ui中创建一个利用Promise交互的window组件。通过appdialog.js文件和index.html页面的示例，展示了如何在点击关闭按钮时回传值。尽管功能初步实现，但作者认为kendo ui的Promise操作不够完善，使用体验有待提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建一个appdialog.js文件，代码如下

var contexts = {};
var dialogCount = 0;
var app = {
    getDialog: function (obj) {
        if (obj) {
            return obj.__dialog__;
        }

        return undefined;
    },
    close: function (obj) {
        var theDialog = this.getDialog(obj);
        if (theDialog) {
            var rest = Array.prototype.slice.call(arguments, 1);
            theDialog.close.apply(theDialog, rest);
        }
    },
    initOption: function (obj) {
        var kendowindOption = {
            actions: ["Pin", "Refresh", "Maximize", "Minimize", "Close"],
            draggable: true,
            pinned: true,
            height: "450px",
            modal: true,
            resizable: true,
            title: "新增",
            width: "700px"
        };
        if (obj) {
            if (obj.actions) {
                kendowindOption.actions = obj.actions;
            }
            if (obj.height) {
                kendowindOption.height = obj.height;
            }
            if (obj.width) {
                kendowindOption.width = obj.width;
            }
            if (obj.title) {
                kendowindOption.title = obj.title;
            }
        }
        return kendowindOption;
    },
    showDialog: function (obj) {
        var dialogid = "dialog" + dialogCount;
        var dialogFilter = "#" + dialogid;
        if ($(dialogFilter) == undefined || $(dialogFilter).length === 0)
            $("body").append('<div id="' + dialogid + '"></div>');
        var instance = $(dialogFilter).data("kendoWindow");
        if (instance == undefined) {
            var kendowindOption = this.initOption(obj);
            $(dialogFilter).kendoWindow(kendowindOption);
        }
        var dfd = $.Deferred();
        instance = $(dialogFilter).data("kendoWindow");
        instance.__dialog__ = {
            close: function () {
                dialogCount = dialogCount - 1;
                delete instance.__dialog__;
                instance.close();
                $(dialogFilter).remove();
                var args = arguments;
                if (args.length === 0) {
                    dfd.resolve();
                } else if (args.length === 1) {
                    dfd.resolve(args[0]);
                } else {
                    dfd.resolve.apply(dfd, args);
                }
            }
        };
        dialogCount = dialogCount + 1;
        instance.center();
        var url = obj.url;
        instance.refresh({
            url: url
        });
        instance.open();
        return dfd.promise();
    }
};

新建一个index.html 页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        html {
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
    <script src="appdialog.js"></script>
</head>
<body>
    <button id="open">打开窗口</button>
    <script>
        $(function () {
            initOpenBtn();
        });
        function initOpenBtn() {
            $("#open").click(function () {
                var obj = { url: "page2.html" };
                app.showDialog(obj).then(function (result) {
                    if (result) {
                        alert(result);
                        console.log(result);
                    }
                });
            });

        }
    </script>
</body>
</html>

新建page2.html 页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <button id="save">关闭</button>
    <script>
        $("#save").click(function () {
            var result = "sfasfasdf";
            app.close($("#save").closest(".k-window-content").data("kendoWindow"), result);
        });
    </script>
</body>
</html>

点击打开按钮效果如下：