kendo 图片浏览器删除

Question

我已经在其中实现了 kendo 编辑器我已经实现了 kendo 图像浏览器。我已经按照使用相同后端控制器的文档中的指导方式实现了它。

我也为其他功能实现了 kendo 确认框。 我想要 kendo 警报而不是 javascript 警报 在删除一张图片时进行确认。所以我捕获了删除事件并使用 event.stopPropagation 我设法停止了默认删除行为并实现了 kendo 确认框。在它的确定按钮上，我调用了控制器的后端销毁方法来使用 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 
                });
            });

        }```

Answer 1

简而言之，kendoEditor 有一个内部 ImageBrowser，它有一个内部 ListView，其中包含将文件列表保存在其数据源中的文件，它是根据您的 transport 配置创建的。您的 ajax 调用不会告诉数据源应删除某个项目。

由于它是 Kendo Professional 的一个文档不足的组件，我建议您向 Telerik 提交工单。

kendo 图片浏览器删除

kendo Image browser delete

image

editor

kendo-ui