Попробуйте убедиться, что проблема с горизонтальной полосой прокрутки существует в веб-браузерах Google Chrome или Safari.Если в браузерах у вас не будет горизонтальной полосы прокрутки, то проблема у вас та же, что я описал здесь .
Проблема в том, что jqGrid неправильно вычислил ширину в случае shrinkToFit:false.Мое предложение исправить ошибку реализовано в коде jqGrid на GitHub и обязательно будет в коде следующей версии jqGrid.Таким образом, вы можете попытаться использовать версию jqGrid для разработчика (не минимизированную) из GitHub или установить правильную width сетки в явном виде, как я описал в отчете об ошибке .
Еще один обходной путь: вы можете исправить ширину сетки с помощью функции fixGridWidth, код которой я разместил здесь .
ОБНОВЛЕНО : Iпосмотрел проблему еще раз и могу сказать, что ваша проблема действительно связана с ошибкой в jqGrid в случае использования shrinkToFit:false.После изменения одной строки кода jqGrid (после исправления ошибки) и незначительных изменений в определении jqGrid сетка будет иметь следующий вид:
Вы можете увидеть его в реальном времени здесь .Соответствующий код:
$(function() {
var mydata = [
{id:"1",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"2",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"3",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"4",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"5",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"6",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""},
{id:"7",code1:"1",code2:"22",code3:"aaa",code4:"2.00",code5:"25.00",code6:"",code7:"1234",code8:"",code9:""}
];
$("#gridTable").jqGrid({
editurl: "clientArray",
direction:"rtl",
datatype: "local",
data: mydata,
colNames:['Code1','Code2', 'Code3', 'Code4','Code5','Code6','Code7','Code8','Code9'],
colModel:[
{name:'code1',index:'code1', width:60, sorttype:"int", editable:true},
{name:'code2',index:'code2', width:150, sorttype:"date", editable:true},
{name:'code3',index:'code3', width:150, editable:true},
{name:'code4',index:'code4', width:80, sorttype:"float", editable:true},
{name:'code5',index:'code5', width:80, sorttype:"float", editable:true},
{name:'code6',index:'code6', width:80, sorttype:"float", editable:true},
{name:'code7',index:'code7', width:80, sortable:false, editable:true},
{name:'code8',index:'code8', width:80, sorttype:"float", editable:true},
{name:'code9',index:'code9', sorttype:"float", editable:true}
],
height: 'auto',
shrinkToFit: false
});
});
Код исправляет небольшие ошибки в вашем коде и делает минимальную оптимизацию в отношении использования параметра data вместо addRowData.Небольшие ошибки в вашем коде следующие:
- в конце инициализации
mydata у вас стоит запятая перед ']', что является синтаксической ошибкой.Та же ошибка, что и у вас в определении colModel.Вы должны удалить обе запятые перед ']'.В случае использования data настоятельно рекомендуется включить дополнительное свойство id в определение каждого элемента в массиве mydata.id определит соответствующий идентификатор строки. - в цикле
for(var i=0;i<=mydata.length;i++), к которому вы попытаетесь обратиться к неопределенному элементу mydata[mydata.length].Цикл должен быть изменен на for(var i=0;i<mydata.length;i++).Лучше заполнить сетку параметром data (см. Код выше). - параметр
edittype:'text', используемый во всех столбцах, используется по умолчанию, поэтому вы можете удалить его. - не существует параметра jqGrid
scrolling: true, который будет просто игнорироваться jqGrid. - параметр jqGrid
autowidth: true кажется мне не очень хорошим в случае использования вместе с shrinkToFit: false, поскольку он будет следоватьизменение ширины сетки.Поэтому у вас будет либо горизонтальная полоса прокрутки в сетке из-за autowidth: true, либо у вас будет много свободного пространства в качестве части сетки. - установка высоты сетки явно как
height: '120px' вместо height: 'auto' canтакже следует за вертикальной полосой прокрутки, которая будет принимать ширину сетки.Таким образом, горизонтальная полоса также может быть видна.
ОБНОВЛЕНО : я рекомендую дополнительно взглянуть на демо и этот от комментарий .
ОБНОВЛЕНО 2 : такой проблемы не существует в бесплатной jqGrid .