0

我在一个视图中配置了 3 个剑道 ui 树列表。我正在尝试从其他扩展事件中扩展一棵树列表。当从当前树视图事件中调用扩展方法时，它会扩展指定的树列表，但会阻止当前树列表的扩展。下面是相同的代码块。有人可以说明我哪里出错了：

html:

     <div id="products"></div>
     <div id="suppliers"></div>
     <div id="categories"></div>

JS：

    var data = [{"ProductID": 1,"ProductName": "Chai","ParentID": null,
    "UnitPrice": 18,"QuantityPerUnit": "10 boxes x 20 bags",
    "UnitsInStock":39,"UnitsOnOrder": },"ProductID":2,"ProductName":"Chang",
    "ParentID": null,"UnitPrice": 19,"QuantityPerUnit": 
    "24 - 12 oz bottles","UnitsInStock": 17,"UnitsOnOrder": 40},
    {"ProductID": 3,"ProductName": "Aniseed Syrup","ParentID": null,
    "UnitPrice": 10,"QuantityPerUnit": "12 - 550 ml bottles",
    "UnitsInStock": 13,"UnitsOnOrder": 70},{"ProductID": 4,
    "ProductName": "Chef Anton's Cajun Seasoning","ParentID": 1,                                                                                                                               "UnitPrice": 22,"QuantityPerUnit": "48 - 6 oz jars","UnitsInStock": 53,
     "UnitsOnOrder": 0},{"ProductID": 5,
     "ProductName": "Chef Anton's Gumbo Mix","ParentID": 2,
     "UnitPrice": 21.35,"QuantityPerUnit": "36 boxes","UnitsInStock": 0,
     "UnitsOnOrder": 0},{"ProductID": 6,
     "ProductName": "Grandma's  Boysenberry Spread","ParentID": 1,
     "UnitPrice": 25,"QuantityPerUnit": "12 - 8 oz jars",
     "UnitsInStock": 120,"UnitsOnOrder": 0},{"ProductID": 7,
     "ProductName": "Uncle Bob's Organic Dried Pears",
     "ParentID": 5,"UnitPrice": 30,"QuantityPerUnit": "12 - 1 lb pkgs.",
     "UnitsInStock": 15,"UnitsOnOrder": 0},{"ProductID": 8,
     "ProductName": "Northwoods Cranberry Sauce","ParentID": 6,
     "UnitPrice": 40,"QuantityPerUnit": "12 - 12 oz jars",
     "UnitsInStock": 6,"UnitsOnOrder": 0},{"ProductID": 9,
     "ProductName": "Mishi Kobe Niku","ParentID": 3,
     "UnitPrice": 97,"QuantityPerUnit": "18 - 500 g pkgs.",
     "UnitsInStock": 29,"UnitsOnOrder": 0},{"ProductID": 10,
     "ProductName": "Ikura","ParentID": 1,"UnitPrice": 31,
     "QuantityPerUnit": "12 - 200 ml jars","UnitsInStock": 31,
     "UnitsOnOrder": 0}];

    var dataSource = new kendo.data.TreeListDataSource({
        data: products,
        schema: {
            model: {
            id: "ProductID",
            parentId: "ParentID",
            fields: {
            ProductID: { type: "number", editable: false, nullable: false },
            ParentID: { type: "number", nullable: true },
            ProductName: { type: "string" },
            UnitPrice: { type: "number" },
            UnitsInStock: { type: "number" },
            UnitsOnOrder: { type: "number" },
            QuantityPerUnit: { type: "string" }
            }
        }

        }
    });
    $(document).ready(function () {


        // Create the TreeList
        $("#products").kendoTreeList({
        // Declare the TreeList columns
        columns: [

            { field: "ProductName", title: "Name" },
            { field: "UnitPrice", title: "Price" }
        ],
        // Bind the TreeList to the dataSource
        dataSource: dataSource,
        height: 500,
        scrollable:true
        });

        $("#suppliers").kendoTreeList({
            // Declare the TreeList columns
            columns: [
               { field: "QuantityPerUnit", title: "Quantity" },
               { field: "UnitPrice", title: "Unit Price" }
            ],
            // Bind the TreeList to the dataSource
            dataSource: dataSource,
            height: 500,
            scrollable: true
        });

    $("#categories").kendoTreeList({
        // Declare the TreeList columns
        columns: [

            { field: "UnitsInStock", title: "In Stock" },
            { field: "UnitsOnOrder", title: "On Order" }
        ],
        // Bind the TreeList to the dataSource
        dataSource: dataSource,
        height: 500,
        scrollable: true
    });

    var tlProducts = $("#products").data("kendoTreeList");
    var tlSuppliers = $("#suppliers").data("kendoTreeList");
    tlProducts.bind("expand", expandAll);

        function expandAll(e) {
            var index = tlProducts.tbody.find("tr[data-uid='" + e.model.uid + "']")[0].rowIndex;
            var dataItem = tlSuppliers.expand($("#suppliers tbody>tr:eq(" + index + ")"));


        }
    });
4

1 回答 1

1

对于一个 hacky 解决方法，将调用suppliers.expand放在 settimeout 函数中。在第一个列表视图完成展开之前，另一个列表视图无法开始展开。

于 2016-07-26T12:49:20.457 回答