簡體   English   中英

kendo ui treelist-鎖定列

[英]kendo ui treelist - lock a column

我正在嘗試在kendo UI中的樹列表上的列上創建鎖。 如果用戶單擊按鈕,它將鎖定樹形列表中的一列,我嘗試這樣做:

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/treelist/frozen-columns">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
  <button>click me</button>

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

            <script>
                $(document).ready(function () {

                  $("button").click(function(){
                            var treelist = $("#treelist").data("kendoTreeList");

                            treelist.lockColumn("LastName");
                  });

                    var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";

                    var dataSource = new kendo.data.TreeListDataSource({
                            transport: {
                                read: {
                                    url: crudServiceBaseUrl + "/EmployeeDirectory",
                                    dataType: "jsonp"
                                }
                            },
                            schema: {
                                model: {
                                    id: "EmployeeId",
                                    fields: {
                                        EmployeeId: { type: "number", nullable: false },
                                        parentId: { field: "ReportsTo", nullable: true }
                                    }
                                }
                            }
                        });

                    $("#treelist").kendoTreeList({
                        dataSource: dataSource,
                        reorderable: true,
                        resizable: true,
                        sortable: true,
                        filterable: true,
                        columnMenu: true,
                        columns: [
                            {
                                field: "FirstName",
                                expandable: true,
                                title: "First Name",
                                   lockable: true,
                                width: 250
                            },
                            {
                                field: "LastName",
                                title: "Last Name",
                                 lockable: true,
                                width: 200
                            },
                            {
                                field: "Position",
                                width: 400,
                                 lockable: true
                            },
                            {
                                field: "Extension",
                                title: "Ext",
                                format: "{0:#}",
                                width: 150,

                            }
                        ]
                    });
                });
            </script>

            <style>
                #treelist {
                    width: 950px;
                }
            </style>
        </div>



</body>
</html>

lockColumn函數會在控制台上顯示錯誤,並且不會在treelist上產生任何鎖定:

 TypeError: d is undefined              kendo.all.min.js:53:29331

http://dojo.telerik.com/elipA

lockColumn API: http ://docs.telerik.com/kendo-ui/api/javascript/ui/treelist

Telerik Kendo UIs TreeList在列鎖定方面有一個限制,即在初始化階段必須鎖定至少一列,以使編程列鎖定按照文檔進行工作:“為了使用此方法,必須將樹列表設置為初始化時至少要有一個鎖定列,並且在鎖定目標列之后應該還剩下未鎖定的列。”,來源http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-lockColumn

請參閱以下更正的Dojo示例: http : //dojo.telerik.com/@mrtaunus/iYeGI

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM