DevExtreme 之 TreeList 中 固定列（columnFixing）学习踩坑

固定列属性：

columnFixing: {
            enabled: true, // 开启 固定列 功能
            texts:{ 
                // 以下设置为踩坑原因，尤其 leftPosition 与 rightPosition 误导成设置固定列放置的位置
                fix:"Fix",
                leftPosition:"To the left",
                rightPosition:"To the right",
                unfix:"Unfix",
            }
        },

博主一开始，天真的以为 leftPosition 与 rightPosition 就是设置列固定在左侧 还是 右侧 ，结果，坑是无比的耀眼啊 ~~~

后面解决固定列的位置，是因为看到了官方介绍（博主眼拙，一开始没注意看官方介绍） ，其中，提到的 fixedPosition 属性，一看属性介绍，坑爹啊 ~~~ 

 

 

以上便是官方对这个属性的介绍 ，所以，这才是决定固定列左或右的属性，它是设置在 columns[]  列字段里面。具体位置下面的源码有写。

 

附上成功案例源码：

 1 $(function(){
 2     $("#employees").dxTreeList({
 3         dataSource: employees,
 4         keyExpr: "ID",
 5         parentIdExpr: "Head_ID",
 6         columns: [{
 7                 dataField: "Title",
 8                 caption: "Position"
 9             }, {
10                 dataField: "Full_Name",
11                 fixed: true,
12                 fixedPosition:"right",
13                 
14             }, "City", "State", "Mobile_Phone", "Email", {
15                 dataField: "Hire_Date",
16                 dataType: "date"
17             }, {
18                 dataField: "Birth_Date",
19                 dataType: "date"
20             }, "Skype"],
21         columnAutoWidth: true,
22         showRowLines: true,
23         showBorders: true,
24         columnFixing: {
25             enabled: true,
26             texts:{
27                 fix:"Fix",
28                 leftPosition:"To the left",
29                 rightPosition:"To the right",
30                 unfix:"Unfix",
31             }
32         },
33         
34         expandedRowKeys: [1, 2, 10]
35     });
36 });
View Code

效果图：

 

posted @ 2021-09-27 18:42  前端开发小姐姐  阅读(300)  评论(0)  编辑  收藏  举报