Permalink
Browse files

feat: grid树表情况下支持异步加载

  • Loading branch information...
LiuYueKai committed Jun 6, 2017
1 parent 6de0c0e commit f0cadf4d1756fed1b550a76bd5378f232fa91765
View
@@ -764,11 +764,12 @@ const createContentOneRowTd = function(row, createFlag) {
var iconStr = '';
var vStr = '';
var tdStyle = '';
var cssStr = '';
if (oThis.options.showTree && this.firstColumn) {
var l = parseInt(oThis.treeLeft) * parseInt(row.level);
treeStyle = 'style="position:relative;';
if (row.hasChild) {
if (oThis.options.autoExpand) {
if (row.hasChild || value.isParent) {
if (oThis.options.autoExpand && !value.isParent) {
spanStr = '<span class=" uf uf-reduce-s-o u-grid-content-tree-span"></span>';
} else {
spanStr = '<span class=" uf uf-add-s-o u-grid-content-tree-span"></span>';
@@ -777,10 +778,17 @@ const createContentOneRowTd = function(row, createFlag) {
l += 16;
}
treeStyle += 'text-align:' + this.options.textAlign + ';';
if (oThis.options.maxHeight > 40) {
treeStyle += 'max-height:' + oThis.options.maxHeight + 'px;';
}
treeStyle += 'left:' + l + 'px;"';
} else {
treeStyle += 'style="text-align:' + this.options.textAlign + '";';
if (oThis.options.maxHeight > 40) {
treeStyle += 'style="text-align:' + this.options.textAlign + ';max-height:' + oThis.options.maxHeight + 'px;"';
} else {
treeStyle += 'style="text-align:' + this.options.textAlign + ';"';
}
}
if (!this.options.visible) {
@@ -798,8 +806,11 @@ const createContentOneRowTd = function(row, createFlag) {
if (this.options.icon) {
iconStr = '<span class="' + this.options.icon + '"></span>';
}
if (oThis.options.heightAuto) {
cssStr = 'height-auto';
}
// title="' + v + '" 创建td的时候不在设置title,在renderType中设置,处理现实xml的情况
htmlStr += '<td role="rowcell" ' + tdStyle + ' ><div class="u-grid-content-td-div" ' + treeStyle + '>' + spanStr + iconStr + '<span>' + v.replace(/\</g, '&lt;').replace(/\>/g, '&gt;') + '</span></div></td>';
htmlStr += '<td role="rowcell" ' + tdStyle + ' ><div class="u-grid-content-td-div ' + cssStr + '" ' + treeStyle + '>' + spanStr + iconStr + '<span>' + v.replace(/\</g, '&lt;').replace(/\>/g, '&gt;') + '</span></div></td>';
});
return htmlStr;
};
@@ -827,22 +838,34 @@ const createContentOneRowTdForIE = function(row, rowObj, createFlag) {
iconStr = '',
vStr = '',
htmlStr = '',
newCell = row.insertCell();
newCell = row.insertCell(),
cssStr = '';
newCell.setAttribute("role", "rowcell");
// newCell.title = v.replace(/\</g,'\<').replace(/\>/g,'\>');
if (oThis.options.showTree && this.firstColumn) {
var l = parseInt(oThis.treeLeft) * parseInt(rowObj.level);
var l = parseInt(oThis.treeLeft) * parseInt(row.level);
treeStyle = 'style="position:relative;';
if (rowObj.hasChild) {
if (oThis.options.autoExpand) {
if (row.hasChild || value.isParent) {
if (oThis.options.autoExpand && !value.isParent) {
spanStr = '<span class=" uf uf-reduce-s-o u-grid-content-tree-span"></span>';
} else {
spanStr = '<span class=" uf uf-add-s-o u-grid-content-tree-span"></span>';
}
} else {
l += 18;
l += 16;
}
treeStyle += 'text-align:' + this.options.textAlign + ';';
if (oThis.options.maxHeight > 40) {
treeStyle += 'max-height:' + oThis.options.maxHeight + 'px;';
}
treeStyle += 'left:' + l + 'px;"';
} else {
if (oThis.options.maxHeight > 40) {
treeStyle += 'style="text-align:' + this.options.textAlign + ';max-height:' + oThis.options.maxHeight + 'px;"';
} else {
treeStyle += 'style="text-align:' + this.options.textAlign + ';"';
}
}
if (!this.options.visible) {
newCell.style.display = "none";
@@ -854,7 +877,10 @@ const createContentOneRowTdForIE = function(row, rowObj, createFlag) {
if (this.options.icon) {
iconStr = '<span class="' + this.options.icon + '"></span>';
}
htmlStr += '<div class="u-grid-content-td-div" ' + treeStyle + '>' + spanStr + iconStr + '<span>' + v.replace(/\</g, '&lt;').replace(/\>/g, '&gt;') + '</span></div>';
if (oThis.options.heightAuto) {
cssStr = 'height-auto';
}
htmlStr += '<div class="u-grid-content-td-div ' + cssStr + '" ' + treeStyle + '>' + spanStr + iconStr + '<span>' + v.replace(/\</g, '&lt;').replace(/\>/g, '&gt;') + '</span></div>';
newCell.insertAdjacentHTML('afterBegin', htmlStr);
});
};
@@ -91,12 +91,13 @@ const resetLeftHeightFun = function() {
var nowRowHeight = $trs[i].offsetHeight;
if ($leftNums[i]) {
$leftNums[i].style.height = nowRowHeight + 'px';
// $leftNums[i].style.lineHeight = nowRowHeight + 'px';
$leftNums[i].style.lineHeight = nowRowHeight + 'px';
}
if ($leftSelects[i]) {
$leftSelects[i].style.height = nowRowHeight + 'px';
// $leftSelects[i].style.lineHeight = nowRowHeight + 'px';
$leftSelects[i].style.lineHeight = nowRowHeight + 'px';
$($leftSelects[i]).find('.u-grid-checkbox-outline').css('top',(nowRowHeight-14)/2)
}
}
View
@@ -70,6 +70,8 @@ const getBooleanOptions = function() {
this.options.contentSelect = this.getBoolean(this.options.contentSelect);
this.options.contentFocus = this.getBoolean(this.options.contentFocus);
this.options.needResetHeight = this.getBoolean(this.options.needResetHeight);
this.options.treeAsync = this.getBoolean(this.options.treeAsync);
this.options.heightAuto = this.getBoolean(this.options.heightAuto);
};
/*
@@ -108,9 +110,12 @@ const initDefault = function() {
groupSumRow: false, //是否显示分组小计
rowHeight: 44, // 行高
columnMenuType: 'base',
needResetHeight: false // 是否需要根据右侧内容高度调整左侧高度,目前为false,后续提供方案之后再处理此参数
needResetHeight: false, // 是否需要根据右侧内容高度调整左侧高度,目前为false,后续提供方案之后再处理此参数
treeAsync: false, //树表异步加载数据
heightAuto: false, // 内容自动撑高
// sumRowHeight 合计行行高
// headerHeight 表头高
// maxHeight heightAuto为true时的最大高度
}
};
/*
@@ -182,9 +187,14 @@ const initOptions = function() {
this.noScrollHeight += this.options.sumRowHeight;
this.exceptContentHeight += this.options.sumRowHeight;
// if (!this.options.sumRowFirst) {
this.exceptContentHeight += 1;
this.exceptContentHeight += 1;
// }
}
if (this.options.heightAuto) {
this.options.needResetHeight = true;
} else {
this.options.maxHeight = 0;
}
// 获取缓存id
var url = window.location.href;
@@ -81,7 +81,7 @@ const addOneRow = function(row, index) {
this.dataSourceObj.options.values.splice(index, 0, row);
}
if (this.showType == 'grid') { //只有grid展示的时候才处理div,针对隐藏情况下还要添加数据
if (this.showType == 'grid' && !this.hasChildF) { //只有grid展示的时候才处理div,针对隐藏情况下还要添加数据
this.editClose();
this.updateEditRowIndex('+', index);
try {
@@ -197,32 +197,34 @@ const renderTypeByColumn = function(gridCompColumn, i, begin, length, isFixedCol
}
}
oThis.renderTypeGroupSumRow(gridCompColumn,i, isFixedColumn,this);
oThis.renderTypeGroupSumRow(gridCompColumn, i, isFixedColumn, this);
});
this.renderTypeSumRow(gridCompColumn, i, begin, length, isFixedColumn);
};
const getRenderOverFlag = function(obj) {
// 影响性能,不再支持此方式,按照maxLength来处理
return;
var span = obj.span;
var nowHeight = span.offsetHeight;
var nowWidth = span.offsetWidth;
var newSpan = $(span).clone()[0];
var overFlag = false;
obj.span.parentNode.appendChild(newSpan);
var oldDisplay = span.style.display;
span.style.display = 'none';
newSpan.style.height = '';
newSpan.style.maxHeight = '999999px';
var newHeight = newSpan.offsetHeight;
if (newHeight > nowHeight) {
overFlag = true;
if (this.options.heightAuto && this.options.maxHeight > 40) {
var span = obj.span;
var nowHeight = span.offsetHeight;
var nowWidth = span.offsetWidth;
var newSpan = $(span).clone()[0];
var overFlag = false;
obj.span.parentNode.appendChild(newSpan);
var oldDisplay = span.style.display;
span.style.display = 'none';
newSpan.style.height = '';
newSpan.style.maxHeight = '999999px';
var newHeight = newSpan.offsetHeight;
if (newHeight > nowHeight) {
overFlag = true;
}
obj.span.parentNode.removeChild(newSpan);
span.style.display = oldDisplay;
return overFlag;
}
obj.span.parentNode.removeChild(newSpan);
span.style.display = oldDisplay;
return overFlag;
};
const renderTypeSumRow = function(gridCompColumn, i, begin, length, isFixedColumn) {};
@@ -106,6 +106,7 @@ const dragEnd = function(e) {
if (this.dragFlag) {
this.resetThVariable();
this.saveGridCompColumnArrToLocal();
this.resetLeftHeight();
}
this.dragNextClomunWidth = -1;
// this.lastVisibleColumn.options.width = this.lastVisibleColumnWidth;
View
@@ -8,6 +8,11 @@ const re_initOptionsTree = function() {
if (this.options.showTree) {
this.options.showNumCol = false;
}
if(this.options.treeAsync){
if (typeof this.options.onTreeExpandFun != 'function') {
alert('treeAsync 为true必须定义onTreeExpandFun');
}
}
};
const re_clickFunTree = function(e) {
var oThis = this,
@@ -44,6 +49,15 @@ const re_clickFunTree = function(e) {
}
} else if (plus.length > 0) {
// 展开
if (this.options.treeAsync && row.value.isParent) {
var obj = {}
obj.row = row;
obj.gridObj = this;
var keyField = this.options.keyField;
var keyValue = this.getString(row.value[keyField], '');
obj.keyValue = keyValue;
this.options.onTreeExpandFun.call(this, obj);
}
plus.removeClass('uf-add-s-o').addClass('uf-reduce-s-o');
if (rowChildIndex.length > 0) {
$.each(rowChildIndex, function() {
@@ -91,7 +105,7 @@ const re_addOneRowTree = function(row, index, rowObj) {
if (!oThis.options.needTreeSort)
return false;
}
if (nowParentKeyValue == keyValue) {
if (nowParentKeyValue == keyValue && keyValue != '') {
oThis.hasChildF = true;
}
if (oThis.hasParent && oThis.hasChildF)
@@ -108,12 +122,17 @@ const re_addOneRowTree = function(row, index, rowObj) {
if (this.hasParent) {
var $pTr = $('#' + this.options.id + '_content_div').find('tbody').find('tr[role="row"]').eq(oThis.addRowParentIndex);
$pTr.removeClass('u-grid-content-leaf-row').addClass('u-grid-content-parent-row');
var openDiv = $('.uf-add-s-o', $pTr);
if (!(openDiv.length > 0)) {
displayFlag = 'block';
}
if (parentChildLength > 0) {
// 如果存在父项并且父项存在子项则需要判断父项是否展开
var openDiv = $('.uf-add-s-o', $pTr);
if (!(openDiv.length > 0)) {
displayFlag = 'block';
}
// var openDiv = $('.uf-add-s-o', $pTr);
// if (!(openDiv.length > 0)) {
// displayFlag = 'block';
// }
} else {
// 如果存在父项并且父项原来没有子项则需要添加图标
if (this.options.autoExpand) {

0 comments on commit f0cadf4

Please sign in to comment.