0
如何动态创建KendoUI ListView。我的意思是我想创建div,dataSource,模板并动态添加,编辑和删除功能。我该如何使用kendoui来做到这一点。如何使用kendoui动态创建列表视图
我定义了诸如
<script type="text/x-kendo-tmpl" id="template">
<div class="products">
<ul><li>
# for (var i = 0; i < data.length; i++) { #
#= data[i] #
# } #
</li></ul>
<div class="edit-buttons">
<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
</div>
</div>
</script>
然后模板中的动态模板将
<script type="text/x-kendo-tmpl" id="edittemplate">
<div class="product-view">
<ul><li>
# for (var i = 0; i < data.length; i++) { #
<input type="text" data-bind="value:data[i]" name="ProductName" required="required" validationMessage="required" />
# } #
</li></ul>
<div class="edit-buttons">
<a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-edit"></span>Update</a>
<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-delete"></span>Cancel</a>
</div>
</div>
</script>
然后我也做了脚本像
var data = ["Todd", "Steve", "Burke"];
$("#dynamicdiv").kendoListView({
template: kendo.template($("#template").html()),
editable:true,
dataSource:data,
editTemplate:kendo.template($("#edittemplate").html()),
}).delegate(".k-edit-button", "click", function (e) {
alert("dtjherut");
listview.edit();
e.preventDefault();
}).delegate(".k-delete-button", "click", function (e) {
alert("clicking");
var model = dataSource.view()[$(this).closest(".tm").index()];
dataSource.remove(model);
e.preventDefault();
dataSource.sync();
}).data("kendoListView");
现在列表视图正在加载三个名称和编辑和删除按钮。但删除和编辑按钮不起作用。我还没有给出创建,删除和更新的路径。基本上我需要动态地创建所有模板和数据源。 对不起,如果有任何错误。 任何帮助表示赞赏。
到目前为止你尝试了什么? – OnaBai
我正在尝试动态定义模板并将该模板添加到列表视图中。但列表视图不显示 – Jonathan
您可以显示目前为止的代码吗?您可以编辑这个问题,或者在JSFiddle或JSBin中添加一个工作示例。 – OnaBai