调整主网格大小时调整子网格列的大小 [英] Resize SubGrid Columns on resizing main grid
本文介绍了调整主网格大小时调整子网格列的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用下面的示例代码来创建带有子网格的 jqGrid.
在我的例子中，我删除了 subGrids 的标题.所以，它看起来像一个分组.
在这里，每当我调整主网格列的大小时.我检查了 jqGrid 文档，发现返回列 ID 和新宽度的resizeStop".
但是，没有找到类似 setSize 的列.
屏幕:
解决方案
你的问题很有趣，但答案并不容易.尽管如此，我还是花了一些时间为您提供 中有所描述.我个人在每个生产网格中都使用它，因为我更喜欢没有滚动条的网格.
下面我包含演示的完整代码(全部来自 document.ready 处理程序):
var myData = [{编号:10"，c1:我的价值 1.1"，c2:我的价值 1.2"，c3:我的价值 1.3"，c4:我的价值 1.4"，子网格数据:[{ 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"}]},{编号:20"，c1:我的价值 2.1"，c2:我的价值 2.2"，c3:我的价值 2.3"，c4:我的价值 2.4"，子网格数据:[{ 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"}]},{编号:30"，c1:我的价值 3.1"，c2:我的价值 3.2"，c3:我的价值 3.3"，c4:我的价值 3.4"，子网格数据:[{ 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({数据类型:本地"，数据:我的数据，colNames: ["Column 1", "Column 2", "Column 3", "Column 4"],col型号:[{名称:c1"，宽度:100}，{ 名称:c2"，宽度:130 }，{ 名称:c3"，宽度:150 }，{ 名称:c4"，宽度:170 }],行数:10，行列表:[5,10,20]，寻呼机:#pager"，网格视图:是的，忽略大小写:真，行号:真，排序名称:c1"，观看记录:真实，自动编码:真，高度:100%"，idPrefix: mainGridPrefix,子网格:真，subGridRowExpanded:函数(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({数据类型:本地"，数据:$(this).jqGrid("getLocalRow", pureRowId).subgridData,col型号:[{ 名称:c1"，宽度:(colModel[2].width - 2) }，{ 名称:c2"，宽度:colModel[3].width }，{ 名称:c3"，宽度:colModel[4].width }，{ 名称:c2"，宽度:(colModel[5].width - 2) }],高度:100%"，行数:10000，自动编码:真，网格视图:是的，idPrefix: rowId + "_"});$subgrid.closest("div.ui-jqgrid-view").children("div.ui-jqgrid-hdiv").隐藏();},resizeStop: 函数 (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(函数 () {var grid = this.grid;//我们有没有内部子网格的子网格//它将列数减少到 1//我们在主网格中有 rownumbers: true，但在子网格中没有//它将列数减少到额外的 1//所以我们应该使用 (index - 2) 作为子网格中的列索引grid.resizing = { idx: (index - 2) };grid.headers[index - 2].newWidth = (index - 2 === 0) ||(索引 - 1 === grid.headers.length)?新宽度 - 2:新宽度；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 的代码.
I am using below sample code to create jqGrid with subGrids.
In my case, I have removed headers of subGrids. So, It looks like a grouping.
Here, Whenever I resize main grid column. I checked jqGrid docs and found "resizeStop" which returns column id and new width.
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>
Screen:
解决方案
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.
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});
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.
这篇关于调整主网格大小时调整子网格列的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
