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

葩熊

已于 2022-08-19 10:43:51 修改

阅读量280

点赞数

分类专栏： DevExtreme 文章标签： javascript

于 2022-08-19 10:42:52 首次发布

本文链接：https://blog.csdn.net/sinat_36500530/article/details/126420120

版权

DevExtreme 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

解决方法，分别在两个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 >');
},