当前位置: 首页 > 工具软件 > DevExtreme > 使用案例 >

初识DevExtreme,保持两个DataGrid的高度一致

胡国兴
2023-12-01

解决方法,分别在两个DataGrid的onContentReady函数中设置高度,其中一个DataGrid代码如下

createGridTop: function (c1, c2) {
        var headerHeight = 0;
        $('#gridTop').dxDataGrid({
            dataSource: storeDash.getTopCategoryData(c1),
            keyExpr: c1 + 'Rank',
            showRowLines: true,
            showBorders: true,
            showColumnLines: true,
            sorting: {
                mode: 'none',
            },
            columns: [
                {
                    caption: 'Top', dataField: c1 + 'Rank',//动态标题
                    alignment: 'center',
                    width: 50,
                    headerCellTemplate(container) {
                        storeDash.setFont(container, 'Top');
                    }
                }, {
                    caption: 'Top Category', dataField: 'Category', alignment: 'center',
                    headerCellTemplate(container) {
                        storeDash.setFont(container, 'Top Category');
                    }
                }, {
                    caption: (c1 == storeDash.gaugeType[1][0] ? storeDash.gaugeType[1][1] : c1), dataField: c1, alignment: 'center', width: 110,
                    headerCellTemplate(container) {
                        storeDash.setFont(container, (c1 == storeDash.gaugeType[1][0] ? storeDash.gaugeType[1][1] : c1));
                    },
                    cellTemplate(container, options) {
                        var isGM = c1 === storeDash.gaugeType[1][0];
                        var formatFunc = isGM ? storeDash.formatPercent : storeDash.formatCurrency;
                        $('<div>' + formatFunc(options.value) + '</div>').appendTo(container);
                    }
                },
                {
                    caption: c2, dataField: c1 + 'Change', alignment: 'center', width: 160,
                    headerCellTemplate(container) {
                        storeDash.setFont(container, c2);
                        headerHeight = $(container).height() + 14.5;
                    },
                    cellTemplate(container, options) {
                        $('<div>' + storeDash.formatPercent(options.value, 'green') + '</div>').appendTo(container);
                    }
                }],
            /*  height: (((storeDash.getTopCategoryData(c1).length > storeDash.getTopCategoryData(c1, true).length ? storeDash.getTopCategoryData(c1).length : storeDash.getTopCategoryData(c1, true).length)) * 33.5) + 40 + headerHeight+ "px"*/

            onContentReady(e) {
                /*$("#gridTop").find("table").eq(1).height((storeDash.getTopCategoryData(c1).length > storeDash.getTopCategoryData(c1, true).length ? storeDash.getTopCategoryData(c1).length : storeDash.getTopCategoryData(c1, true).length) * 33.5);*/
                /*  $("#gridTop").height((((storeDash.getTopCategoryData(c1).length > storeDash.getTopCategoryData(c1, true).length ? storeDash.getTopCategoryData(c1).length : storeDash.getTopCategoryData(c1, true).length)) * 33.5) + 40 + headerHeight);*/
                $('#gridTop').dxDataGrid({ height: ((((storeDash.getTopCategoryData(c1).length > storeDash.getTopCategoryData(c1, true).length ? storeDash.getTopCategoryData(c1).length : storeDash.getTopCategoryData(c1, true).length)) || 1) * 34) + 43.5 + headerHeight })
            },
        });

    },


    setFont: function (container, str) {
        container.append('<span  class="font-weight-bold text-dark text-wrap ">' + str + '</span >');
    },

 类似资料: