剑道图像浏览器删除

问题描述 投票:0回答:1

我在其中实现了剑道编辑器,我实现了剑道图片浏览器.我用同样的后台控制器实现了文档中的指导方式。

我已经实现了kendo确认框的其他功能。我想用剑道警报代替javascript警报 所以我捕捉到了删除事件,并使用event.stopPropagation管理停止默认的删除行为,并实现了kendo确认框。在它的ok按钮上,我调用了控制器的后台destroy方法,使用ajax删除图像。

幸运的是,它被成功地从后台删除 但从图片浏览器缩略图的视角来看,它并没有被删除。在刷新后,它将从视图侧或从缩略图中删除。我也曾尝试手动删除相应的li,它被删除了,但只要我上传一些新的图像,被删除的li也出现删除的图像,虽然它已经从后台删除.以下是我如何实现图像浏览器的代码。

function createEditor(id)
        {
            //Kendo Editor for content
            $(id).kendoEditor({
                encoded: false,
                tools: [
                        "bold",
                        "italic",
                        "underline",
                        "strikethrough",
                ],
                imageBrowser: {
                    transport: {
                        read: "/ImageBrowser/Read",
                        destroy: {
                            url: '/ImageBrowser/Destroy',
                            type: "POST"
                        },
                        create: {
                            url: '/ImageBrowser/Create',
                            type: "POST"
                        },
                        thumbnailUrl: '/ImageBrowser/Thumbnail',
                        uploadUrl: '/ImageBrowser/Upload',
                        imageUrl:  "../Content/article/" + userId + "/{0}"
                    },
                }
            });

//On click of imagebrowser icon of editor
            $(".k-i-image").click(function () {
                setTimeout(function () {
                    // Attach a select handler to the Upload embedded in the ImageBrowser.
                    $(".k-imagebrowser .k-upload").find("input").data("kendoUpload").bind("select", 
                      function (e) {
                        // Prevent the event if the selected file is not of specified extension.
                        if (e.files[0].extension.toLowerCase() != ".jpg" && e.files[0].extension.toLowerCase() != ".jpeg" && e.files[0].extension.toLowerCase() != ".png" && e.files[0].extension.toLowerCase() != ".gif") {
                            e.preventDefault();
                            $("<div></div>").kendoAlert({
                                title: false,
                                content: "The file extension is not *.png,*.gif,*.jpg,*.jpeg.",
                                buttonLayout: "normal"
                            }).data("kendoAlert").open();
                        }

                        var s = e.files[0].size / Math.pow(1000, 2);
                        //Size validation
                        if (s > 5) {
                            e.preventDefault();
                            $("<div></div>").kendoAlert({
                                title: false,
                                content: "File size should not be more than 5 MB",
                                buttonLayout: "normal"
                            }).data("kendoAlert").open();
                        }

                        $('.k-reset.k-floats.k-tiles.k-widget.k-listview.k-selectable').children('li').each(function (index, value) {
                            // Prevent the event if the selected file is already exist.
                            if ($(this).children("strong").html() == e.files[0].name) {
                                e.preventDefault();
                                $("<div></div>").kendoAlert({
                                    title: false,
                                    content: "A file with name already exists in the current directory",
                                    buttonLayout: "normal"
                                }).data("kendoAlert").open();
                            }
                        });

                    });
                    //Delete image from image browser
                    $(".k-toolbar-wrap>.k-button-icon").click(function (event) {
                        var type;
                        var name;
                        if ($(this).children().hasClass("k-i-close")) {
                            //alert();
                            //event.preventDefault();
                            event.stopPropagation();
                            var path = "";
                            var img;
                            $('.k-breadcrumbs-wrap').children('a').each(function (index, value) {
                                if ($(this).hasClass("k-link")) {
                                    path = path + $(this).text() + "/";
                                }
                            });

                            $('.k-reset.k-floats.k-tiles.k-widget.k-listview.k-selectable').children('li').each(function (index, value) {
                                if ($(this).hasClass("k-tile k-state-selected")) {
                                    img = $(this).attr("data-uid");
                                    type = $(this).attr("data-type");
                                    name = $(this).children("strong").html();
                                }
                            });
                            //alert(path);
                            window.OpenDeleteConfirm("Are you sure you want to delete this record?").then(function (e) {
                                $.ajax({
                                    type: 'POST',
                                    url: "/ImageBrowser/Destroy",
                                    data: { "path": path, "type": type, "name": name },
                                    success: function (response) {
                                        //$(".k-reset.k-floats.k-tiles.k-widget.k-listview.k-selectable>.k-tile.k-state-selected").remove();
                                    }
                                }); 
                            }, function () {
                                // window.myalert("You chose to Cancel action.");
                            });
                        }
                        else {

                        }

                    });

                    //End 
                });
            });

        }```



image kendo-ui editor
1个回答
0
投票

简而言之,kendoEditor有一个内部的...。图片浏览器 它有一个内部的ListView,其中的文件在其dataSource中保存着文件列表,它从您的文件中创建。transport 配置。你的ajax调用并没有告诉那个dataSource应该删除一个项目。

因为它是一个文档化很差的组件 剑道专业我建议你向Telerik提交一份票据。

© www.soinside.com 2019 - 2024. All rights reserved.