剑道图像浏览器删除



我已经在里面实现了剑道编辑器,我已经实现了剑藤图像浏览器。我已经用相同的后端控制器按照文档中的指导方式实现了它。

我已经为其他功能实现了剑道确认框我想要剑道警报而不是javascript警报,以便在删除图像时进行确认。因此,我捕获了删除事件,并使用event.stopPropagation来停止默认的删除行为,并实现了kendo确认框。在它的ok按钮上,我调用了控制器的后端销毁方法来使用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 
});
});
}```

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

由于这是剑道职业的一个记录不足的组成部分,我建议你向Telerik提交一张罚单。

最新更新