剑道 UI 网格冻结列

Posted 2023-05-07

【中文标题】剑道 UI 网格冻结列

【英文标题】：Kendo UI Grid Frozen Column

【发布时间】：2013-12-15 12:36:53

【问题描述】：

kendo ui 网格不支持冻结列。如果有人可以帮助定制剑道网格冻结列的脚本，将不胜感激。有什么建议吗？

列：[]

【参考方案1】：

Kendo UI Grid 将在下一个正式版本 - 2014 年第一季度支持冻结列。在此之前，我能给您的最佳建议是使用绑定到同一数据源的两个网格。

var dataSource = new kendo.data.DataSource(
  /* snip */  
);

$("#frozen").kendoGrid(
  dataSource: dataSource,
  columns: [
    "OrderID"
  ],
  height: 200,
  sortable: true
);

$("#grid").kendoGrid(
  dataSource: dataSource,
  height: 200,  
  columns: [
     field: "Freight", width: 100 ,
     field: "ShipName", width: 200 ,
     field: "OrderDate", width: 200, format: "0:d" ,
     field: "ShipCity", width: 200 
  ],
  sortable: true
);

这个和一些 CSS 魔法可以模拟冻结列的外观：http://jsbin.com/uCEQOCi/1/edit

但有一个警告。在这种情况下，只有弹出编辑模式可以工作。

【讨论】：

感谢您的回复。不制作两个单独的网格是可能的吗？

@AtanasKorchev，您有什么想法可以让您的解决方案在 iPad 上运行吗？我试图让滚动事件在桌子上捕获，但还没有运气。

【参考方案2】：

我认为在2020.1.219的新版本中，是否有锁定属性。

锁定：Example - locked columns

<div id="grid"></div>

JS：

<script>
 $("#grid").kendoGrid(
  columns: [
    locked: true, field: "id", width:200 ,
    field: "name", width:800 
  ],
  dataSource: [  id: 1, name: "Jane Doe" ,  id: 2, name: "John Doe"  ]
);
</script>

【参考方案3】：

下面的代码你可能对冻结列有所了解

<div id="kendogrid" data-bind="kendoGrid:   data: SearchResults, schema:  model:  fields:  DateOfBirthSortable:  type: 'date' , pageable:pageSize: 15 ,selectable:'row',reorderable: true, navigatable:true, sortable: true,resizable: true,filterable: true,groupable: true,columnMenu: true,navigatable: true, 
                                    columns: [   field: 'UniqueID', title : 'Id' , width:50,locked: true,lockable:false,event:change:DoSearch,
                                                 field: 'Salutation', title : '#',width:80,locked: true, template:'<span> #if(Salutation != null) # <span> #= Salutation #</span> #  #</span>'  ,
                                                 field: 'FirstName', title : 'First Name',  width:150,locked: true, ,
                                                 field: 'LastName', title : 'Last Name',width:150,locked: true, template:'<span> #if(LastName != null) # <span> #= LastName #</span> #  #</span>'  ,
                                                 field: 'Mobile', title : 'Mobile' ,width:100, template:'<span>#if(Mobile != null) # <span>#=Mobile #</span> ## </span>' , 
                                                 field: 'Phone', title : 'Phone',width:100, template:'<span>#if(Phone != null)#<span>#= Phone#</span> ## </span>'  ,
                                                 field: 'Email', title : 'Email',width:200, template:'<span>#if(Email != null)#<span>#= Email#</span> ## </span>'  ,
                                                 field: 'DateOfBirthSortable', title : 'DOB',width:100,format: '0: MM/dd/yyyy ',filterable:ui: 'datepicker' ,template:'<span> #if(DateOfBirth != null) # <span> #= DateOfBirth #</span> #  #</span>'  ,
                                                 field: 'AddressLine1', title : 'AddressLine1', width:150, template: '<span >#if(AddressLine1 != null)#<span>#=AddressLine1 #</span> # # </span>'  ,
                                                 field: 'AddressLine2', title : 'AddressLine2',  width:150, template: '<span > #if(AddressLine2 != null)# <span>#=AddressLine2 # </span> # # </span>'  ,
                                                 field: 'City', title : 'City',  width:100, template: '<span >#if(City != null)#<span>#=City #</span>  # # </span>'  ,
                                                 field: 'State', title : 'State',  width:100, template: '<span >#if(State != null)#<span>#=State #</span> # #</span>'  ,
                                                 field: 'Country', title : 'Country',  width:100, template: '<span >#if(Country != null)#<span>#=Country #</span>  # #</span>'  ,
                                                 field: 'Zip', title : 'Zip',  width:100, template: '<span >#if(Zip != null)#<span>#=Zip #</span>  # #</span>'  
                                                ],change: onChange">
                                    </div>

您必须包含“columnMenu: true and scrollable:true”，然后您必须定义每列的宽度。