Question

我正在尝试在kendo UI中的treelist上创建一个锁。如果用户点击按钮，它将锁定树形图中的一列，我试着这样：

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

Answer 1

Telerik Kendo UIs TreeList在列锁定方面有一个限制，即在初始化阶段必须锁定至少一列，以便程序列锁定按照文档的规定工作：＆＃34;为了使用它方法，必须使用至少一个锁定列初始化树形图，并且在目标列被锁定后应该保留未锁定的列。＆＃34;，源http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-lockColumn。

请在此处查看更正的Dojo示例：http://dojo.telerik.com/@mrtaunus/iYeGI。

kendo ui treelist - 锁定一个列

1 个答案: