- 我有单独的剑道网格，
- 我在 fiddle 中单独使用了删除功能
- 当我在网格的每一行中选择 ThreeDots 时，它应该在小弹出窗口中显示删除，当您单击删除确认弹出窗口时，应该会打开。
- 在我点击"is"后，它应该删除该特定行，而当我选择“否”时，它不应该 删除。 尝试以 jquery 方式显示我的删除确认框..提供下面的代码
- 你们能告诉我如何组合我的代码吗。
- 在下面提供代码和 fiddle
http://jsfiddle.net/cjyh8Lyc/4/ https://jsfiddle.net/9qpLukrL/
<div class="sports">
<div class="kendopobUpBox kendoWindow kPopupConfirmationBox">
<div class="row kendoPopUpGridCollection kendoPopUpContent lineHeightInputs">
<div class="kendoContent">Are you sure you want to upload file</div>
</div><div class="clearFloat"></div>
<div class="row kendoPopUpFooter textAligncenterImp">
<button class="commonBtn" type="button" id ="playerDocumentOk" (click)="uploadFile($event,document.value)">OK</button>
<button class="clearBtn" type="button" id ="playerDocumentCancel" (click)="cancel()">Cancel</button>
</div><div class="clearFloat"></div>
</div>
</div>
$('.sports').show();
$('.sports').hide();
#runningDocumentsPopup .sports {
position: relative;
}
.sports .kPopupConfirmationBox {
display: block;
z-index: 3;
left: calc(50% - 175px);
width: 350px;
position: absolute;
}
.sports {
display: none;
}
最佳答案
不确定单独使用删除功能的目的是什么，因为剑道内置了可以删除行的功能。您可以附加一个 javascript 函数来删除(您的代码在单独的文件中。
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
<script>
var data = [
{ Id: 1, Name: "Decision 1", Position: 1 },
{ Id: 2, Name: "Decision 2", Position: 2 },
{ Id: 3, Name: "Decision 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
//data: data,
transport: {
read: function(e) {
e.success(data);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.data;
item.Id = data.length + 1;
e.success(item);
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" },
Position: { type: "number" }
}
}
}
});
var grid= $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
editable : true,
navigatable: true,
toolbar: ["save","cancel", "create"],
columns: ["Id", "Name", "Position",{template:"<a class='mybutton'><span class=''></span>ThreeDots</a>"}]
}).data("kendoGrid");
grid.element.on('click','.mybutton',function(){
//var dataItem = grid.dataItem($(this).closest('tr'));
//alert(dataItem.Name + ' was clicked');
//built in kendo function to remove row
grid.removeRow($(this));
})
</script>
</body>
</html>
Jsbin Demo带有删除确认的演示
关于javascript - 将两种功能合二为一，用于剑道网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45660229/