如何获得剑道UI的TreeList /网格行?

问题描述 投票:0回答:2

我有一个剑道的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)

我得到:

'真正的' 选择行:对象[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的,直到/除了新增加的一个。为什么?

javascript razor kendo-ui kendo-grid kendo-treelist
2个回答
1
投票

使用change事件,而不是绑定一个click事件widget的DOM。请注意,change工作,你需要设置selectabletrue

<!-- 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


0
投票

我没有找到一个解决方案,我可以datauid获得TR。但对我来说,我把项目的ID,并把它放在一个看不见的行中的树形列表。因此,在这个问题的方法getRowWhereItem(itemId)使其成为全成Ajax调用后执行时效果很好。从我的Ajax调用回调,我加载新的项目,则该方法可以找到该行。所以,问题是,我不得不从我的数据库有UPTODATE数据。

另一个问题是与上下文。该方法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");
     }
 });
© www.soinside.com 2019 - 2024. All rights reserved.