rowDetail 显示延迟是什么原因？

登录

如图，嵌套表里面有50行数据，动态生成的，用code展开，整个grid都不自动生成column。
一点击展开时，数据加载一半，延迟了几百毫秒，再显示全部内容，
请问这大概是什么方面的原因引起的？我排查一下。

恕我无法贴源代码，但是自己写的Demo又重现不出来。

2.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20152.84/controls/wijmo.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/5.20152.84/styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.wijmo.com/5.20152.84/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="scripts/wijmo.grid.detail.min.js"></script>
<script src="scripts/wijmo.odata.min.js"></script>
<script type="text/javascript">
var countryData, statesData;
$(document).ready(function () {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var cdata = [];
for (var i = 0; i < 5; i++) {
cdata.push({
cid: i,
country: countries[i % countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 === 0
});
}
var sdata = [];
for (var i = 0; i < 5; i++) {
sdata.push({
sid: i,
state: 'none',
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 === 0
});
}
// get categories and products from server
countryData = new wijmo.collections.CollectionView(cdata);
statesData = new wijmo.collections.CollectionView(sdata);
// initialize detail visibility mode
//var detailMode = wijmo.grid.detail.DetailVisibilityMode.ExpandSingle;
var grid = new wijmo.grid.FlexGrid('#gsFlexGrid');
grid.itemsSource = countryData;
var dp = new wijmo.grid.detail.FlexGridDetailProvider(grid);
dp.createDetailCell = function (row) {
var cell = document.createElement('div');
grid.hostElement.appendChild(cell);
var detailGrid = new wijmo.grid.FlexGrid(cell, {
headersVisibility: wijmo.grid.HeadersVisibility.Column,
autoGenerateColumns: false,
itemsSource: sdata,
columns: [
{ header: 'ID', binding: 'sid' },
{ header: 'State', binding: 'state' },
{ header: 'Date', binding: 'date' },
{ header: 'Amount', binding: 'amount' },
{ header: 'Active', binding: 'active' }
]
});
return cell;
};
var i=0;
grid.formatItem.addHandler(function(grid,event){
console.log(i++);
});
});
</script>
</head>
<body>
<div id="gsFlexGrid"></div>
</body>
</html>

复制代码

上面这段代码渲染的时候为什么wijmo要重新渲染3次？我的第一个问题是不是这个原因引起的?
如图所示：

Alice · Alice

谢谢您的反馈。
对于您的2个问题：
1.仅仅从提供的资料，无法重现问题，所以不知道是什么引起的。
2.您是在formatItem里使用console。对于formatItem，会对所有单元格做刷新，FlexGrid 将回收并重复使用单元格实例。

songjiefa · songjiefa

Alice 发表于 2016-7-15 10:59
谢谢您的反馈。
对于您的2个问题：
1.仅仅从提供的资料，无法重现问题，所以不知道是什么引起的。

谢谢你的回答，我找到原因了。原因在于wijmo生成grid的时候，overflow为auto，但其父标签我设置了为hidden,就会显示滚动条又消失，所以造成卡顿的感觉。

<div wj-part="root" style="position:absolute;width:100%;height:100%;max-height:inherit;overflow:auto;-webkit-overflow-scrolling:touch">

复制代码

但现在想修改wijmo内部的样式，由于不能直接改wijmo内部js，所以添加了这条语句

$('[wj-part="root").css('overflow','hidden');

复制代码

现在暂时没发现什么问题。但还需要继续测试。

这样改符合wijmo的规范不？

Alice · Alice

songjiefa 发表于 2016-7-15 17:19
谢谢你的回答，我找到原因了。原因在于wijmo生成grid的时候，overflow为auto，但其父标签我设置了为hidde ...

谢谢您的反馈。
wijmo5是基于HTML5的，只要是符合HTML5的规则都可以使用

		自动登录	找回密码
密码			立即注册

rowDetail 显示延迟是什么原因？

本帖子中包含更多资源

3 个回复

活字格认证

微信认证勋章

元老葡萄