JqG​​rid冷冻柱

时间:2013-06-05 09:26:27

标签: jqgrid

我一直在尝试在我的jqgrid中添加冻结列,但我发现我的数据的最后一行存在错误。

.
.
.
    {name:'Code',index:'txt_site_code', hidden:false, align:'center', width:70, frozen:true }

.
.
}); /* end of jqgrid */

    jQuery("#production").jqGrid('setFrozenColumns');

为什么最后一行不会冻结。它将与水平卷轴一起移动。 我在trirand.com和trirand.net DEMO的FROZEN COLUMN话题中看到了相同的'bug'。关于如何解决这个问题的任何想法..?

感谢..

4 个答案:

答案 0 :(得分:1)

当表的高度不等于嵌套它的Div的高度时,会发生这种情况。 您可以使用jQuery重新分配被冻结的表的高度。

注意:在GridComplete函数上使用它。

$(".frozen-bdiv").height(j$(".frozen-bdiv").find("table").height());

答案 1 :(得分:0)

jqGrid4.8.2中尚未解决列高问题。使用来自' How to make Jqgrid frozen column word-wrap'的Oleg'作品。请参阅我的代码示例。

答案 2 :(得分:0)

可以添加一个onchange方法。 这对我有用:

  1. 添加新的高度调整方法:
function rowsHeightAdjust(){
    editableRows = $("#jqGrid").find("tr");
    frozenRows = $("#jqGrid_frozen").find("tr");

    for (indexRow=0; indexRow<frozenRows.length;indexRow++){
        if(indexRow > 0 && typeof(editableRows[indexRow]) != 'undefined') {
            $(frozenRows[indexRow]).height($(editableRows[indexRow]).height());
        }
    }
}
  1. 在某些事件上调用方法,例如:
//every time we change something on editable fields
$(".editable").change(function(){ rowsHeightAdjust() });

Jqgrid创建一个新的冻结表,该表与可编辑的表重叠。 此方法采用冻结的行,并使每个高度与可编辑的行匹配。 希望对您有所帮助。

答案 3 :(得分:-1)

            <!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>test page</title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />

                <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
                <link rel="stylesheet" type="text/css" media="screen" href="/testGrid/Guriddo_jqGrid_JS_4_8_2/css/jquery-ui.css" />
                <!-- The link to the CSS that the grid needs -->
                <link rel="stylesheet" type="text/css" media="screen" href="/testGrid/Guriddo_jqGrid_JS_4_8_2/css/trirand/ui.jqgrid.css" />
            <style type="text/css">
                .ui-jqgrid .ui-jqgrid-bdiv { overflow-y: scroll;}

                    th.ui-th-column div {
                        /* see http://stackoverflow.com/a/7256972/315935 for details */
                        word-wrap: break-word;      /* IE 5.5+ and CSS3 */
                        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
                        white-space: -pre-wrap;     /* Opera 4-6 */
                        white-space: -o-pre-wrap;   /* Opera 7 */
                        white-space: pre-wrap;      /* CSS3 */
                        overflow: hidden;
                        height: auto !important;
                        vertical-align: middle;
                    }
                    .ui-jqgrid tr.jqgrow td {
                        white-space: normal !important;
                        height: auto;
                        vertical-align: middle;
                        padding-top: 2px;
                        padding-bottom: 2px;
                    }
                    .ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
                        padding-top: 2px;
                        padding-bottom: 2px;
                    }
                    .ui-jqgrid .frozen-bdiv, .ui-jqgrid .frozen-div {
                        overflow: hidden;
                    }
            </style>    

            </head>
            <body>
                <table id="list"><tr><td /></tr></table>


                <script type="text/ecmascript" src="/testGrid/Guriddo_jqGrid_JS_4_8_2/js/jquery.min.js"></script>
                <script type="text/ecmascript" src="/testGrid/Guriddo_jqGrid_JS_4_8_2/js/jquery-ui.min.js"></script>
                <script type="text/ecmascript" src="/testGrid/Guriddo_jqGrid_JS_4_8_2/js/trirand/i18n/grid.locale-en.js"></script>
                <script type="text/ecmascript">
                    $.jgrid.no_legacy_api = true;
                    $.jgrid.useJSON = true;
                </script>
                <!--script type="text/javascript" src="/testGrid/jqGrid-master/jqGrid-master/js/jquery.jqGrid.js"></script-->
                <script type="text/javascript" src="/testGrid/Guriddo_jqGrid_JS_4_8_2/js/trirand/jquery.jqGrid.min.js"></script>
                <script type="text/javascript">
                //<![CDATA[
                    /*global $ */
                    /*jslint unparam: true */
                    $(function () {



                        $(document).ready(function () {

                            $grid = $("#list"),
                            resizeColumnHeader = function () {
                                var rowHight, resizeSpanHeight,
                                    // get the header row which contains
                                    headerRow = $(this).closest("div.ui-jqgrid-view")
                                        .find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");

                                // reset column height
                                headerRow.find("span.ui-jqgrid-resize").each(function () {
                                    this.style.height = '';
                                });

                                // increase the height of the resizing span
                                resizeSpanHeight = 'height: ' + headerRow.height() + 'px !important; cursor: col-resize;';
                                headerRow.find("span.ui-jqgrid-resize").each(function () {
                                    this.style.cssText = resizeSpanHeight;
                                });

                                // set position of the dive with the column header text to the middle
                                rowHight = headerRow.height();
                                headerRow.find("div.ui-jqgrid-sortable").each(function () {
                                    var $div = $(this);
                                    $div.css('top', (rowHight - $div.outerHeight()) / 2 + 'px');
                                });
                            },
                            fixPositionsOfFrozenDivs = function () {
                                var $rows;
                                if (this.grid.fbDiv !== undefined) {
                                    $rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
                                    $('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
                                        var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                                        if ($(this).hasClass("jqgrow")) {
                                            $(this).height(rowHight);
                                            rowHightFrozen = $(this).height();
                                            if (rowHight !== rowHightFrozen) {
                                                $(this).height(rowHight + (rowHight - rowHightFrozen));
                                            }
                                        }
                                    });
                                    $(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
                                    $(this.grid.fbDiv).css($(this.grid.bDiv).position());
                                }
                                if (this.grid.fhDiv !== undefined) {
                                    $rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
                                    $('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
                                        var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
                                        $(this).height(rowHight);
                                        rowHightFrozen = $(this).height();
                                        if (rowHight !== rowHightFrozen) {
                                            $(this).height(rowHight + (rowHight - rowHightFrozen));
                                        }
                                    });
                                    $(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
                                    $(this.grid.fhDiv).css($(this.grid.hDiv).position());
                                }
                            },
                            fixGboxHeight = function () {
                                var gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight(),
                                    pagerHeight = $(this.p.pager).outerHeight();

                                $("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
                                gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight();
                                pagerHeight = $(this.p.pager).outerHeight();
                                $("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
                            };


                            // Define the grid
                            $("#list").jqGrid({
                                datatype: 'local',
                                //data: mydata,
                                colNames: ['Country', 'State', 'City', 'Attraction', 'longText', 'Zip code'],
                                colModel: [
                                    { name: 'country', width: 170, align: 'center', frozen: true, cellattr: arrtSetting, title:false},
                                    { name: 'state', width: 180, align: 'center', frozen: true},
                                    { name: 'city', width: 190 },
                                    { name: 'attraction', width: 120 },
                                    { name: 'longText', width: 80000 },
                                    { name: 'zip', index: 'tax', width: 160, align: 'right' }
                                ],
                                cmTemplate: {sortable: false},
                                rowNum: 100,
                                //rowList: [5, 10, 20],
                                //pager: '#pager',
                                gridview: true,
                                hoverrows: false,
                                autoencode: true,
                                ignoreCase: true,
                                viewrecords: true,
                                loadComplete: updateSize,
                                resizeStop: updateSize,
                                //height: '100%', width: null, shrinkToFit: false,
                                height: '80', width: null, shrinkToFit: false,                    
                                caption: 'Grid with rowSpan attributes',
                                beforeSelectRow: function () {
                                    return false;
                                }
                            });
                             $grid = $("#list")
                            jQuery("#list").jqGrid('setFrozenColumns');
                             $grid.jqGrid('gridResize', {
                            minWidth: 450,
                            stop: function () {
                                fixPositionsOfFrozenDivs.call(this);
                                fixGboxHeight.call(this);
                            },
                            loadComplete: function () {
                                fixPositionsOfFrozenDivs.call(this);
                            }
                        });
                        $grid.bind("jqGridResizeStop", function () {
                            resizeColumnHeader.call(this);
                            fixPositionsOfFrozenDivs.call(this);
                            fixGboxHeight.call(this);
                        });
            //            resizeColumnHeader.call($grid[0]);
            //            //$grid.jqGrid('setFrozenColumns');
            //            $grid.triggerHandler("jqGridAfterGridComplete");
            //            fixPositionsOfFrozenDivs.call($grid[0]);



                            // Data to be sent from various sources and aggregated...
                            var someLongText = "1111111111111111111111111111111111111111111111098888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww55555555555555555555555555555555555555555555555jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjsdfaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj4324333333333333333333333333333333333333333333333333333333333333333333333333333333555555555555555555555555555555555555555555555gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllpppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd";
                            var mydata = [
                                { country: "USA", state: "Texas",      city: "Houston",       attraction: "NASA",    longText: someLongText,           zip: "77058" , attr: {country: {rowspan: "9"}} },
                                { country: "USA", state: "Texas",      city: "Austin",        attraction: "6th street",         zip: "78704", attr:  {country: {display: "none"}} },
                                { country: "USA", state: "Texas",      city: "Arlinton",      attraction: "Cowboys Stadium",    zip: "76011" , attr: {country: {display: "none"}} },
                                { country: "USA", state: "Texas",      city: "Plano",         attraction: "XYZ place",          zip: "54643" , attr: {country: {display: "none"}} },
                                { country: "USA", state: "Texas",      city: "Dallas",        attraction: "Reunion tower",      zip: "12323" , attr: {country: {display: "none"}} },
                                { country: "USA", state: "California", city: "Los Angeles",   attraction: "Hollywood",          zip: "65456", attr: {country: {display: "none"}} },
                                { country: "USA", state: "California", city: "San Francisco", attraction: "Golden Gate bridge", zip: "94129" , attr: {country: {display: "none"}} },
                                { country: "USA", state: "California", city: "San Diego",     attraction: "See world",          zip: "56653" , attr: {country: {display: "none"}} },
                                { country: "USA", state: "California", city: "Anaheim",       attraction: "Disneyworld",        zip: "92802" , attr: {country: {display: "none"}} }
                            ];

                            // Populate grid
                            for (var i = 0; i < mydata.length; i++) {
                                 $("#list").jqGrid('addRowData', "myId_" + i, mydata[i], "last");
                            }

                            resizeColumnHeader.call($grid[0]);
                            //$grid.jqGrid('setFrozenColumns');     Already did this.
                            $grid.triggerHandler("jqGridAfterGridComplete");
                            fixPositionsOfFrozenDivs.call($grid[0]);


                        });



                        arrtSetting = function (rowId, val, rawObject, cm) {                
                            var attr = rawObject.attr[cm.name];
                            var result;
                                if (attr.rowspan) {
                                    result = ' rowspan=' + '"' + 9 + '"';
                                }

                                if (attr.display) {
                                    result = ' style="display:' + attr.display + '"';
                                } 
                                result = result + ' title=" this is the tooltip for '  + rowId + '"';                            
                                return result;
                        };

                        function updateSize(){

                            //getting all lines in two tables by they id
                            var lines = $("tr", this),
                                flines = $("tr", "#"+$(this).attr("id")+"_frozen" );

                            //setting in all frozen lines height equel to grid
                            flines.each(function(i, item){

                                //i%2 check because of border collapse
                                $(item).height( $(lines[i]).innerHeight() - (i%2?1:0) );
                            });
                        };

                    });
                //]]>
                </script>


            </body>
            </html>