jQuery UI組件庫Kendo UI for jQuery數據管理使用教程：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是創建現代Web應用程序的最完整UI庫。

默認情況下，禁用ListView的編輯功能。

入門指南

要啟用編輯，請使用Boolean選項。

$(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方法呈現此編輯模板，調用時將ListView的editTemplate應用于目標項目。 在大多數情況下，您必須通過事件模型來實現此目的，該事件模型在用戶選擇要修改的項目時觸發。

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

<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())
});
});

您為項目的內聯編輯定義的模板可能包括其他Kendo UI小部件。

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

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

---