jqGrid - 调整最后一列
我使用的是jqGRid 4.4.1。
以下是示例代码
<!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>
我在网格下方有几个按钮，例如Next，Previous，Print，Export等。我给jqGrid一个修复高度。所以，我可以得到垂直滚动条。
我正在使用此处提到的解决方案。 ：jqGrid horizontal scrollbar
但是，我无法重新调整最后一栏。
1 个答案:
答案 0 :(得分：3)
我个人觉得你的问题非常有趣，我之前看过之后就投票了。问题是问题的解决方案并不简单。一个人将不得不修改源代码。我目前没有时间进行此类实施。可能Tony会实施这个。您可以将相应的功能请求发布到trirand。
我唯一能推荐你的是the answer中描述的技巧。它与您所需要的不同，但它可以在某些情况下改善用户体验。我个人将它用于我为客户制作的最高效的网格中。
尽管如此，我可以建议你一个解决方法。依赖于您使用的其他设置，您描述的问题可能不像它看起来那么难。如果您使用gridResize，则用户将能够调整网格大小。增加网格的大小后，用户将能够增加最后一列的宽度。如果您使用shrinkToFit: false或使用
$("#gridId").jqGrid("gridResize", { shrinkToFit: false });
然后用户将能够分两步重新调整网格的最后一列：1）调整网格大小2）调整网格的最后一列。
更新：从版本4.9开始，free jqGrid中根本不存在调整最后一列大小的问题（请参阅the readme）。因此升级到当前版本的免费jqGrid（4.10.0或更高版本）可以解决调整网格最后一列的问题。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？