在Kendo Ui樹形列表中編輯數據時如何獲取字段值

Question

我是Kendo UI的新手，我有一個問題。 現在我正在使用TreeList / Editing，當我將值編輯到第一個字段時如何自動將值加載到其他字段？

例：
1.序列號：123456789
2.名稱：測試

當我將序列號123456789編輯為第一個字段並將自動加載名稱為第二個字段時。

Answer 1

要基於對列A所做的更改來設置列B的值，您需要編輯綁定到樹列表的模型。 為此，請執行以下操作：

1. 處理樹形列表的編輯事件。 這樣，將模型保存到局部變量。
2. 將編輯器模板添加到列A。在select事件上，設置model的值。

以下是有效的代碼段：-

<div id="treelist"></div>
    <script>

    $(document).ready(function () {
      var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
      var model= null;
      var employeesData=[{"EmployeeId":101,"FirstName":"Daryl","LastName":"Sweeney"},
      {"EmployeeId":202,"FirstName":"Guy","LastName":"Wooten"},
      {"EmployeeId":303,"FirstName":"Priscilla","LastName":"Frank"},
      {"EmployeeId":404,"FirstName":"Ursula","LastName":"Holmes"},
      {"EmployeeId":505,"FirstName":"Anika","LastName":"Vega"}];

      var dataSource = new kendo.data.TreeListDataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl + "/EmployeeDirectory/All",
                        dataType: "jsonp"
                    },
                    update: {
                        url: crudServiceBaseUrl + "/EmployeeDirectory/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: crudServiceBaseUrl + "/EmployeeDirectory/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: crudServiceBaseUrl + "/EmployeeDirectory/Create",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                        }
                    }
                },
                batch: true,
                schema: {
                    model: {
                        id: "EmployeeId",
                        parentId: "ReportsTo",
                        fields: {
                            EmployeeId: { type: "number", nullable: false },
                            ReportsTo: { nullable: true, type: "number" },
                            FirstName: { validation: { required: true } },
                            HireDate: { type: "date" },
                            Phone: { type: "string" },
                            HireDate: { type: "date" },
                            BirthDate: { type: "date" },
                            Extension: { type: "number", validation: { min: 0} },
                            Position: { type: "string" }
                        },
                        expanded: true
                    }
                }
        });

        $("#treelist").kendoTreeList({
            dataSource: dataSource,
            toolbar: [ "create", "save", "cancel" ],
            editable: "incell",
            height: 540,
            dataBound: function (e) {
                var items = e.sender.items();
                for (var i = 0; i < items.length; i++) {
                    var dataItem = e.sender.dataItem(items[i]);
                    var row = $(items[i]);
                    if (dataItem.isNew()) {
                        row.find("[data-command='createchild']").hide();
                    }
                    else {
                        row.find("[data-command='createchild']").show();
                    }
                }
            },
            edit: function(e) {
                model = e.model;
            }, 
            columns: [{ 
                field: "EmployeeId",
                expandable: true, 
                title: "Serial Number", 
                width: 180,
                editor: function(container, options) {
                      // create an input element
                      var input = $("<input/>");
                      // set its name to the field to which the column is bound ('lastName' in this case)
                      input.attr("name", options.field);
                      // append it to the container
                      input.appendTo(container);
                      // initialize a Kendo UI AutoComplete
                      input.kendoAutoComplete({
                        dataTextField: "EmployeeId",
                        dataSource: employeesData,
                        select: function(e) {
                          if(model !=null){
                                         model.FirstName = e.dataItem.FirstName;
                                model.LastName = e.dataItem.LastName;
                          }
                        }
                      });
                    }
                },
                { field: "FirstName", title: "First Name", width: 100 },
                { field: "LastName", title: "Last Name", width: 100 },
                { field: "Position", width: 100 },
                { field: "Phone", title: "Phone", width: 100 },
                { field: "Extension", title: "Ext", format: "{0:#}", width: 100 },
                { command: [{name: "createchild", text: "Add child"},"destroy" ], width: 240 }]
            });
    });
    </script>

Answer 2

您可以在保存行或更改編輯字段時觸發功能。 在這里查看事件列表，然后選擇您確切地希望進行更改的時間。 https://demos.telerik.com/kendo-ui/treelist/events

這是保存更改時如何使用所有功能的示例： https : //docs.telerik.com/kendo-ui/api/javascript/ui/treelist/methods/saverow

我不確定您正在使用的女巫編輯方法（內聯，inCell或彈出窗口編輯模式），每種方法都可以使用諸如saveRow，beforeEdit等事件。

在此處查看所有事件文檔： https : //docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events