我的网格如下,
<table id="grid"></table>
var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "7773333777733337777333377773333777733337777333377773333777733337777333377773333777733337", "ENTERED"]];
$("#grid").jqGrid({
datatype: "local",
height: 250,
colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
colModel: [{
name: 'id',
index: 'id',
width: 60,
sorttype: "int"},
{
name: 'thingy',
index: 'thingy',
width: 90,
sorttype: "date"},
{
name: 'blank',
index: 'blank',
width: 30},
{
name: 'number',
index: 'number',
width: 80,
sorttype: "float"},
{
name: 'status',
index: 'status',
width: 80,
sorttype: "float"}
],
caption: "Stack Overflow Example",
// ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});
var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];
for (var i = 0; i < data.length; i++) {
mydata[i] = {};
for (var j = 0; j < data[i].length; j++) {
mydata[i][names[j]] = data[i][j];
}
}
for (var i = 0; i <= mydata.length; i++) {
$("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}
$("#grid").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
var $this = $("#grid"),
$cells = $this.find(">tbody>tr>td"),
$colHeaders = $this.closest(".ui-jqgrid-view").find(">.ui-jqgrid-hdiv>.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"),
colModel = $this.jqGrid("getGridParam", "colModel"),
iCol,
iRow,
rows,
row,
n = $.isArray(colModel) ? colModel.length : 0,
cm,
colWidth,
idColHeadPrexif = "jqgh_" + this.id + "_";
$cells.wrapInner("<span class='mywrapping'></span>");
$colHeaders.wrapInner("<span class='mywrapping'></span>");
for (iCol = 0; iCol < n; iCol++) {
cm = colModel[iCol];
if (cm.hidden) {
continue;
}
colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth() + 25; // 25px for sorting icons
for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
row = rows[iRow];
if ($(row).hasClass("jqgrow")) {
colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());
}
}
//$("#grid").jqGrid("setColWidth", iCol, colWidth);
alert(iCol + colWidth);
//$("#grid").jqGrid('setColProp',iCol,{width:colWidth});
$('#grid tr').find('td:eq('+iCol+')').each(function(){$(this).css('width',colWidth);}); // will set the column widths
//var gw = $("#grid").jqGrid('getGridParam','width');
//$("#grid").jqGrid('setGridWidth',gw);
}
});
<style type="text/css">
.ui-jqgrid tr.jqgrow td {
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
height: auto;
vertical-align: middle;
padding-top: 3px;
padding-bottom: 3px
}
</style>
我正在尝试使用
为列设置自动宽度 $("#grid").jqGrid("setColWidth", iCol, colWidth);
导致我'setColWidth未定义'。顺便说一句,我正在使用jquery1.8。
然后我尝试使用这种方式,
$('#grid tr').find('td:eq('+iCol+')').each(function(){$(this).css('width',colWidth);});
这不会给出任何脚本错误,但它也没有设置列的宽度。
但是当我这样做时,正确地为每列打印宽度
alert(iCol + colWidth);
我在这段代码中犯了什么错误?可以帮我解决这个问题吗?
我该如何解决这个问题......?
需要帮助...
提前致谢...
答案 0 :(得分:1)
jqGrid 4.4.1 is really very old version. In any way it have no setColWidth
method, which I introduced as plugin to jqGrid in the answer originally. If you have to use setColWidth
you have to include jQuery.jqGrid.setColWidth.js
which you can download from GitHub. Later I included the method and implemented the functionality auto-width in free jqGrid 4.8. It's the fork of jqGrid which I develop (see the readme). See the wiki article for more information.
I recommend you to update to free jqGrid 4.9.1 or to the latest code which you can download from GitHub. In the case you will be have setColWidth
method and many other features.