wijmo grid 和detail grid 显示多了数据会很卡

登录

创建一个嵌套表，表大概有200行，在一页显示，每一行的嵌套表也有200行左右，有itemformatter等事件。纯前端运行都会很卡，有什么性能优化建议？
Chrome 都已经这样了，IE更卡。

代码如下，写的很乱，有一些样式没加载进来，看不下去的话，可以自己重新写一个，就一个嵌套表有onclick、 itemFormatter 、formatItem.addHandler、tooltip(在itemFormatter里，用mouseover mouseout事件)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
/*
// © 2016 Dell Inc.
// ALL RIGHTS RESERVED.
*/
.wj-flexgrid {
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
.wj-content {
border: none;
border-radius: 0;
}
.wj-flexgrid div.grid-actionCell {
cursor: pointer;
padding: 0.5rem;
text-align: center;
}
/* selected */
.wj-flexgrid div.wj-state-multi-selected {
color:#000000;
background-color:#b6bdca;
}
.wj-flexgrid div.wj-state-selected {
color:#000000;
background-color:#b6bdca;
}
/* highlight rows on hover */
.wj-flexgrid .wj-cell {
border: none;
font-size: 11px;
padding: 0.5rem;
background-color: #ffffff;
}
.wj-flexgrid .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) {
background-color: #f2f2f2;
}
.wj-flexgrid .wj-cell.wj-header {
color: #515967;
font-size: 12px;
cursor: pointer;
}
.wj-flexgrid .wj-cell.wj-header:hover {
color: #0078b6;
}
.wj-flexgrid .wj-cell.wj-highlight-row {
background-color: #80adbf !important;
color: #ffffff;
}
/* NESTED TABLE */
.wj-detail {
padding: 0px !important; /* remove the cell padding */
}
.wj-detail>.wj-flexgrid {
padding: 0.5rem 0rem 1rem 3rem;
}
/* Tooltip */
.wj-tooltip {
word-wrap:break-word;
}
/*customization page*/
.wj-cell .grid-actionDrag {
background: url('../img/dragdots.png') no-repeat center;
}
.wj-cell .text-tertiary{
opacity: 0.6;
cursor:text
}
.wj-cell .grid-actionCell_disabled{
cursor:auto;
opacity: .6;
}
</style>
<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 src="http://underscorejs.org/underscore.js"></script>
<script type="text/javascript">
var countryData, statesData,grid;
$(document).ready(function () {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var cdata = [];
for (var i = 0; i < 20; 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 = getRows();
var nestedData = [];
for(var i=0;i<sdata.length;i++){
if(sdata[i].qoeData)
nestedData.push(sdata[i].qoeData);
}
function getRows() {
var result = [], users = [
'Jean-Pierre Beale',
'Beaufort Paolo',
'Clayborne Royce',
'Coleman Yacov',
'Iskar Jarak',
'Locke Lamora',
'Tavi Rillwater',
'Jack Torrance',
'Harry Dresden',
'Jeff Burns',
'Lee Young',
'Sam Harding',
'Kate Nielsen',
'Louis McConnery',
'John Loeb'
], clients = [
'iPad OS 5.0.1',
'Skype for Business',
'iPhone OS 4.3.2',
'iPhone OS 5.0.1',
'Microsoft Office Communicator 2007 R2',
'Microsoft Lync Communicator for Mac 2011',
'Microsoft Lync 2013'
], callQualities = [
'Poor',
'Good'
],
staticDate = new Date('2014-09-26'), startDate, organizer, numberOfRows = 200, participants, participantClients, index, participantIndex, numberOfParticipants, row;
for (index = 0; index < numberOfRows; index++) {
startDate = new Date(staticDate.getTime() + (_.random(1000) * 60000));
organizer = users[_.random(users.length - 1)];
numberOfParticipants = _.random(5) + 200;
participants = [organizer];
participantClients = [clients[_.random(clients.length - 1)]];
for (participantIndex = 0; participantIndex < numberOfParticipants; participantIndex++) {
participants.push(users[_.random(users.length - 1)]);
participantClients.push(clients[_.random(clients.length - 1)]);
}
row = {
startDate: startDate,
duration: _.random(100) + 10,
organizer: organizer,
participants: participants.join('; '),
callQuality: callQualities[_.random(callQualities.length - 1)],
participantsClientVersion: participantClients.join('; '),
qoeData: []
};
addQoeData(row, participants);
result.push(row);
}
return result;
};
function addQoeData(row, participants) {
var _this = this;
var callQualities = [
'Poor',
'Good'
];
_.each(participants, function (participant) {
row.qoeData.push({
sessionDisplayName: participant,
startDate: row.startDate,
callQuality: callQualities[_.random(callQualities.length - 1)],
mediaType: 'Video',
direction: 'Incoming',
latency: getNumber(),
mosDegredation: getNumber(),
listenMos: getNumber(),
packetsLost: getNumber(),
jitter: getNumber()
});
row.qoeData.push({
sessionDisplayName: participant,
startDate: row.startDate,
callQuality: callQualities[_.random(callQualities.length - 1)],
mediaType: 'Video',
direction: 'Outgoing',
latency: getNumber(),
mosDegredation: getNumber(),
listenMos: getNumber(),
packetsLost: getNumber(),
jitter: getNumber()
});
row.qoeData.push({
sessionDisplayName: participant,
startDate: row.startDate,
callQuality: callQualities[_.random(callQualities.length - 1)],
mediaType: 'Application Sharing',
direction: 'Incoming',
latency: getNumber(),
mosDegredation: getNumber(),
listenMos: getNumber(),
packetsLost: getNumber(),
jitter: getNumber()
});
row.qoeData.push({
sessionDisplayName: participant,
startDate: row.startDate,
callQuality: callQualities[_.random(callQualities.length - 1)],
mediaType: 'Application Sharing',
direction: 'Outgoing',
latency: getNumber(),
mosDegredation: getNumber(),
listenMos: getNumber(),
packetsLost: getNumber(),
jitter: getNumber()
});
row.qoeData.push({
sessionDisplayName: participant,
startDate: row.startDate,
callQuality: callQualities[_.random(callQualities.length - 1)],
mediaType: 'Audio',
direction: 'Incoming',
latency: getNumber(),
mosDegredation: getNumber(),
listenMos: getNumber(),
packetsLost: getNumber(),
jitter: getNumber()
});
row.qoeData.push({
sessionDisplayName: participant,
startDate: row.startDate,
callQuality: callQualities[_.random(callQualities.length - 1)],
mediaType: 'Audio',
direction: 'Outgoing',
latency: getNumber(),
mosDegredation: getNumber(),
listenMos: getNumber(),
packetsLost: getNumber(),
jitter: getNumber()
});
});
};
function getNumber() {
if (_.random(10) < 4) {
return '<none>';
}
else {
return ((_.random(3000) + 100) / 10).toFixed(1);
}
};
// get categories and products from server
countryData = new wijmo.collections.CollectionView(sdata);
statesData = new wijmo.collections.CollectionView(nestedData);
// initialize detail visibility mode
//var detailMode = wijmo.grid.detail.DetailVisibilityMode.ExpandSingle;
grid = new wijmo.grid.FlexGrid('#gsFlexGrid');
grid.itemsSource = countryData;
var dp = new wijmo.grid.detail.FlexGridDetailProvider(grid);
dp.detailVisibilityMode = wijmo.grid.detail.DetailVisibilityMode.ExpandMulti;
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,
selectionMode: wijmo.grid.SelectionMode.ListBox,
itemsSource:row.dataItem.qoeData,
columns: [
{ header: 'sessionDisplayName', binding: 'sessionDisplayName' },
{ header: 'startDate', binding: 'startDate' },
{ header: 'callQuality', binding: 'callQuality' },
{ header: 'mediaType', binding: 'mediaType' },
{ header: 'direction', binding: 'direction' },
{ header: 'latency', binding: 'latency' },
{ header: 'mosDegredation', binding: 'mosDegredation' },
{ header: 'listenMos', binding: 'listenMos' },
{ header: 'packetsLost', binding: 'packetsLost' },
{ header: 'jitter', binding: 'jitter' }
]
});
return cell;
};
this.onclick = onCellClicked;
grid.itemFormatter = function (panel, r, c, cell) {
if (panel.cellType === wijmo.grid.CellType.ColumnHeader) {
removeMultiSortArrow(panel, c, cell);
}
};
dp.itemFormatter = function (panel, r, c, cell) {
if (panel.cellType === wijmo.grid.CellType.ColumnHeader) {
removeMultiSortArrow(panel, c, cell);
}
};
function removeMultiSortArrow(panel, c, cell) {
var col = panel.columns[c], cv = panel.grid.collectionView;
if (cv && cv.sortDescriptions.length > 0) {
if (cv.sortDescriptions[0].property !== col.binding) {
cell.innerHTML = col.header;
}
}
};
grid.formatItem.addHandler(function(grid,event){
this.addTooltips(grid,event);
if (event.panel.cellType === wijmo.grid.CellType.RowHeader) {
this.addDetailRowButton(event);
}
else if (event.panel.cellType === wijmo.grid.CellType.Cell) {
this.addRowHighlightOnHover(grid, event);
this.addTextFormatters(grid, grid.columns, event);
this.addButtons(grid, grid.columns, event);
}
});
});
function addTooltips(grid,event){
var tooltip = new wijmo.Tooltip();
$(event.cell).mouseover(function (eventObj) {
if (event.cell.className.indexOf('wj-cell') > -1
&& event.cell.className.indexOf('wj-detail') < 0
&& event.cell.className.indexOf('table-detailRow') < 0
&& event.cell.innerHTML.indexOf('title=') < 0
&& event.cell.innerHTML.replace(' ', '').length > 0) {
tooltip.show(event.cell, event.cell.innerHTML);
}
}).mouseout(function (eventObj) {
tooltip.hide();
});
}
function addButtons (grid, columns, event) {
var wijmoColumn, column, cell = event.cell;
wijmoColumn = grid.columns[event.col];
column = this.findButtonColumn(columns, wijmoColumn);
if (column && column.columnType === 2) {
$('<span>').
addClass(grid.rows[event.row].dataItem.dataItem.removableClass).
addClass(column.iconClass).
addClass('tableIcon').
attr('title', grid.rows[event.row].dataItem.dataItem.removeTitle || column.title).
appendTo($(cell));
}
};
function addTextFormatters (grid, columns, event) {
var wijmoColumn, column, row, value;
wijmoColumn = grid.columns[event.col];
column = this.findColumn(columns, wijmoColumn);
if (column && column.columnType === ColumnType.plainText) {
// TODO: we want to bind to the Row (to keep ids and such), but
// this looks fishy to me
row = grid.rows[event.row].dataItem;
if (row && row.dataItem && column.textFormatter) {
value = row.dataItem[column.fieldName];
event.cell.innerHTML = column.textFormatter(value);
}
}
};
function addRowHighlightOnHover (grid, event) {
var rowClassName = 'highLight_row' + grid['id'] + event.row, highlightClassName = 'wj-highlight-row', cell = event.cell, rowCell;
// NOTE: There's nothing linking wijmo rows together in the actual html :(
// Don't touch the details table parent row
$(cell).addClass(rowClassName);
$(cell).on('mouseover', null, function () {
rowCell = $('.' + rowClassName);
// The wijmo details grid container looks exactly like a row, except for the
// additional detail class. We don't want to highlight the entire grid on hover
if (!$(rowCell).hasClass('wj-detail')) {
$(rowCell).addClass(highlightClassName);
}
});
$(cell).on('mouseout', null, function () {
$('.' + rowClassName).removeClass(highlightClassName);
});
};
function findColumn (columns, column) {
var binding = column.binding.replace('dataItem.', '');
// TODO: this is because of the crappy binding
for(var i=0;i<columns.length;i++){
if(columns[i].fieldName === binding)
return columns[i];
}
//return columns.findWhere({ fieldName: binding });
};
function findButtonColumn (columns, column) {
//return columns.findWhere({ name: column.binding });
for(var i=0;i<columns.length;i++){
if(columns[i].name === column.binding)
return columns[i];
}
};
function addDetailRowButton (event) {
var iconClass, isExpanded;
if (this.detail && this.detail.isDetailAvailable(event.row)) {
isExpanded = this.detail.isDetailVisible(event.row);
iconClass = isExpanded ? 'wj-glyph-down-right' : 'wj-glyph-right';
$(event.cell)
.addClass('table-detailRow')
.attr('data-rowIndex', event.row);
$('<span class="' + iconClass + '"></span>').appendTo(event.cell);
}
};
var _this = this;
function onCellClicked (event) {
var isNestedRow, $obj = $(event.currentTarget), hitInfo;
isNestedRow = $obj.hasClass('wj-detail') || $obj.parents('.wj-detail').length > 0;
if (isNestedRow) {
}
else {
hitInfo = grid.hitTest(event);
switch (hitInfo.cellType) {
case wijmo.grid.CellType.ColumnHeader:
onHeaderCellClicked(event, hitInfo);
break;
case wijmo.grid.CellType.Cell:
//_this.onRowCellClicked(event, hitInfo);
break;
case wijmo.grid.CellType.RowHeader:
onDetailRowHeaderClicked(event);
break;
default:
break;
}
}
event.stopPropagation();
};
function onDetailRowHeaderClicked (event) {
var rowIndex, $icon;
rowIndex = parseInt($(event.currentTarget).attr('data-rowIndex'), 10);
if (!isNaN(rowIndex)) {
$icon = $(event.currentTarget).children().first();
if (this.detail.isDetailVisible(rowIndex)) {
$icon.removeClass('wj-glyph-down-right');
$icon.addClass('wj-glyph-right');
this.detail.hideDetail(rowIndex);
}
else {
$icon.removeClass('wj-glyph-right');
$icon.addClass('wj-glyph-down-right');
this.detail.showDetail(rowIndex);
}
}
};
function onDetailRowHeaderClicked (event) {
var rowIndex, $icon;
rowIndex = parseInt($(event.currentTarget).attr('data-rowIndex'), 10);
if (!isNaN(rowIndex)) {
$icon = $(event.currentTarget).children().first();
if (this.detail.isDetailVisible(rowIndex)) {
$icon.removeClass('wj-glyph-down-right');
$icon.addClass('wj-glyph-right');
this.detail.hideDetail(rowIndex);
}
else {
$icon.removeClass('wj-glyph-right');
$icon.addClass('wj-glyph-down-right');
this.detail.showDetail(rowIndex);
}
}
};
</script>
</head>
<body>
<div id="gsFlexGrid" style="width:100%;overflow:scroll"></div>
</body>
</html>

复制代码

Alice · Alice

谢谢您的反馈。
数据大的确会影响到性能，一些性能优化的建议：
1.设置flexgrid的size。因为它的尺寸影响到内容的展示，如果不指定尺寸，绑定时候就会创建一个非常大的grid。
方法很简单，如下面代码，仅仅设置尺寸：

<div id="gsFlexGrid" style="height:350px"></div>

复制代码

有关尺寸设置可以更多的参考产品文档：http://wijmo.com/5/docs/static/sizingAndStyling.html

2.如果是有自定义Cell，可以使用CellTemplate替换itemFormatter提高性能。
CellTemplate的使用示例：http://demos.wijmo.com/5/Angular ... /CellTemplateIntro/

3.FlexGridDetailProvider 使用方法参考：
http://demos.wijmo.com/5/Angular/RowDetails/RowDetails/

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

wijmo grid 和detail grid 显示多了数据会很卡

本帖子中包含更多资源

1 个回复

活字格认证

微信认证勋章

元老葡萄