Grid 剑道UI网格冻结列
剑道ui网格不支持冻结列。如果有人能为剑道网格冻结列定制脚本提供帮助,我们将不胜感激。有什么建议吗Grid 剑道UI网格冻结列,grid,kendo-ui,fixed,multiple-columns,freeze,Grid,Kendo Ui,Fixed,Multiple Columns,Freeze,剑道ui网格不支持冻结列。如果有人能为剑道网格冻结列定制脚本提供帮助,我们将不胜感激。有什么建议吗 列:[]剑道UI网格将在下一个官方版本(2014年第1季度)中支持冻结列。在此之前,我能给你的最好建议是使用绑定到同一数据源的两个网格 var dataSource = new kendo.data.DataSource({ /* snip */ }); $("#frozen").kendoGrid({ dataSource: dataSource, columns: [
列:[]剑道UI网格将在下一个官方版本(2014年第1季度)中支持冻结列。在此之前,我能给你的最好建议是使用绑定到同一数据源的两个网格
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魔术将模拟冻结列的外观:
不过有一个警告。在这种情况下,只有弹出式编辑模式才能工作。下面的代码可能会让您了解冻结列
<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和scrollable:true”,然后您必须为每一列定义宽度 我认为在2020.1.219的新版本中,有一个锁定属性 锁定:
JS:
$(“#网格”).kendoGrid({
栏目:[
{locked:true,字段:“id”,宽度:200},
{字段:“名称”,宽度:800}
],
数据源:[{id:1,名称:“Jane Doe”},{id:2,名称:“John Doe”}]
});
谢谢您的回复。不制作两个独立的网格是可能的吗?@AtanasKorchev,有没有想法让你的解决方案在iPad上工作?我正在尝试将滚动事件捕捉到桌面上,但还没有成功。
<div id="grid"></div>
<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>