Question

我有剑道树列表（在uid或值的帮助下），我在其中搜索myDataItem所在的行。当我执行时：

$("#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)

我得到：

“实际”所选行：对象[tr.k-alt ...]

所选行：对象{长度：0 ...}

我的行：对象{长度：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，直到/除了新添加的tr。为什么？

Answer 1

使用change事件，而不是将click事件绑定到小部件的DOM。请注意，要使change工作，您需要将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模式，管理是控制器类）

 $.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 /网格中获得一行？

2 个答案: