2
jqGRid 4.4.1을 사용하고 있습니다. 여기 jqGrid - 마지막 열의 크기를 조절하십시오.
샘플 코드내가 그리드 아래 다음, 이전, 인쇄, 내보내기 등과 같은 몇 가지 버튼이
<!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>
여기에 언급 된 솔루션을 사용하고 있습니다. : jqGrid horizontal scrollbar
, 나는 크기를 마지막 열을 다시 할 수 없습니다입니다.