blocks|key|151851|text|下面是基于列内容实现jqGrid列宽的方法。将其添加到gridComplete事件中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151852|$(this).parent().append('<span+id="widthTest"+/>');

gridName+=+this.id;

$('#gbox_'+%2B+gridName+%2B+'+.ui-jqgrid-htable,#'+%2B+gridName).css('width',+'inherit');
$('#'+%2B+gridName).parent().css('width',+'inherit');

var+columnNames+=+$("#"+%2B+gridName).jqGrid('getGridParam',+'colModel');
var+thisWidth;

//+Loop+through+Cols
for+(var+itm+=+0,+itmCount+=+columnNames.length;+itm+<+itmCount;+itm%2B%2B)+{

+++++var+curObj+=+$('[aria-describedby='+%2B+gridName+%2B+'_'+%2B+columnNames[itm].name+%2B+']');

+++++var+thisCell+=+$('#'+%2B+gridName+%2B+'_'+%2B+columnNames[itm].name+%2B+'+div');
+++++$('#widthTest').html(thisCell.text()).css({
+++++++++++'font-family':+thisCell.css('font-family'),
+++++++++++'font-size':+thisCell.css('font-size'),
+++++++++++'font-weight':+thisCell.css('font-weight')
+++++});
+++++var+maxWidth+=+Width+=+$('#widthTest').width()+%2B+24;++++++++++++++++++++
+++++//var+maxWidth+=+0;++++++++++++++++++++++

+++++//+Loop+through+Rows
+++++for+(var+itm2+=+0,+itm2Count+=+curObj.length;+itm2+<+itm2Count;+itm2%2B%2B)+{
++++++++++var+thisCell+=+$(curObj[itm2]);

++++++++++$('#widthTest').html(thisCell.html()).css({
+++++++++++++++'font-family':+thisCell.css('font-family'),
+++++++++++++++'font-size':+thisCell.css('font-size'),
+++++++++++++++'font-weight':+thisCell.css('font-weight')
++++++++++});

++++++++++thisWidth+=+$('#widthTest').width();
++++++++++if+(thisWidth+>+maxWidth)+maxWidth+=+thisWidth;++++++++++++++++++++++++
+++++}++++++++++++++++++++

+++++$('#'+%2B+gridName+%2B+'+.jqgfirstrow+td:eq('+%2B+itm+%2B+'),+#'+%2B+gridName+%2B+'_'+%2B+columnNames[itm].name).width(maxWidth).css('min-width',+maxWidth);

+}

+$('#widthTest').remove();|code-block|syntax|javascript|151853|下面是一个工作示例：|151854|http://jsfiddle.net/Ba5yK/17/|offset|length|151855|希望这能帮上忙|151856|保罗|151857|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|T|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|10|8|@]|9|@$K|11|L|12|1|13]]|A|$]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|J]]]]

Here's how I implement jqGrid column width based on column content. Add this to the gridComplete event.

<pre><code>$(this).parent().append('&lt;span id="widthTest" /&gt;');

gridName = this.id;

$('#gbox_' + gridName + ' .ui-jqgrid-htable,#' + gridName).css('width', 'inherit');
$('#' + gridName).parent().css('width', 'inherit');

var columnNames = $("#" + gridName).jqGrid('getGridParam', 'colModel');
var thisWidth;

// Loop through Cols
for (var itm = 0, itmCount = columnNames.length; itm &lt; itmCount; itm++) {

 var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[itm].name + ']');

 var thisCell = $('#' + gridName + '_' + columnNames[itm].name + ' div');
 $('#widthTest').html(thisCell.text()).css({
 'font-family': thisCell.css('font-family'),
 'font-size': thisCell.css('font-size'),
 'font-weight': thisCell.css('font-weight')
 });
 var maxWidth = Width = $('#widthTest').width() + 24; 
 //var maxWidth = 0; 

 // Loop through Rows
 for (var itm2 = 0, itm2Count = curObj.length; itm2 &lt; itm2Count; itm2++) {
 var thisCell = $(curObj[itm2]);

 $('#widthTest').html(thisCell.html()).css({
 'font-family': thisCell.css('font-family'),
 'font-size': thisCell.css('font-size'),
 'font-weight': thisCell.css('font-weight')
 });

 thisWidth = $('#widthTest').width();
 if (thisWidth &gt; maxWidth) maxWidth = thisWidth; 
 } 

 $('#' + gridName + ' .jqgfirstrow td:eq(' + itm + '), #' + gridName + '_' + columnNames[itm].name).width(maxWidth).css('min-width', maxWidth);

 }

 $('#widthTest').remove();
</code></pre>

A working example:

<a href="http://jsfiddle.net/Ba5yK/17/" rel="nofollow">http://jsfiddle.net/Ba5yK/17/</a>

Hope this helps,

Paul

blocks|key|4658117|text|这是一个很好的解决方案，但是列宽在调整大小时会跳到初始宽度。这是我修改后的解决方案，作为一个单独的函数。设计为使用设置为false的shrinkToFit，并且只触发一次：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4658118|function+setColumnWidths(gridName)+{
++++if+($('#'+%2B+gridName).attr('columnsSet')=='true')+return;

++++$('body').append('<span+id="widthTest">WIDTHTEST');
++++$('#gbox_'+%2B+gridName+%2B+'+.ui-jqgrid-htable,#'+%2B+gridName).css('width',+'inherit');
++++$('#'+%2B+gridName).parent().css('width',+'inherit');

++++var+containerWidth=$('#'+%2B+gridName).width()+-+20;
++++var+columnNames+=+$("#"+%2B+gridName).jqGrid('getGridParam',+'colModel');
++++var+thisWidth;

++++//+Loop+through+Cols
++++for+(var+itm+=+0,+itmCount+=+columnNames.length;+itm+<+itmCount;+itm%2B%2B)+{

++++++++var+curObj+=+$('[aria-describedby='+%2B+gridName+%2B+'_'+%2B+columnNames[itm].name+%2B+']');

++++++++var+thisCell+=+$('#'+%2B+gridName+%2B+'_'+%2B+columnNames[itm].name+%2B+'+div');
++++++++$('#widthTest').html(thisCell.text()).css({
++++++++++++'font-family':+thisCell.css('font-family'),
++++++++++++'font-size':+thisCell.css('font-size'),
++++++++++++'font-weight':+thisCell.css('font-weight')
++++++++});
++++++++var+maxWidth+=+$('#widthTest').width()+%2B+40;
++++++++//var+maxWidth+=+0;++++++++++++++++++++++

++++++++//+Loop+through+Rows
++++++++for+(var+itm2+=+0,+itm2Count+=+curObj.length;+itm2+<+itm2Count;+itm2%2B%2B)+{
++++++++++++var+thisCell+=+$(curObj[itm2]);

++++++++++++$('#widthTest').html(thisCell.html()).css({
++++++++++++++++'font-family':+thisCell.css('font-family'),
++++++++++++++++'font-size':+thisCell.css('font-size'),
++++++++++++++++'font-weight':+thisCell.css('font-weight')
++++++++++++});

++++++++++++thisWidth+=+$('#widthTest').width();
++++++++++++if+(thisWidth+>+maxWidth)+maxWidth+=+thisWidth;
++++++++}
++++++++if+(maxWidth+>+containerWidth)+maxWidth=containerWidth;
++++++++$("#"+%2B+gridName).jqGrid('setColProp','amount',{width:+maxWidth});
++++++++var+gw+=+$("#"+%2B+gridName).jqGrid('getGridParam','width');
++++++++$("#"+%2B+gridName).jqGrid('setGridWidth',gw,true);
++++++++$('#'+%2B+gridName+%2B+'+.jqgfirstrow+td:eq('+%2B+itm+%2B+'),+#'+%2B+gridName+%2B+'_'+%2B+columnNames[itm].name).width(maxWidth).css('min-width',+maxWidth);

++++}
++++$('#widthTest').remove();
++++$('#'+%2B+gridName).attr('columnsSet','true');
}|code-block|syntax|javascript|4658119|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is a good solution, but the column widths jump to the initial width when re-sizing.
This is my modified solution as a separate function. Designed to work with shrinkToFit set to false, and fire just once:

<pre><code>function setColumnWidths(gridName) {
 if ($('#' + gridName).attr('columnsSet')=='true') return;

 $('body').append('&lt;span id="widthTest"&gt;WIDTHTEST&lt;/span&gt;');
 $('#gbox_' + gridName + ' .ui-jqgrid-htable,#' + gridName).css('width', 'inherit');
 $('#' + gridName).parent().css('width', 'inherit');

 var containerWidth=$('#' + gridName).width() - 20;
 var columnNames = $("#" + gridName).jqGrid('getGridParam', 'colModel');
 var thisWidth;

 // Loop through Cols
 for (var itm = 0, itmCount = columnNames.length; itm &lt; itmCount; itm++) {

 var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[itm].name + ']');

 var thisCell = $('#' + gridName + '_' + columnNames[itm].name + ' div');
 $('#widthTest').html(thisCell.text()).css({
 'font-family': thisCell.css('font-family'),
 'font-size': thisCell.css('font-size'),
 'font-weight': thisCell.css('font-weight')
 });
 var maxWidth = $('#widthTest').width() + 40;
 //var maxWidth = 0; 

 // Loop through Rows
 for (var itm2 = 0, itm2Count = curObj.length; itm2 &lt; itm2Count; itm2++) {
 var thisCell = $(curObj[itm2]);

 $('#widthTest').html(thisCell.html()).css({
 'font-family': thisCell.css('font-family'),
 'font-size': thisCell.css('font-size'),
 'font-weight': thisCell.css('font-weight')
 });

 thisWidth = $('#widthTest').width();
 if (thisWidth &gt; maxWidth) maxWidth = thisWidth;
 }
 if (maxWidth &gt; containerWidth) maxWidth=containerWidth;
 $("#" + gridName).jqGrid('setColProp','amount',{width: maxWidth});
 var gw = $("#" + gridName).jqGrid('getGridParam','width');
 $("#" + gridName).jqGrid('setGridWidth',gw,true);
 $('#' + gridName + ' .jqgfirstrow td:eq(' + itm + '), #' + gridName + '_' + columnNames[itm].name).width(maxWidth).css('min-width', maxWidth);

 }
 $('#widthTest').remove();
 $('#' + gridName).attr('columnsSet','true');
}
</code></pre>

blocks|key|151916|text|我不确定这个问题是否早些时候得到了回答，但下面是我实现的解决方案，它是有效的。只需提供百分比的列宽，所有列的总和应达到100%25。但我不确定如何在运行时添加/删除列。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|151917|我也在做这方面的工作，并将更新所有。|151918|+columns:+[
+++++{+text:+'CheckBox',+datafield:+'ProjectSubstantialPOUADetailsID',+width:+'10%25'+},
+++++{+text:+'Area/Phase+Substantial',+datafield:+'SubstantialPOUA',+width:+'30%25'+},

+++++{+text:+'Type',+datafield:+'SubstantialTypeName',+width:+'15%25'+},
+++++{+text:+'Achieved',+datafield:+'DateAchieved',+width:+'15%25',+cellsformat:+'d',+formatter:+"date",+formatoptions:+{+srcformat:+"ISO8601Long",+newformat:+"m/d/Y"+}+},
+++++{+text:+'PL+Final',+datafield:+'DateFinal',+width:+'15%25',+cellsformat:+'d'+},
+++++{+text:+'Warranty?',+datafield:+'Warranty',+width:+'15%25',+columntype:+'checkbox'+}
+++++]|code-block|syntax|javascript|151919|谢谢鲁希|151920|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I am not sure this answered earlier or not but below is solution I implemented which is working one. Just provide column width in percentage and summation of all column should reach to 100%. But I am not sure how to deal with adding/removing columns at runtime. 

I am working on that as well and will update all.

<pre><code> columns: [
 { text: 'CheckBox', datafield: 'ProjectSubstantialPOUADetailsID', width: '10%' },
 { text: 'Area/Phase Substantial', datafield: 'SubstantialPOUA', width: '30%' },

 { text: 'Type', datafield: 'SubstantialTypeName', width: '15%' },
 { text: 'Achieved', datafield: 'DateAchieved', width: '15%', cellsformat: 'd', formatter: "date", formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y" } },
 { text: 'PL Final', datafield: 'DateFinal', width: '15%', cellsformat: 'd' },
 { text: 'Warranty?', datafield: 'Warranty', width: '15%', columntype: 'checkbox' }
 ]
</code></pre>

Thanks
Rushi

blocks|key|4658202|text|pphillips001+answer对我有效，但调整大小会随着网格的增长而变慢。我刚刚更新了逻辑，现在性能非常好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4658203|function+setColumnWidths(gridName)+{
++++if+($('#'+%2B+gridName).attr('columnsSet')=='true')+return;

++++$('body').append('<span+id="widthTest">WIDTHTEST');
++++$('#gbox_'+%2B+gridName+%2B+'+.ui-jqgrid-htable,#'+%2B+gridName).css('width',+'inherit');
++++$('#'+%2B+gridName).parent().css('width',+'inherit');

++++var+containerWidth=$('#'+%2B+gridName).width()+-+20;
++++var+columnNames+=+$("#"+%2B+gridName).jqGrid('getGridParam',+'colModel');
++++var+thisWidth+=+0;

++++//+Loop+through+Cols
++++for+(var+itm+=+0,+itmCount+=+columnNames.length;+itm+<+itmCount;+itm%2B%2B)+{

+++++++var+curObj+=+$('[aria-describedby='+%2B+gridName+%2B+'_'+%2B+columnNames[itm].name+%2B+']');

++++++++var+thisCell+=+$('#'+%2B+gridName+%2B+'_'+%2B+columnNames[itm].name+%2B+'+div');
++++++++$('#widthTest').html(thisCell.text()).css({
+++++++++++'font-family':+thisCell.css('font-family'),
+++++++++++'font-size':+thisCell.css('font-size'),
+++++++++++'font-weight':+thisCell.css('font-weight')
++++++++});
++++++++var+maxWidth+=+$('#widthTest').width()+%2B+40;
++++++++//var+maxWidth+=+0;++++++++++++++++++++++

++++++++//+Loop+through+Rows
++++++++var+maxText+=+0;
++++++++var+theCell;
++++++++for+(var+itm2+=+0,+itm2Count+=+curObj.length;+itm2+<+itm2Count;+itm2%2B%2B)+{
++++++++++++thisCell+=+$(curObj[itm2]);
++++++++++++if+(maxText+<+thisCell.text().length)+{
++++++++++++++++maxText+=+thisCell.text().length;
++++++++++++++++theCell+=+thisCell;
++++++++++++}
++++++++}
++++++++if+(theCell+!==+undefined)+{
++++++++++++$('#widthTest').html(theCell.html()).css({
++++++++++++++++'font-family':+theCell.css('font-family'),
++++++++++++++++'font-size':+theCell.css('font-size'),
++++++++++++++++'font-weight':+theCell.css('font-weight')
++++++++++++});

++++++++++++thisWidth+=+$('#widthTest').width()+%2B+5;
++++++++}
++++++++if+(thisWidth+>+maxWidth)+maxWidth+=+thisWidth;
++++if+(maxWidth+>+containerWidth)+maxWidth=containerWidth;
++++$("#"+%2B+gridName).jqGrid('setColProp','amount',{width:+maxWidth});
++++var+gw+=+$("#"+%2B+gridName).jqGrid('getGridParam','width');
++++$("#"+%2B+gridName).jqGrid('setGridWidth',gw,true);
++++$('#'+%2B+gridName+%2B+'+.jqgfirstrow+td:eq('+%2B+itm+%2B+'),+#'+%2B+gridName+%2B+'_'+%2B+columnNames[itm].name).width(maxWidth).css('min-width',+maxWidth);

}
$('#widthTest').remove();
$('#'+%2B+gridName).attr('columnsSet','true');|code-block|syntax|javascript|4658204|}|4658205|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

pphillips001 answer works for me but resizing is to slow when the grid grows. I just updated the logic and the performance is very good now.

<pre><code>function setColumnWidths(gridName) {
 if ($('#' + gridName).attr('columnsSet')=='true') return;

 $('body').append('&lt;span id="widthTest"&gt;WIDTHTEST&lt;/span&gt;');
 $('#gbox_' + gridName + ' .ui-jqgrid-htable,#' + gridName).css('width', 'inherit');
 $('#' + gridName).parent().css('width', 'inherit');

 var containerWidth=$('#' + gridName).width() - 20;
 var columnNames = $("#" + gridName).jqGrid('getGridParam', 'colModel');
 var thisWidth = 0;

 // Loop through Cols
 for (var itm = 0, itmCount = columnNames.length; itm &lt; itmCount; itm++) {

 var curObj = $('[aria-describedby=' + gridName + '_' + columnNames[itm].name + ']');

 var thisCell = $('#' + gridName + '_' + columnNames[itm].name + ' div');
 $('#widthTest').html(thisCell.text()).css({
 'font-family': thisCell.css('font-family'),
 'font-size': thisCell.css('font-size'),
 'font-weight': thisCell.css('font-weight')
 });
 var maxWidth = $('#widthTest').width() + 40;
 //var maxWidth = 0; 

 // Loop through Rows
 var maxText = 0;
 var theCell;
 for (var itm2 = 0, itm2Count = curObj.length; itm2 &lt; itm2Count; itm2++) {
 thisCell = $(curObj[itm2]);
 if (maxText &lt; thisCell.text().length) {
 maxText = thisCell.text().length;
 theCell = thisCell;
 }
 }
 if (theCell !== undefined) {
 $('#widthTest').html(theCell.html()).css({
 'font-family': theCell.css('font-family'),
 'font-size': theCell.css('font-size'),
 'font-weight': theCell.css('font-weight')
 });

 thisWidth = $('#widthTest').width() + 5;
 }
 if (thisWidth &gt; maxWidth) maxWidth = thisWidth;
 if (maxWidth &gt; containerWidth) maxWidth=containerWidth;
 $("#" + gridName).jqGrid('setColProp','amount',{width: maxWidth});
 var gw = $("#" + gridName).jqGrid('getGridParam','width');
 $("#" + gridName).jqGrid('setGridWidth',gw,true);
 $('#' + gridName + ' .jqgfirstrow td:eq(' + itm + '), #' + gridName + '_' + columnNames[itm].name).width(maxWidth).css('min-width', maxWidth);

}
$('#widthTest').remove();
$('#' + gridName).attr('columnsSet','true');
</code></pre>

}

Is there a way that the column width of jqgrid change dynamically according to the content of that column? I used shrinkToFit and autoWidth but non of them worked for me. I use jqgrid 4.5.2. I have searched and read the other questions but those didn't work for me. Maybe there is a widget to do that. I will be thankful if you help me.

jqgrid column width auto

有没有办法让jqgrid的列宽根据该列的内容动态变化？我使用了shrinkToFit和autoWidth，但它们都不适合我。我使用jqgrid 4.5.2。我已经搜索和阅读了其他问题，但这些问题对我来说都不起作用。也许有一个小部件可以做到这一点。如果你能帮助我，我将不胜感激。

问jqgrid列宽自动
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jqgrid列宽自动EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jqgrid列宽自动
EN