jQuery UI組件庫Kendo UI for jQuery數(shù)據(jù)管理使用教程：ListView 編輯

---

Kendo UI for jQuery R3 2020試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

默認(rèn)情況下，禁用ListView的編輯功能。

入門指南

要啟用編輯，請使用Boolean選項(xiàng)。

$(document).ready(function() {
$("#listView").kendoListView({
selectable: true,
navigatable: true,
editable: true,
template: "<li>${FirstName}</li>",
editTemplate: '<li><input type="text" data-bind="value:FirstName" name="FirstName" required="required"/></li>'
});
});

高級配置

ListView提供editTemplate屬性，該屬性定義此模式的模板。定義后，ListView可以通過edit方法呈現(xiàn)此編輯模板，調(diào)用時將ListView的editTemplate應(yīng)用于目標(biāo)項(xiàng)目。 在大多數(shù)情況下，您必須通過事件模型來實(shí)現(xiàn)此目的，該事件模型在用戶選擇要修改的項(xiàng)目時觸發(fā)。

ListView封裝用于添加、刪除、選擇和編輯項(xiàng)目的操作，這些方法使您可以通過一系列用戶啟動的操作或事件來修改項(xiàng)目的基礎(chǔ)列表。關(guān)于內(nèi)聯(lián)編輯，您需要定義一個在編輯項(xiàng)目時將使用的模板。

<script type="text/x-kendo-tmpl" id="editTemplate">
<div class="product-view k-widget">
<div class="edit-buttons">
<a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
</div>
<dl>
<dt>Product Name</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" />
<span data-for="ProductName" class="k-invalid-msg"></span>
</dd>
<dt>Unit Price</dt>
<dd>
<input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" />
<span data-for="UnitPrice" class="k-invalid-msg"></span>
</dd>
<dt>Units In Stock</dt>
<dd>
<input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" />
<span data-for="UnitsInStock" class="k-invalid-msg"></span>
</dd>
<dt>Discontinued</dt>
<dd><input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"></dd>
</dl>
</div>
</script>

$(document).ready(function(){
$("#listView").kendoListView({
selectable: true,
navigatable: true,
template: kendo.template($("#template").html()),
editTemplate: kendo.template($("#editTemplate").html())
});
});

您為項(xiàng)目的內(nèi)聯(lián)編輯定義的模板可能包括其他Kendo UI小部件。

ListView項(xiàng)的新添加記錄功能由用戶發(fā)起的click事件觸發(fā)，并通過jQuery中的.click()連接。

$(".k-add-button").click(function(e) {
listView.add();
e.preventDefault();
});

---

了解最新Kendo UI最新資訊，請關(guān)注Telerik中文網(wǎng)！