劍道網格高尺寸問題

Question

我有這個劍道網格高度調整問題。 當我更改分頁或調整 window 的大小時，它似乎工作不一致。 有時網格不調整並在最后一條記錄之后和分頁之前留下額外的空間網格行有一個像這樣的劍道模板：

<script id="template" type="text/x-kendo-template">
    # var ClinicType = ItemType; #
    <tr data-uid="#= uid #">
        <td colspan="9">
            <div class="pull-left" style="max-width:600px;">
                <p><img src="#= clinicLookup(ItemType, 'toMarker')  #" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#= clinicLookup(ItemType,"toName") #</p>
                <h4><strong>#= Title #</strong></h4>
                <p>
                    <span>#: Address.Street #</span><br />
                    <span>#: Address.Zip #</span>&nbsp;<span>#: Address.City #</span>
                </p>
                <a href="@(Model.ContactPageUrl)?clinicId=#: Id# " class="btn btn-grey btn-details">@Html.Raw(Html.Resource("Mvc.ClinicFinder.ContactDetailsCF", "CustomResources"))</a>
            </div>

            <div class="pull-right pull-top systemsList">
                # var clinicSystems = productsystems; #
                <span>#= renderSystems(clinicSystems) #</span>
            </div>

        </td>
    </tr>
</script>

要求是從網格中刪除滾動條並每頁最多顯示 20 條記錄。 由於模板，行可以具有不同的高度。 我調整了 function 的大小，如下所示：

function resizeGrid() {

    var recordsHeight = 0;
    $(".k-grid-content table tr").each(function () {
        recordsHeight += parseInt($(this).outerHeight() + 18);        
    });
    var tableHeight = recordsHeight;

    // no results on filter
    if (tableHeight < 100) {
        tableHeight = 187;
    }    

    $('.k-grid-content').css('height', tableHeight + 'px');   

}

我這樣稱呼調整大小：

$(window).on('resize', function () {   
    console.log("Window on Resizing");    
    $("#clinicsList").data('kendoGrid').refresh();    
    resizeGrid();

});


grid = $("#clinicsList").data("kendoGrid");
grid.bind("page", function (e) {
    resizeGrid();
});

Answer 1

我對定位元素的方式進行了一些更改，並且效果很好。 這是 function 的更改。 感謝@Asfan Shaikh 的幫助

function resizeGrid() {

    var recordsHeight = 0;
    $(".k-grid tr").each(function (i,e) {
        console.log("Peido:", i, parseInt($(this).outerHeight()));
        recordsHeight += parseInt($(this).outerHeight() + 18);

    });
    var tableHeight = recordsHeight;

    // no results on filter
    if (tableHeight < 100) {
        tableHeight = 187;
    } 

    $('.k-grid tbody').css('height', tableHeight + 'px');   

}