kendo-ui - 在 Kendo Ui 树列表中编辑数据时如何获取字段值

Question

我是 Kendo UI 的新手，我有一个问题。现在我正在使用 TreeList / Editing 以及当我将值编辑到第一个字段时如何将值自动加载到其他字段？

示例： 1.
序列号：123456789
2.名称：测试

当我将序列号 123456789 编辑到第一个字段并将名称自动加载到第二个字段时。

Answer 1

要根据对 A 列所做的更改来设置 B 列的值，您需要编辑绑定到树列表的模型。为此，请执行以下操作：-

1. 处理树列表的编辑事件。在此将模型保存到局部变量。
2. 将编辑器模板添加 到 A 列。在选择事件上设置模型的值。

下面是一个工作代码片段： -

<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