如何在 Kendo UI TreeList / Grid 中获取一行？

Question

我有一个 Kendo TreeList，我在其中搜索 myDataItem 所在的行（借助 uid 或值）。当我执行时：

$("#treeList tbody").on("click", "tr", function (e) {
        var rSelectedRow = $(this);
        var getSelect = treeList.select();
        console.log("'real' selected row: "+rSelectedRow);
        console.log("selected row: "+getSelect);
});

在另一个函数中，我想得到一行（不是选定的一行，只是 myDataItem 所在的一行）：

var grid = treeList.element.find(".k-grid-content");
var myRow = grid.find("tr[data-uid='" + myDataItem.uid + "']"));
//or
//  myRow = treeList.content.find("tr").eq(myDataItem.val); 
console.log("my row:" + myRow)

我得到：

'real' selected row: Object [ tr.k-alt ... ]

selected row: Object { length: 0 ... }

my row: Object { length: 0 ... }

我需要与 rSelectedRow 相同的结构用于 myRow。那么我怎样才能得到真正的 tr 元素呢？

更新：我写了这个方法来找到我的新添加项目的行：

//I have an id of the item and put it in an invisible row in the treelist.
getRowWhereItem: function (itemId) {
    treeList.dataSource.read();
    $("#menuItemTree .k-grid-content tr").each(function (i) {
        var rowId = $(this).find('td:eq(1)').text();
        console.log(itemId);
        console.log(rowId);
        if (rowId == itemId) {
            console.log("found");
            console.log(itemId + " " + rowId);
            var row = this;
            console.log(row);
            return row;
        }
    });           
},

每次迭代都达到所有 tr 的 until/except 新添加的。为什么？

Answer 1

使用change event instead of binding a click event to the widget's DOM. Note that for change to work, you need to set selectable到true:

<!-- Orginal demo at https://demos.telerik.com/kendo-ui/treelist/index -->
<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treelist/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">

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

        <script id="photo-template" type="text/x-kendo-template">
           <div class='employee-photo'
                style='background-image: url(../content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
           <div class='employee-name'>#: FirstName #</div>
        </script>

        <script>
            $(document).ready(function() {
                var service = "https://demos.telerik.com/kendo-ui/service";

                $("#treelist").kendoTreeList({
                    dataSource: {
                        transport: {
                            read: {
                                url: service + "/EmployeeDirectory/All",
                                dataType: "jsonp"
                            }
                        },
                        schema: {
                            model: {
                                id: "EmployeeID",
                                parentId: "ReportsTo",
                                fields: {
                                    ReportsTo: { field: "ReportsTo",  nullable: true },
                                    EmployeeID: { field: "EmployeeId", type: "number" },
                                    Extension: { field: "Extension", type: "number" }
                                },
                                expanded: true
                            }
                        }
                    },
                    height: 540,
                    filterable: true,
                    sortable: true,
                    columns: [
                        { field: "FirstName", title: "First Name", width: 280,
                          template: $("#photo-template").html() },
                        { field: "LastName", title: "Last Name", width: 160 },
                        { field: "Position" },
                        { field: "Phone", width: 200 },
                        { field: "Extension", width: 140 },
                        { field: "Address" }
                    ],
                    pageable: {
                        pageSize: 15,
                        pageSizes: true
                    },
                    /* See here */
                   selectable: true,
                    change: function() {
                      let $selectedItem = this.select(),
                          dataItem1 = this.dataItem($selectedItem),
                          uid1 = $selectedItem.data("uid"),
                          uid2 = dataItem1.uid,
                          dataItem2 = this.dataSource.getByUid(uid1);

                      console.log("selected item", $selectedItem);
                      console.log("dataItem", dataItem1);
                      console.log("dataItem(alternative way)", dataItem2);
                      console.log("uid", uid1);
                      console.log("uid(alternative way)", uid2);
                    }
                });
            });
        </script>

        <style>
            .employee-photo {
                display: inline-block;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background-size: 32px 35px;
                background-position: center center;
                vertical-align: middle;
                line-height: 32px;
                box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
                margin-left: 5px;
            }

            .employee-name {
                display: inline-block;
                vertical-align: middle;
                line-height: 32px;
                padding-left: 3px;
            }
        </style>
    </div>
</body>
</html>

真正重要的部分：

selectable: true,
change: function() {
  let $selectedItem = this.select(),
      dataItem1 = this.dataItem($selectedItem),
      uid1 = $selectedItem.data("uid"),
      uid2 = dataItem1.uid,
      dataItem2 = this.dataSource.getByUid(uid1);

  console.log("selected item", $selectedItem);
  console.log("dataItem", dataItem1);
  console.log("dataItem(alternative way)", dataItem2);
  console.log("uid", uid1);
  console.log("uid(alternative way)", uid2);
}

Demo

Answer 2

我没有找到可以通过 datauid 获取 tr 的解决方案。但就我而言，我获取了项目的 id 并将其放在树列表中的不可见行中。因此，问题中的方法 getRowWhereItem(itemId) 在 Ajax 调用成功后执行时效果很好。通过 ajax 调用的回调，我加载了新项目，然后该方法可以找到该行。所以问题是我必须从我的数据库中获取最新数据。

另一个问题是 上下文。方法 getRowWhereItem(itemId) 是一个命名空间的方法。我试图在命名空间外调用该方法，但无法获取它的 return。现在，我将该方法移动到我调用它的同一上下文中。

(注：我的开发遵循MVC模式，Administration是一个Controller-class)

 $.ajax({
     url: General.createMethodUrl("Administration", "Admin", "Add_New"),
     data: { parentItemId: parentOfNewId },
     type: "POST",
     dataType: "json",
     success: function (response) {
         if (response) {
             var addedItem = $.parseJSON(response);
             //waiting for callback because otherwise the window opens a few milliseconds before the properties are loaded  and newRow cannot be find   
             tManag.ajaxCallSelectedEntry(addedItem.Id, treeList, function () {
                 newRow = tManag.getRowWhereItem(addedItem.Id);
             });

             jQuery(newRow).addClass("k-state-selected")    
         } else {
                    tManag.alertDialog(dialog, "Adding New Item Notification", response.responseText);
         }
     },
     error: function (response) {
         tManag.alertDialog(dialog, "Adding New Item Error", "Error");
     }
 });

如何在 Kendo UI TreeList / Grid 中获取一行？

How to get a row in Kendo UI TreeList / Grid?

javascript

razor

kendo-ui

kendo-grid

kendo-treelist