Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI 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: “

• ${FirstName}
• ”,
  editTemplate: ‘
• ’
  });
  });

   

   

  高級配置

  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)目時將使用的模板。

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