Javascript 剑道UI：具有列表视图的自定义窗口
我想定制剑道窗口，里面有一些控件，2剑道列表视图，剑道按钮添加，剑道按钮删除。但现在我只想在剑道窗口的列表视图中显示我的数据列表Javascript 剑道UI：具有列表视图的自定义窗口,javascript,kendo-ui,telerik,kendo-window,kendo-listview,Javascript,Kendo Ui,Telerik,Kendo Window,Kendo Listview,我想定制剑道窗口，里面有一些控件，2剑道列表视图，剑道按钮添加，剑道按钮删除。但现在我只想在剑道窗口的列表视图中显示我的数据列表 <script type="text/x-kendo-template" id="myTemplate"> <li>#: subPhase #</li> </script> <script type="text/x-kendo-template" id="template"> <
<script type="text/x-kendo-template" id="myTemplate">
<li>#: subPhase #</li>
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container" class="row" data-role="view" data-reload="true">
<div id="contractListLeft" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listC" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data in here
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="addGroup()">Add</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="removeGroup()">Remove</button>
</div>
</div>
<div id="contractListRight" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listD" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data added when button "addGroup" clicked
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-md-10 col-sm-10 col-lg-10"> </div>
<div class="col-xs-1 col-md-1 col-sm-1 col-lg-1">
<a class="k-window-action k-link" href="\\#"><span class="">Close</span></a>
</div>
</div>
</script>
//get template window
var detailsTemplate = kendo.template($("#template").html());
//make kendo window
$("#contractDetail").kendoWindow({
title: "Edit Contract List",
modal: true,
visible: false,
resizable: false,
actions: ["Close"],
width: 800
});
//get data=[{"id":"1","subPhase":"Sub1"},{"id":"2","subPhase":"Sub2"}]
$.ajax({
dataType : "json", async: false,
url : "/lah/getIntermediaryParameter"}).done(function(data) {
groupContracts = data;
});
//click button to openModal
$("#openModalContract").click(function () {
$("#contractDetail").parent().css("top", "0px"); //make it to the top left
$("#contractDetail").parent().css("left", "0px"); //make it to the top left
$("#contractDetail").data("kendoWindow").open();
$("#contractDetail").data("kendoWindow").content(detailsTemplate(groupContracts)); //load template
$("#contractDetail").data("kendoWindow").center(); //make it center
$("#sortable-listC").kendoListView({
dataSource: {
data: groupContracts
}
template: kendo.template($("#myTemplate").html()) //get template <li>
});
$("#sortable-listC").kendoSortable({
connectWith: "#sortable-listD" //for dragdrop
});
$("#sortable-listD").kendoSortable({
connectWith: "#sortable-listC" //for dragdrop
});
});
//make custom button close, but its not work
$('#contractDetail').data().kendoWindow.bind('refresh',function(e){
var win = this;
$("#closeButtonModal").click(function(){
$("#contractDetail").data("kendoWindow").close();
})
})
<script type="text/x-kendo-template" id="myTemplate">
<li>#: subPhase #</li>
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container" class="row" data-role="view" data-reload="true">
<div id="contractListLeft" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listC" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data in here
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="addGroup()">Add</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="removeGroup()">Remove</button>
</div>
</div>
<div id="contractListRight" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listD" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data added when button "addGroup" clicked
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-md-10 col-sm-10 col-lg-10"> </div>
<div class="col-xs-1 col-md-1 col-sm-1 col-lg-1">
<a class="k-window-action k-link" href="\\#"><span class="">Close</span></a>
</div>
</div>
</script>
//获取模板窗口
var detailsTemplate=kendo.template（$（“#template”）.html（）；
//做剑道窗口
$（“#合同细节”）。肯多文多({
标题：“编辑合同清单”，
莫代尔：是的，
可见：假，
可调整大小：false，
操作：[“关闭”]，
宽度：800
});
//获取数据=[{“id”：“1”，“子阶段”：“Sub1”}，{“id”：“2”，“子阶段”：“Sub2”}]
$.ajax({
数据类型：“json”，异步：false，
url:“/lah/getIntermediaryParameter”}）.done（函数（数据）{
分组合同=数据；
});
//单击按钮打开模式
$（“#openModalContract”）。单击（函数（）{
$（“#contractDetail”）.parent（）.css（“top”，“0px”）；//使其位于左上角
$（“#contractDetail”）.parent（）.css（“left”，“0px”）；//将其置于左上角
$（“#合同细节”）.data（“kendoWindow”）.open（）；
$（“#contractDetail”）.data（“kendoWindow”）.content（detailsTemplate（groupContracts））；//加载模板
$（“#contractDetail”）.data（“kendoWindow”）.center（）；//使其成为中心
$（“#可排序列表”）.kendoListView({
数据源：{
数据：集团合同
}
模板：kendo.template（$（“#myTemplate”）.html（）//获取模板
});
$（“#可排序列表”）.kendoSortable({
与dragdrop的“#可排序列表”//连接
});
$（“#可排序列表”）.kendoSortable({
与dragdrop的“#可排序列表”//连接
});
});
//使自定义按钮关闭，但它不起作用
$（'#contractDetail'）.data（）.kendoWindow.bind（'refresh'，函数（e）{
var win=这个；
$（“#CloseButtonModel”）。单击（函数（）{
$（“#合同细节”）.data（“kendoWindow”）.close（）；
})
})
<script type="text/x-kendo-template" id="myTemplate">
<li>#: subPhase #</li>
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container" class="row" data-role="view" data-reload="true">
<div id="contractListLeft" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listC" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data in here
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="addGroup()">Add</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="removeGroup()">Remove</button>
</div>
</div>
<div id="contractListRight" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listD" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data added when button "addGroup" clicked
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-md-10 col-sm-10 col-lg-10"> </div>
<div class="col-xs-1 col-md-1 col-sm-1 col-lg-1">
<a class="k-window-action k-link" href="\\#"><span class="">Close</span></a>
</div>
</div>
</script>
#：子阶段#
//在这里循环列表数据
添加
去除
//单击“添加组”按钮时添加的循环列表数据
所以我想在剑道窗口中显示GroupContracts列表，但始终没有数据。当我尝试签入console.log（）时，我发现有许多对象。如何组合剑道窗口和剑道列表视图？[编辑]：这只是一个示例，您必须在Javascriot和html中添加所有WidJet，如：
<script type="text/x-kendo-template" id="myTemplate">
<li>#: subPhase #</li>
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container" class="row" data-role="view" data-reload="true">
<div id="contractListLeft" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listC" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data in here
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="addGroup()">Add</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="removeGroup()">Remove</button>
</div>
</div>
<div id="contractListRight" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listD" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data added when button "addGroup" clicked
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-md-10 col-sm-10 col-lg-10"> </div>
<div class="col-xs-1 col-md-1 col-sm-1 col-lg-1">
<a class="k-window-action k-link" href="\\#"><span class="">Close</span></a>
</div>
</div>
</script>
<script type="text/x-kendo-template" id="myTemplate">
<li>#: subPhase #</li>
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container" class="row" data-role="view" data-reload="true">
<div id="contractListLeft" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listC" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data in here
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="addGroup()">Add</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="removeGroup()">Remove</button>
</div>
</div>
<div id="contractListRight" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listD" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data added when button "addGroup" clicked
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-md-10 col-sm-10 col-lg-10"> </div>
<div class="col-xs-1 col-md-1 col-sm-1 col-lg-1">
<a class="k-window-action k-link" href="\\#"><span class="">Close</span></a>
</div>
</div>
</script>
var myWindow = $('#contractDetail').kendoWindow({
width: 500,
height: 400,
// here you can do you configuration
open: function() {
//here you can instanciate your widgets inside your window like:
$("#sortable-listC").kendoListView({
dataSource: {
data: groupContracts
}
template: kendo.template($("#myTemplate").html()) //get template <li>
});
$("#sortable-listC").kendoSortable({
connectWith: "#sortable-listD" //for dragdrop
});
$("#sortable-listD").kendoSortable({
connectWith: "#sortable-listC" //for dragdrop
});
}
});
//and then show window
myWindow.open();
var myWindow=$（“#合同细节”）.kendoWindow({
宽度：500，
身高：400，
//在这里你可以做你的配置
打开：函数（）{
//在这里，您可以在窗口中实例化小部件，如：
$（“#可排序列表”）.kendoListView({
数据源：{
数据：集团合同
}
模板：kendo.template（$（“#myTemplate”）.html（）//获取模板
});
$（“#可排序列表”）.kendoSortable({
与dragdrop的“#可排序列表”//连接
});
$（“#可排序列表”）.kendoSortable({
与dragdrop的“#可排序列表”//连接
});
}
});
//然后显示窗口
myWindow.open（）；
<script type="text/x-kendo-template" id="myTemplate">
<li>#: subPhase #</li>
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container" class="row" data-role="view" data-reload="true">
<div id="contractListLeft" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listC" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data in here
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="addGroup()">Add</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="removeGroup()">Remove</button>
</div>
</div>
<div id="contractListRight" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listD" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data added when button "addGroup" clicked
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-md-10 col-sm-10 col-lg-10"> </div>
<div class="col-xs-1 col-md-1 col-sm-1 col-lg-1">
<a class="k-window-action k-link" href="\\#"><span class="">Close</span></a>
</div>
</div>
</script>
<div id="contractDetail">
<div id="details-container" class="row" data-role="view" data-reload="true">
<div id="contractListLeft" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listC" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data in here
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="addGroup()">Add</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="removeGroup()">Remove</button>
</div>
</div>
<div id="contractListRight" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listD" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data added when button "addGroup" clicked
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-md-10 col-sm-10 col-lg-10"> </div>
<div class="col-xs-1 col-md-1 col-sm-1 col-lg-1">
<a class="k-window-action k-link" href="\\#"><span class="">Close</span></a>
</div>
</div>
</div>
//在这里循环列表数据
添加
去除
//单击“添加组”按钮时添加的循环列表数据
仅举一个例子，希望此帮助如果我使用此代码，它可以显示我的listview，但不能显示整个模板。我需要ListVIEW的左侧和右侧，在中间，有2个按钮。不管怎样，谢谢你的回答@MarcoIt只是一个例子，然后你可以添加你所有的剑道小部件（js和html），我编辑了这个例子，考虑到你的需要顺便问一下，我放了html还是js？因为当我把它放在html上时，窗口会显示空白内容。如果我把它放在JS上，加载$（“#contractDetail”）的jquery就会出错。是一个html标记，请尝试在js上执行类似$（“#contractDetail”）.html（）的操作
<script type="text/x-kendo-template" id="myTemplate">
<li>#: subPhase #</li>
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container" class="row" data-role="view" data-reload="true">
<div id="contractListLeft" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listC" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data in here
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="addGroup()">Add</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="removeGroup()">Remove</button>
</div>
</div>
<div id="contractListRight" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listD" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//looping list data added when button "addGroup" clicked
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-md-10 col-sm-10 col-lg-10"> </div>
<div class="col-xs-1 col-md-1 col-sm-1 col-lg-1">
<a class="k-window-action k-link" href="\\#"><span class="">Close</span></a>
</div>
</div>
</script>