在调整主网格大小时调整SubGrid列的大小 [英] Resize SubGrid Columns on resizing main grid
问题描述
我正在使用下面的示例代码来创建带有subGrids的jqGrid.
I am using below sample code to create jqGrid with subGrids.
就我而言，我删除了SubGrid的标题.因此，它看起来像一个分组.
In my case, I have removed headers of subGrids. So, It looks like a grouping.
在这里，每当我调整主网格列的大小时.我检查了jqGrid文档，发现" resizeStop "返回列ID和新宽度.
Here, Whenever I resize main grid column. I checked jqGrid docs and found "resizeStop" which returns column id and new width.
但是，没有找到类似于setSize的列.
But, didn't find anything like setSize for column.
<!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 Editable</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-subgrid td.subgrid-data {
border-top: 0 none !important;
border-right: 0 none !important;
border-bottom: 0 none !important;
}
</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":"80"},{"width":"80","name":"24394","editable":true},{"width":"80","name":"24390","editable":true},{"width":"80","name":"24387","editable":true},{"width":"80","name":"24386","editable":true},{"width":"80","name":"24385","editable":true},{"width":"80","name":"24383","editable":true},{"width":"80","name":"24369","editable":true},{"width":"80","name":"24306","editable":true}],
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"],
editableRows = [0],
myData = [{"id":"group1","itemName":"Goal Scored","subGridData":[{"id":0,"itemName":"Cristiano Ronaldo","24369":"2","24387":"1","24394":"3","24306":"0","24390":"0","24385":"4","24386":"2","24383":"1"}]},
{"id":"group2","itemName":"Yellow Cards","subGridData":[{"id":0,"itemName":"Cristiano Ronaldo","24369":"0","24387":"1","24394":"2","24306":"0","24390":"0","24385":"2","24386":"0","24383":"0"}]}];
$("#list").jqGrid({
datatype: "local",
data: myData,
colNames: colNamesArray,
colModel: colModelData,
gridview: true,
height: "100%",
width: "100%",
caption: "Create subgrid from local data",
subGrid: true,
subGridOptions: {
reloadOnExpand: false,
selectOnExpand: 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:colModelData,
height: "100%",
autoencode: true,
gridview: true
});
$subgrid.closest("div.ui-jqgrid-view")
.children("div.ui-jqgrid-hdiv").hide();
}, gridComplete: function(){
$("#list").jqGrid("expandSubGridRow","group1");
}
});
});
//]]>
</script>
屏幕:
推荐答案
您的问题很有趣，但答案并不容易.尽管如此，我还是花了一些时间为您提供以下演示，该演示演示了如何您可以实施解决方案.该实现基于对的分析.内部函数dragEnd的源代码，将在mouseup回调内部调用(请参见此处)和列标题上的mousedown(请参见在这里)一起玩.
You question is very interesting, but the answer isn't easy. Nevertheless I invested some time and provide you the following demo which shows how you can implement the solution. The implementation are based on the analyse of the source code of internal function dragEnd which will be called inside of mouseup callback (see here). mousemove callback (see here) and mousedown on the column headers (see here) play all together.
结果该演示调整了列的大小子网格的:
As the result the demo adjust the size of the column of the subgrid:
在演示中，我介绍了调整列大小后重新调整整个网格大小的技巧.最初在答案中进行了描述.我个人在每个生产性网格中都使用它，因为我更喜欢没有滚动条的网格.
I included in the demo the trick with resizing of the whole grid after resizing of the column. It is described originally in the answer. I use personally it in every my productive grid because I prefer to have grids without scroll bars.
下面，我包括了演示的完整代码(全部来自document.ready处理程序):
Below I include full code (all from the document.ready handler) of the demo:
var myData = [
{
id: "10",
c1: "My Value 1.1",
c2: "My Value 1.2",
c3: "My Value 1.3",
c4: "My Value 1.4",
subgridData: [
{ id: "10", c1: "aa", c2: "ab", c3: "ac", c4: "ad" },
{ id: "20", c1: "ba", c2: "bb", c3: "bc", c4: "bd" },
{ id: "30", c1: "ca", c2: "cb", c3: "cc", c4: "cd" }
]
},
{
id: "20",
c1: "My Value 2.1",
c2: "My Value 2.2",
c3: "My Value 2.3",
c4: "My Value 2.4",
subgridData: [
{ id: "10", c1: "da", c2: "db", c3: "dc", c4: "dd" },
{ id: "20", c1: "ea", c2: "eb", c3: "ec", c4: "ed" },
{ id: "30", c1: "fa", c2: "fb", c3: "fc", c4: "fd" }
]
},
{
id: "30",
c1: "My Value 3.1",
c2: "My Value 3.2",
c3: "My Value 3.3",
c4: "My Value 3.4",
subgridData: [
{ id: "10", c1: "ga", c2: "gb", c3: "gc", c4: "gd" },
{ id: "20", c1: "ha", c2: "hb", c3: "hc", c4: "hd" },
{ id: "30", c1: "ia", c2: "ib", c3: "ic", c4: "id" }
]
}
],
mainGridPrefix = "s_";
$("#list").jqGrid({
datatype: "local",
data: myData,
colNames: ["Column 1", "Column 2", "Column 3", "Column 4"],
colModel: [
{ name: "c1", width: 100 },
{ name: "c2", width: 130 },
{ name: "c3", width: 150 },
{ name: "c4", width: 170 }
],
rowNum: 10,
rowList: [5, 10, 20],
pager: "#pager",
gridview: true,
ignoreCase: true,
rownumbers: true,
sortname: "c1",
viewrecords: true,
autoencode: true,
height: "100%",
idPrefix: mainGridPrefix,
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
colModel = $(this).jqGrid("getGridParam", "colModel");
$subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
$subgrid.jqGrid({
datatype: "local",
data: $(this).jqGrid("getLocalRow", pureRowId).subgridData,
colModel: [
{ name: "c1", width: (colModel[2].width - 2) },
{ name: "c2", width: colModel[3].width },
{ name: "c3", width: colModel[4].width },
{ name: "c2", width: (colModel[5].width - 2) }
],
height: "100%",
rowNum: 10000,
autoencode: true,
gridview: true,
idPrefix: rowId + "_"
});
$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 - 2) };
grid.headers[index - 2].newWidth = (index - 2 === 0) || (index - 1 === 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);
}
}).jqGrid("navGrid", "#pager", {add: false, edit: false, del: false});
已更新:答案引入了新的setColWidth方法，该方法基于以上解决方案.一种使用新的setColWidth方法来简化resizeStop的代码.
UPDATED: The answer introduces new setColWidth method based on the code of the above solution. One use new setColWidth method to simplify the code of resizeStop.
这篇关于在调整主网格大小时调整SubGrid列的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
