【发布时间】：2014-03-31 07:54:25
【问题描述】：
我在 jquery 中创建了一个剑道网格，它有大量的列假设为 50。最初只有 10 个可见，最终用户可以通过列菜单使其他列可见。
问题：
如果列数太大，比如我的情况，列菜单中的列窗口就会变得太大。我想要的是在其中加入一个卷轴。
下面我展示了图片：
jquery：
//Creating Kendo Grid For Tasks
divSearchGrid.kendoGrid({
dataSource: {
transport: {
read: function (options) {
$.ajax({
type: "POST",
url: urlSearch,
data: paramsSearch,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
var data = result.d;
if (data != null) {
if (data.length > 0) {
orignalComplexData = data;
structuredData = [];
for (var i = 0; i < data.length; i++) {
var checkExistance = '';
var objStructured = {};
objStructured['StatusID'] = 1;
objStructured['AttID'] = 1;
objStructured['ServiceDefautltSRSubject'] = data[i].ServiceDefautltSRSubject;
objStructured['IsDescriptionEditable'] = data[i].IsDescriptionEditable;
objStructured['RecordStatusID'] = data[i].RecordStatusID;
objStructured['TaskOrder'] = data[i].TaskOrder;
objStructured[defaultTaskColumnAray[0]] = data[i].ServiceRequestID;
objStructured[defaultTaskColumnAray[1]] = data[i].TaskID;
objStructured[defaultTaskColumnAray[2]] = data[i].TaskDescription;
objStructured[defaultTaskColumnAray[3]] = data[i].FolderDescription;
objStructured[defaultTaskColumnAray[4]] = data[i].FolderSubject;
objStructured[defaultTaskColumnAray[5]] = data[i].AssignedToName;
objStructured[defaultTaskColumnAray[6]] = data[i].StatusName;
objStructured[defaultTaskColumnAray[7]] = data[i].ServiceName;
objStructured['NavigateURI'] = data[i].NavigateURI;
objStructured['SRNavigateURI'] = data[i].SRNavigateURI;
objStructured['NavigateURIPSRID'] = data[i].NavigateURIPSRID;
objStructured['StatusIconpath'] = data[i].StatusIconPath;
objStructured['RecordStatusIcon'] = data[i].RecordStatusIcon;
if (data[i].PSRID != 0) {
objStructured[defaultTaskColumnAray[8]] = data[i].PSRID;
}
else {
objStructured[defaultTaskColumnAray[8]] = '';
}
objStructured[defaultTaskColumnAray[9]] = data[i].PSRSubject
var customFieldList = data[i].RecordStatusToolTip.split('%');
if (selectedFolderType != '' || defaultServiceGUID != '') {
for (var j = 0; j < customFieldList.length; j++) {
var fieldIndex = $.inArray(customFieldList[j].split('||')[0], checkExistance.split(','));
if (fieldIndex == -1) {
if (customFieldList[j].split('||')[2] == '5' || customFieldList[j].split('||')[2] == '6') {
if (customFieldList[j].split('||')[1] == 'true') {
objStructured[customFieldList[j].split('||')[0]] = true;
}
else {
objStructured[customFieldList[j].split('||')[0]] = false;
}
}
else if (customFieldList[j].split('||')[2] == '7') {
if (customFieldList[j].split('||')[1] != '') {
if (new Date(customFieldList[j].split('||')[1]) != 'Invalid Date') {
objStructured[customFieldList[j].split('||')[0]] = customFieldList[j].split('||')[1];
}
else {
objStructured[customFieldList[j].split('||')[0]] = customFieldList[j].split('||')[1].split('/')[1] + '/' + customFieldList[j].split('||')[1].split('/')[0] + '/' + customFieldList[j].split('||')[1].split('/')[2];
}
}
else {
if (new Date(customFieldList[j].split('||')[4]) != 'Invalid Date') {
objStructured[customFieldList[j].split('||')[0]] = new Date(customFieldList[j].split('||')[4]);
}
else {
objStructured[customFieldList[j].split('||')[0]] = customFieldList[j].split('||')[4].split('/')[1] + '/' + customFieldList[j].split('||')[4].split('/')[0] + '/' + customFieldList[j].split('||')[4].split('/')[2];
}
}
}
else {
objStructured[customFieldList[j].split('||')[0]] = customFieldList[j].split('||')[1];
}
checkExistance = checkExistance + "," + customFieldList[j].split('||')[0];
}
}
}
objStructured[defaultTaskColumnAray[10]] = data[i].GUID
objStructured[defaultTaskColumnAray[11]] = data[i].ServiceRequestGUID
structuredData.push(objStructured)
}
//Below code collapse all the panels of the panel bar
panelbar.collapse($("li", panelbar.element));
options.success(structuredData)
}
else {
//Below code collapse all the panels of the panel bar
panelbar.collapse($("li", panelbar.element));
divSearchGrid.html('<h4>No records To Display</h4>')
// To stop the Auto Refresh of the grid if there are no results
isEditing = true;
}
}
else {
divSearchGrid.html('<h4>Some Error Occured</h4>')
}
}
})
}
},
pageSize: 10
},
batch: true,
groupable: true,
scrollable: true,
dataBound: GridDataBound,
sortable: true,
reorderable: true,
resizable: true,
selectable: "row",
editable: true,
columns: columnList,
columnMenu: true,
filterable: true,
columnMenu: {
sortable: false
},
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5,
pageSizes: [10, 25, 50, 100, 200]
},
});
我们将不胜感激。
【问题讨论】：
-
您使用的是哪个版本的 KendoUI？我试图在以下示例中重现它：jsfiddle.net/OnaBai/8k8NN/1 它可以按照您的要求工作（滚动列）。注意：此示例使用 2013.2.712（甚至不是最后一个）
-
@OnaBai：感谢您的回复。我正在使用最新版本的剑道 UI，我看到了你的小提琴，这就是我需要的。但遗憾的是不适合我。
-
我的剑道版本是2013.3.1324
-
我可以确认@OnaBai 示例对我有用。
-
@NitinRawat 这是一些剑道版本的问题。使用您在此处jsfiddle.net/OnaBai/8k8NN/2 中所说的版本检查我之前的示例，并与最新版本jsfiddle.net/OnaBai/8k8NN/3 相同
标签： jquery kendo-ui kendo-grid