如何提高kendo ui grid在页面的渲染速度

Posted 2023-05-11

参考技术A 最近项目中要求表格的高度能够占满整个页面，并且能够自适应，即随页面的改变而变化；
项目用的是kendo
ui
，
思路，分两部
1，找到占满整个页面的表达式
2，自适应
具体实现代码
方法：
//占满整个页面
var
_resizeGrid
=
function(_grid)

var
dataArea
=
_grid.find(".k-grid-content");
var
bottomArea
=
_grid.find(".k-grid-pager");
var
newHeight
=
$(document.body).height()
-
_grid.offset().top;
var
diff
=
_grid.innerHeight()
-
dataArea.innerHeight();
_grid.height(newHeight-
bottomArea.innerHeight());
dataArea.height(newHeight
-
diff
-
bottomArea.innerHeight());
;
//自适应
$(window).resize(function()
resizeGrid(_grid);
);

如何在Kendo UI Grid中合并单元格

我没有在Kendo UI的官方文档中看到任何内容。只是检查某人是否已完成自定义以合并Kendo UI Grid中的单元格。

我有这样的内容：

Technology       Core Language & Communication                                15
----------------------------------------------------------------------------------
Technology       Mathematics & Application                                    20
----------------------------------------------------------------------------------
Technology       Science Application & Understanding                          30
---------------------------------------------------------------------------------
Communication    Using language to reason, interpret & analyse                40
---------------------------------------------------------------------------------
Communication    Using visualization for design/creating                      40

我需要获得以下输出：

Technology       Core Language & Communication                                15
                 -----------------------------------------------------------------
                 Mathematics & Application                                    20
                 -----------------------------------------------------------------
                 Science Application & Understanding                          30
---------------------------------------------------------------------------------
Communication    Using language to reason, interpret & analyse                40
                 -----------------------------------------------------------------
                 Using visualization for design/creating                      40

不确定如何使用模板完成。

答案

不支持在Kendo UI网格中合并单元格。

所以最后我决定在渲染kendo ui网格后合并单元格，所以我使用javascript合并了kendo ui Grid的DataBound事件中的单元格。

function mergeGridRows(gridId, colTitle) {

$('#' + gridId + '>.k-grid-content>table').each(function (index, item) {

    var dimension_col = 1;
    // First, scan first row of headers for the "Dimensions" column.
    $('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
        if ($(this).text() == colTitle) {

            // first_instance holds the first instance of identical td
            var first_instance = null;

            $(item).find('tr').each(function () {

                // find the td of the correct column (determined by the colTitle)
                var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');

                if (first_instance == null) {
                    first_instance = dimension_td;
                } else if (dimension_td.text() == first_instance.text()) {
                    // if current td is identical to the previous
                    // then remove the current td
                    dimension_td.remove();
                    // increment the rowspan attribute of the first instance
                    first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);
                } else {
                    // this cell is different from the last
                    first_instance = dimension_td;
                }
            });
            return;
        }
        dimension_col++;
    });

});
}

More Details

另一答案

我正在扩展处理所有场景的上述代码。

function MergeGridRows(gridId, colTitle) {

    $('#' + gridId + '>.k-grid-content>table').each(function (index, item) {
        var dimension_col = 1;
        // First, scan first row of headers for the "Dimensions" column.
        $('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {
            var _this = $(this);
            if (_this.text() == colTitle) {
                var bgColor = _this.css('background-color');
                var foreColor = _this.css('color');
                var rightBorderColor = _this.css('border-right-color');

                // first_instance holds the first instance of identical td
                var first_instance = null;
                var cellText = '';
                var arrCells = [];
                $(item).find('tr').each(function () {
                    // find the td of the correct column (determined by the colTitle)
                    var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')');

                    if (first_instance == null) {
                        first_instance = dimension_td;
                        cellText = first_instance.text();
                    } else if (dimension_td.text() == cellText) {
                        // if current td is identical to the previous
                        dimension_td.css('border-top', '0px');
                    } else {
                        // this cell is different from the last
                        arrCells = ChangeMergedCells(arrCells, cellText, true);
                        //first_instance = dimension_td;
                        cellText = dimension_td.text();
                    }
                    arrCells.push(dimension_td);
                    dimension_td.text("");
                    dimension_td.css('background-color', 'white').css('color', 'black').css('border-bottom-color', 'transparent');
                });
                arrCells = ChangeMergedCells(arrCells, cellText, true);
                return;
            }
            dimension_col++;
        });

    });
}
function ChangeMergedCells(arrCells, cellText, addBorderToCell) {
    var cellsCount = arrCells.length;
    if (cellsCount > 1) {
        var index = parseInt(cellsCount / 2);
        var cell = null;
        if (cellsCount % 2 == 0) { // even number
            cell = arrCells[index - 1];
            arrCells[index - 1].css('vertical-align', 'bottom');
        }
        else { // odd number
            cell = arrCells[index];
        }
        cell.text(cellText);
        if (addBorderToCell) {
            arrCells[cellsCount - 1].css('border-bottom', 'solid 1px #ddd');

        }

        arrCells = []; // clear array for next item
    }
    if (cellsCount == 1) {
        cell = arrCells[0];
        cell.text(cellText);
        arrCells[0].css('border-bottom', 'solid 1px #ddd');
        arrCells = [];
    }
    return arrCells;
}