jqGrid - 调整最后一列 [英] jqGrid - resize last column
本文介绍了jqGrid - 调整最后一列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用jqGRid 4.4.1。
以下是示例代码
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> ;
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title> SubGrid Real Data< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge/>
< link rel =stylesheettype =text / csshref =http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/ jquery-ui.css/>
< link rel =stylesheettype =text / csshref =http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/css/ui。 jqgrid.css/>
< style>
.groupColumn {
background-color：＃E3E3D7！important;
border：1px solid＃F4F4e5;
font-weight：bold; ！重要;
}
.lockedColumn {
background-color：＃E3E3D7！important;
border：1px solid＃F4F4e5;
}
.ui-jqgrid .ui-jqgrid-bdiv {
position：relative;
保证金：0em;
填充：0;
/ * overflow：auto; * /
overflow-x：hidden;
overflow-y：auto;
text-align：left;
}
.ui-jqgrid .ui-subgrid td.subgrid-data {
border-top：0 none！important;
border-right：0 none！important;
border-bottom：0 none！important;
}
.ui-jqgrid .ui-subgrid span.ui-icon ui-icon-carat-1-sw {
background-color：#FFFFFF！important;
background-image：none！important;
border：0px 0px 1px 1px;
}
< / style>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js>< / script>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js>< /脚本>
< script type =text / javascriptsrc =http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en的.js>< /脚本>
< script type =text / javascript>
$ .jgrid.no_legacy_api = true;
$ .jgrid.useJSON = true;
< / script>
< script type =text / javascriptsrc =http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js >< /脚本>
< script type =text / javascript>
//<！[CDATA [
/ * global $ * /
/ * jslint browser：true，eqeq：true，plusplus：true * /
$（function（ ）{
use strict;
var colModelData = [{classes：groupColumn，name：itemName，editable：false}，
{width：100，name：24394，editable：false}，
{width：100，name：24390，editable： false}，
{width：100，name：24387，editable：false}，
{width：100，name：24386 ，editable：false}，
{width：100，name：24385，editable：false}，
{width：100， name：24383，editable：false}，
{width：100，name：24369，editable：false}，
{width ：100，name：24306，editable：false}]，
subColModelData = [
{classes：groupColumn，name：itemName， editable：false}，
{width：99，name：24394，editable：false }，
{width：100，name：24390，editable：false}，
{width：100，name：24387 ，editable：false}，
{width：100，name：24386，editable：false}，
{width：100， name：24385，editable：false}，
{width：100，name：24383，editable：false}，
{width ：100，name：24369，editable：false}，
{width：98，name：24306，editable：false}]，
colNamesArray = [Name，12/21/2012，12/10/2012，12/03/2012，11/27/2012，11/15/2012， 11/12/2012，11/09/2012，10/15/2012]，
myData = [{id：group1，itemName：其他，
subGridData：[
{id：0，itemName：NNNNNN，24369：，24387：，24394：，24306 ：，24390：，24385：，24386：，24383：}，
{id：1，itemName： EEEEEEE 24369： ， 24387： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： 24 383：}}，
{id：2，itemName：7777777，24369：，24387：，24394：，24306 ：6.3，24390：，24385：，24386：，24383：}，
{id：3，itemName： KKKKKK， 24369： ， 24387： ， 24394： ， 24306： 68， 24390： ， 24385： ， 24386： ，24383：}，
{id：4，itemName：JJJJJ，24369：，24387：，24394： ，24306：160，24390：，24385：，24386：，24383：}，
{id：5， ITEMNAME ： TTTTT， 24369： ， 24387： ， 24394： ， 24306： 77， 24390： ， 24385： ， 24386： ， 24383： }，{ ID：6， ITEMNAME： LLLLLL， 24369： ， 24387： ， 24394： ， 24306： 88， 24390： ， 24385： ， 24386： ， 24383： }，{ ID：7， ITEMNAME： RRRRR 24369： ， 24387： ， 24394： ， 24306： 2：！， 24390： ， 24385： ， 24386 ： 24383： }，{ ID：8中， ITEMNAME： AAAAAA， 24369： ， 24387： ， 24394： ， 24306 ：， 24390： ， 24385： ， 24386： ， 24383： }，{ ID：9 ITEMNAME： CCCCC， 24369： ， 24387： ， 24394： ， 24306： ， 24390： ，2438 5 ：， 24386： ， 24383： }，{ ID：10 ITEMNAME： HHHHH， 24369： ， 24387： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： ， 24383： }，{ ID：11， ITEMNAME： ○○○○， 24369： ， 24387： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： ， 24383： }，{ ID：12， ITEMNAME： PPPP， 24369： ， 24387： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： ， 24383： }，{ ID：13， ITEMNAME：DDDDD ， 24369： ， 24387： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： ， 24383： }，{ ID：14， ITEMNAME： GGGG， 24369： ， 24387： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： ， 24383： }，{ ID：15， ITEMNAME： UBBBBB， 24369： ， 24387： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： ， 24383： }，{ ID ：16， ITEMNAME ： UUUUU， 24369： ， 24387： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： ， 24383： }，{ ID：17， ITEMNAME： NNNN， 24369： ， 24387 ： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： ， 24383： }，{ID ：18， ITEMNAME ： CCCC， 24369： ， 24387： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： ， 24383： }， { ID：19， ITEMNAME： SSSSS， 24369： ， 24387： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： ， 24383： }，{ ID：20， ITEMNAME： FFFF， 24369： ， 24387： ， 24394： ， 24306： ， 24390： ， 24385： ， 24386： ， 24383： }，{ ID：21 ，itemName：，24369：，24387：，24394：，24306：，24390：，24385：， 24386： ， 24383： }，{ ID：22， ITEMNAME： ZZZZZZ， 24369： ， 24387： ， 24394： ，24306：，24390：，24385：，24386：，24383：}，
{id：23，itemName ：NLNLNLNL，24369：XXXX，24387：，24394：，24306：我想看到这个数据，24390：，24385 ：， 24386： ， 24383： }]}];
$（＃list）。jqGrid（{
datatype：local，
data：myData，
colNames：colNamesArray，
colModel：colModelData，
gridview：true，
autoWidth：true，
//高度：100％，
身高：350px，
宽度：100％，
标题：从本地数据创建子网格，
subGrid：true，
subGridOptions：{
reloadOnExpand：false
}，
subGridRowExpanded：function（subgridDivId ，parentRowId）{
var $ subgrid = $（< table id ='+ subgridDivId +_ t'>< / table>）;
$ subgrid.appendTo（＃ + $ .jgrid.jqID（subgridDivId））;
var data = $（this）.jqGrid（getLocalRow，parentRowId）;
$ subgrid.jqGrid（{
datatype：local ，
数据：$（this）.jqGrid（getLocalRow，parentRowId）.subGridData，
colModel：subColModelData，
autoWidth：true，
width：100％，
height ：100％，
autoencode：true，
gridview：true，
rowNum：200
}）;
$ subgrid.closest（div.ui-jqgrid-view）
.children（div.ui-jqgrid-hdiv）。hide（）;
}，
resizeStop：function（newWidth，index）{
// grid.dragEnd（）
var widthChange = this.newWidth - this.width，
$ theGrid = $（this.bDiv）.find（> div> .ui-jqgrid-btable），
$ subgrids = $ theGrid.find（> tbody> .ui-subgrid> .subgrid-数据> .tablediv>的.ui-的jqGrid>的.ui-的jqGrid-视图>的.ui-的jqGrid-BDIV> DIV>的.ui-的jqGrid-BTABLE）;
$ subgrids.each（function（）{
var grid = this.grid;
//我们有没有内部子网格的子网格
//它减少了列数到1
//我们有rownumbers：在主网格中为true，但在subgrids中没有
//它将列数减少到额外的1
//所以我们应该使用（index - 2）作为subgrids中的列索引
grid.resizing = {idx：（index - 1）};
grid.headers [index - 1] .newWidth =（index - 1 === 0 ）||（index === grid.headers.length）？newWidth - 2：newWidth;
grid.newWidth = grid.width + widthChange;
grid.dragEnd.call（grid）;
$（this）.jqGrid（setGridWidth，grid.newWidth，false）;
}）;
$ theGrid.jqGrid（setGridWidth，this.newWidth，false）;
}
}）;
//$(\"#list\").jqGrid(\"toggleSubGridRow，'m1'）;
//$(\"#list\").jqGrid(\"toggleSubGridRow，'m3'）;
}）;
//]]>
< / script>
;
我有几个按钮，如下一个，上一个，打印，导出我在网格下面给了jqGrid一个固定高度。所以，我可以得到垂直滚动条。
我正在使用这里提到的解决方案。 ：。
我唯一能推荐你的是答案中描述的技巧。它与您所需要的不同，但它可以在某些情况下改善用户体验。我个人在我为客户制作的最高效的网格中使用它。
尽管我可以建议你一个解决方法。依赖于您使用的其他设置，您描述的问题可能不像它看起来那么难。如果您使用 gridResize ，用户将能够调整网格大小。增加网格的大小后，用户将能够增加最后一列的宽度。如果您使用 shrinkToFit：false 或使用
$（＃gridId ）。jqGrid（gridResize，{shrinkToFit：false}）;
然后用户将能够分两步调整网格的最后一列：1）调整大小网格2）调整网格的最后一列。
UPDATE：最后一列调整大小的问题根本不存在在版本4.9开始的免费jqGrid 中（参见自述文件）。因此，升级到当前版本的免费jqGrid（4.10.0或更高版本）可以解决调整网格最后一列的问题。
I am using jqGRid 4.4.1.
Here is the sample code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SubGrid Real Data</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2/css/ui.jqgrid.css" />
<style>
.groupColumn {
background-color: #E3E3D7 !important;
border: 1px solid #F4F4e5;
font-weight: bold; !important;
}
.lockedColumn {
background-color: #E3E3D7 !important;
border: 1px solid #F4F4e5;
}
.ui-jqgrid .ui-jqgrid-bdiv {
position: relative;
margin: 0em;
padding:0;
/*overflow: auto;*/
overflow-x:hidden;
overflow-y:auto;
text-align:left;
}
.ui-jqgrid .ui-subgrid td.subgrid-data {
border-top: 0 none !important;
border-right: 0 none !important;
border-bottom: 0 none !important;
}
.ui-jqgrid .ui-subgrid span.ui-icon ui-icon-carat-1-sw {
background-color: #FFFFFF !important;
background-image: none !important;
border: 0px 0px 1px 1px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint browser: true, eqeq: true, plusplus: true */
$(function () {
"use strict";
var colModelData =[{"classes":"groupColumn","name":"itemName","editable":false},
{"width":"100","name":"24394","editable":false},
{"width":"100","name":"24390","editable":false},
{"width":"100","name":"24387","editable":false},
{"width":"100","name":"24386","editable":false},
{"width":"100","name":"24385","editable":false},
{"width":"100","name":"24383","editable":false},
{"width":"100","name":"24369","editable":false},
{"width":"100","name":"24306","editable":false}],
subColModelData =[
{"classes":"groupColumn","name":"itemName","editable":false},
{"width":"99","name":"24394","editable":false},
{"width":"100","name":"24390","editable":false},
{"width":"100","name":"24387","editable":false},
{"width":"100","name":"24386","editable":false},
{"width":"100","name":"24385","editable":false},
{"width":"100","name":"24383","editable":false},
{"width":"100","name":"24369","editable":false},
{"width":"98","name":"24306","editable":false}],
colNamesArray = ["Name","12/21/2012","12/10/2012","12/03/2012","11/27/2012","11/15/2012","11/12/2012","11/09/2012","10/15/2012"],
myData = [{"id":"group1","itemName":"Miscellaneous",
"subGridData":[
{"id":0,"itemName":"NNNNNN","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},
{"id":1,"itemName":"EEEEEEE","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},
{"id":2,"itemName":"7777777","24369":"","24387":"","24394":"","24306":"6.3","24390":"","24385":"","24386":"","24383":""},
{"id":3,"itemName":"KKKKKK","24369":"","24387":"","24394":"","24306":"68","24390":"","24385":"","24386":"","24383":""},
{"id":4,"itemName":"JJJJJ","24369":"","24387":"","24394":"","24306":"160","24390":"","24385":"","24386":"","24383":""},
{"id":5,"itemName":"TTTTT","24369":"","24387":"","24394":"","24306":"77","24390":"","24385":"","24386":"","24383":""},{"id":6,"itemName":"LLLLLL","24369":"","24387":"","24394":"","24306":"88","24390":"","24385":"","24386":"","24383":""},{"id":7,"itemName":"RRRRR","24369":"","24387":"","24394":"","24306":"2:!","24390":"","24385":"","24386":"","24383":""},{"id":8,"itemName":"AAAAAA","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":9,"itemName":"CCCCC","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":10,"itemName":"HHHHH","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":11,"itemName":"OOOO","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":12,"itemName":"PPPP","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":13,"itemName":"DDDDD","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":14,"itemName":"GGGG","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":15,"itemName":"UBBBBB","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":16,"itemName":"UUUUU","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":17,"itemName":"NNNN","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":18,"itemName":"CCCC","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":19,"itemName":"SSSSS","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":20,"itemName":"FFFF","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":21,"itemName":" ","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},{"id":22,"itemName":"zzzzzz","24369":"","24387":"","24394":"","24306":"","24390":"","24385":"","24386":"","24383":""},
{"id":23,"itemName":"NLNLNLNL","24369":"XXXX","24387":"","24394":"","24306":"I want to see this data","24390":"","24385":"","24386":"","24383":""}]}];
$("#list").jqGrid({
datatype: "local",
data: myData,
colNames: colNamesArray,
colModel: colModelData,
gridview: true,
autoWidth:true,
//height: "100%",
height:"350px",
width: "100%",
caption: "Create subgrid from local data",
subGrid: true,
subGridOptions: {
reloadOnExpand: false
},
subGridRowExpanded: function (subgridDivId, parentRowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>");
$subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
var data = $(this).jqGrid("getLocalRow", parentRowId);
$subgrid.jqGrid({
datatype: "local",
data: $(this).jqGrid("getLocalRow", parentRowId).subGridData,
colModel:subColModelData,
autoWidth:true,
width: "100%",
height: "100%",
autoencode: true,
gridview: true,
rowNum: 200
});
$subgrid.closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-hdiv").hide();
},
resizeStop: function (newWidth, index) {
// grid.dragEnd()
var widthChange = this.newWidth - this.width,
$theGrid = $(this.bDiv).find(">div>.ui-jqgrid-btable"),
$subgrids = $theGrid.find(">tbody>.ui-subgrid>.subgrid-data>.tablediv>.ui-jqgrid>.ui-jqgrid-view>.ui-jqgrid-bdiv>div>.ui-jqgrid-btable");
$subgrids.each(function () {
var grid = this.grid;
// we have subgrids which have no internal subgrids
// it reduce the number of columns to 1
// we have rownumbers: true in the main grid, but not in subgrids
// it reduce the number of columns to additional 1
// so we should use (index - 2) as the column index in the subgrids
grid.resizing = { idx: (index - 1) };
grid.headers[index - 1].newWidth = (index - 1 === 0) || (index === grid.headers.length) ? newWidth - 2 : newWidth;
grid.newWidth = grid.width + widthChange;
grid.dragEnd.call(grid);
$(this).jqGrid("setGridWidth", grid.newWidth, false);
});
$theGrid.jqGrid("setGridWidth", this.newWidth, false);
}
});
//$("#list").jqGrid("toggleSubGridRow", 'm1');
//$("#list").jqGrid("toggleSubGridRow", 'm3');
});
//]]>
</script>
I have few buttons like Next, Previous, Print, Export etc. below the grid.I have given a fix height to jqGrid. So, I can get vertical scroll bar.
I am using solution mentioned here. : jqGrid horizontal scrollbar
But, I am not able to re size last column.
解决方案
I personally find your question very interesting and I voted it up after I seen it before. The problem is that the solution of the problem isn't simple. One will have to modify the source code. I have no time currently for such implementation. Probably Tony will implement this. You can post the corresponding feature request to trirand.
The only thing which I can recommend you is the trick described in the answer. It's not the same what you need, but it can improve users experience in some scenarios. I personally use it in the most productive grids which I made for my customers.
Nevertheless I can suggest you one workaround. Depend on other settings which you use the problem which you describe can be not so hard like it looks like. If you would use gridResize the user will be able to resize the grid. After increasing the size of the grid the user will be able to increase the width of the last column. If you use shrinkToFit: false or use
$("#gridId").jqGrid("gridResize", { shrinkToFit: false });
then the user will be able to resize the last column of the grid in two steps: 1) resize the grid 2) resize the last column of the grid.
UPDATE: The problem with resizing of the last column don't exist at all in free jqGrid starting with the version 4.9 (see the readme). Thus upgrading to the current version of free jqGrid (4.10.0 or higher) could resolve the problem with resizing of the last column of the grid.
这篇关于jqGrid - 调整最后一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
