【发布时间】：2012-12-22 08:56:24
【问题描述】：
我正在使用下面的示例代码来创建带有子网格的 jqGrid。
在我的例子中，我删除了 subGrids 的标题。所以，它看起来像一个分组。
在这里，每当我调整主网格列的大小时。我检查了 jqGrid 文档，发现返回列 ID 和新宽度的“resizeStop”。
但是，没有找到类似 setSize 的列。
<!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>
屏幕：
【问题讨论】：