调整主网格的大小调整SubGrid列
我正在使用下面的示例代码来创build带有子网格的jqGrid。
在我的情况下，我已经删除了子网格的标题。 所以，它看起来像一个分组。
在这里，每当我调整主栅格列。 我检查了jqGrid文档，发现“ resizeStop ”，它返回列ID和新的宽度。
但是，没有find像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> 屏幕：
你的问题很有意思，但答案并不容易。 不过，我花了一些时间为您提供以下演示 ，展示如何实施解决scheme。 这个实现基于内部函数dragEnd 的源代码的分析，它将在mouseupcallback中被调用（见这里 ）。 mousedowncallback（见这里 ）和mousedown列标题（见这里 ）一起玩。
作为结果，演示调整子网格的列的大小：
我在演示中包含了在调整列大小后重新调整整个网格的技巧。 这是在答案中最初描述的 。 我个人使用它在我的每个生产力网格中，因为我更喜欢没有滚动条的网格。
下面我包括演示的完整代码（全部来自document.ready处理程序）：
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方法基于上述解决scheme的代码。 一个使用新的setColWidth方法来简化resizeStop的代码。
