首頁>Program>source

我正在使用下面的示例代碼来建立帶有subGrids的jqGrid.

就我而言,我删除了SubGrid的標题.因此,它看起来像一个分組。

在這裏,每当我調整主網格列的大小時.我檢查了jqGrid文件,發現" resizeStop ",它將返迴列ID和新宽度。

但是,没有找到類似於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>

螢幕:

最新回復
  • 6月前
    1 #

    您的問题很有趣,但答案並不容易.尽管如此,我還是花了一些時間為您提供以下演示,演示了如何實施该解決方案.该實現基於對內部函式 dragEnd的源代碼的分析 將在 mouseup內部被呼叫 回撥(請參见此處). mousemove 回撥(請參见此處)和 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});
    

    UPDATED :答案介绍了新的 setColWidth 基於上述解決方案代碼的方法.一種使用新的 setColWidth 簡化 resizeStop代碼的方法

  • iphone:如何排序包含NSDictionaries的NSArray?
  • c#:MS Dynamics CRM Online 2011-身份驗證問题