Skip to content

Commit

Permalink
fix: grid设置宽度为百分比情况下，优化拖拽、交换列等操作
Browse files Browse the repository at this point in the history
  • Loading branch information
liuyk committed Nov 4, 2016
1 parent 7461d52 commit 1fe2a0b
Show file tree
Hide file tree
Showing 13 changed files with 155 additions and 52 deletions.
96 changes: 74 additions & 22 deletions dist/js/u-grid.js
View file
Expand Up @@ -1133,7 +1133,6 @@
if (typeof this.options.editType == 'string') this.options.editType = eval(this.options.editType); if (typeof this.options.editType == 'string') this.options.editType = eval(this.options.editType);
} catch (e) {} } catch (e) {}


// 转成数字
this.options.width = this.options.width; this.options.width = this.options.width;
this.firstColumn = false; this.firstColumn = false;
}; };
Expand Down Expand Up @@ -1313,6 +1312,7 @@
gridComp.prototype.getRowByIndex = _gridCompGet.getRowByIndex; gridComp.prototype.getRowByIndex = _gridCompGet.getRowByIndex;
gridComp.prototype.getRowIndexByValue = _gridCompGet.getRowIndexByValue; gridComp.prototype.getRowIndexByValue = _gridCompGet.getRowIndexByValue;
gridComp.prototype.getChildRowIndex = _gridCompGet.getChildRowIndex; gridComp.prototype.getChildRowIndex = _gridCompGet.getChildRowIndex;
gridComp.prototype.getColumnByVisibleIndex = _gridCompGet.getColumnByVisibleIndex;


gridComp.prototype.init = _gridCompInit.init; gridComp.prototype.init = _gridCompInit.init;
gridComp.prototype.getBooleanOptions = _gridCompInit.getBooleanOptions; gridComp.prototype.getBooleanOptions = _gridCompInit.getBooleanOptions;
Expand Down Expand Up @@ -2544,8 +2544,11 @@
j = 0; j = 0;
for (var i = 0; i < this.gridCompColumnArr.length; i++) { for (var i = 0; i < this.gridCompColumnArr.length; i++) {
if (this.gridCompColumnArr[i] == column) { if (this.gridCompColumnArr[i] == column) {
if (!($('#' + this.options.id + '_header').find('th').eq(i).css('display') == 'none')) {

j++;
}
flag = true; flag = true;
continue;
} }
if (flag == true && !($('#' + this.options.id + '_header').find('th').eq(i).css('display') == 'none')) { if (flag == true && !($('#' + this.options.id + '_header').find('th').eq(i).css('display') == 'none')) {
index = j; index = j;
Expand Down Expand Up @@ -2625,6 +2628,20 @@
return result; return result;
}; };


var getColumnByVisibleIndex = function getColumnByVisibleIndex(index) {
var nowIndex = -1;
for (var i = 0; i < this.gridCompColumnArr.length; i++) {
var column = this.gridCompColumnArr[i];
if (!($('#' + this.options.id + '_header').find('th').eq(i).css('display') == 'none')) {
nowIndex++;
}
if (nowIndex == index) {
return column;
}
}
return null;
};

exports.getColumnAttr = getColumnAttr; exports.getColumnAttr = getColumnAttr;
exports.getColumnByField = getColumnByField; exports.getColumnByField = getColumnByField;
exports.getIndexOfColumn = getIndexOfColumn; exports.getIndexOfColumn = getIndexOfColumn;
Expand All @@ -2638,6 +2655,7 @@
exports.getRowByIndex = getRowByIndex; exports.getRowByIndex = getRowByIndex;
exports.getRowIndexByValue = getRowIndexByValue; exports.getRowIndexByValue = getRowIndexByValue;
exports.getChildRowIndex = getChildRowIndex; exports.getChildRowIndex = getChildRowIndex;
exports.getColumnByVisibleIndex = getColumnByVisibleIndex;


/***/ }, /***/ },
/* 13 */ /* 13 */
Expand Down Expand Up @@ -3928,7 +3946,7 @@
$('#' + this.options.id + '_content col:eq(' + nextVisibleIndex + ')').before(htmlStr); $('#' + this.options.id + '_content col:eq(' + nextVisibleIndex + ')').before(htmlStr);
} }
} }
var newContentW = this.contentWidth + column.options.width; var newContentW = this.contentWidth + parseInt(column.options.width);
} }
// 隐藏处理 // 隐藏处理
if (column.options.visible == true && !visible) { if (column.options.visible == true && !visible) {
Expand All @@ -3938,7 +3956,7 @@
$('#' + this.options.id + '_content col:eq(' + visibleIndex + ')').remove(); $('#' + this.options.id + '_content col:eq(' + visibleIndex + ')').remove();
$('td:eq(' + index + ')', $('#' + this.options.id + '_content tbody tr')).css('display', "none"); $('td:eq(' + index + ')', $('#' + this.options.id + '_content tbody tr')).css('display', "none");
// 隐藏之后需要判断总体宽度是否小于内容区最小宽度，如果小于需要将最后一列进行扩展 // 隐藏之后需要判断总体宽度是否小于内容区最小宽度，如果小于需要将最后一列进行扩展
var newContentW = this.contentWidth - column.options.width; var newContentW = this.contentWidth - parseInt(column.options.width);
} }
column.options.visible = visible; column.options.visible = visible;
this.columnsVisibleFun(); this.columnsVisibleFun();
Expand All @@ -3962,7 +3980,7 @@
*/ */
var setColumnWidth = function setColumnWidth(column, newWidth) { var setColumnWidth = function setColumnWidth(column, newWidth) {
if (column != this.lastVisibleColumn) { if (column != this.lastVisibleColumn) {
if (newWidth > this.minColumnWidth) { if (newWidth > this.minColumnWidth || newWidth == this.minColumnWidth) {
var nowVisibleThIndex = this.getVisibleIndexOfColumn(column), var nowVisibleThIndex = this.getVisibleIndexOfColumn(column),
oldWidth = column.options.width, oldWidth = column.options.width,
changeWidth = newWidth - oldWidth, changeWidth = newWidth - oldWidth,
Expand Down Expand Up @@ -4121,15 +4139,22 @@
for (var i = 0; i < this.gridCompColumnArr.length; i++) { for (var i = 0; i < this.gridCompColumnArr.length; i++) {
var column = this.gridCompColumnArr[i]; var column = this.gridCompColumnArr[i];
var nowWidth = column.options.width; var nowWidth = column.options.width;
var newWidth = nowWidth / this.preWholeWidth * this.wholeWidth; var newWidth = parseInt(nowWidth / this.preWholeWidth * this.wholeWidth);
this.setColumnWidth(column, newWidth); this.setColumnWidth(column, newWidth);
} }
} else { } else {
//先按100%来处理 //先按100%来处理
for (var i = 0; i < this.gridCompColumnArr.length; i++) { for (var i = 0; i < this.gridCompColumnArr.length; i++) {
var column = this.gridCompColumnArr[i]; var column = this.gridCompColumnArr[i];
var nowWidth = column.options.width + ''; var nowWidth = column.options.width + '';
var newWidth = nowWidth.replace('%', '') * this.wholeWidth / 100; if (nowWidth.indexOf('%') > 0) {
var newWidth = parseInt(nowWidth.replace('%', '') * this.wholeWidth / 100);
} else {
var newWidth = nowWidth;
}
if (newWidth < this.minColumnWidth) {
newWidth = this.minColumnWidth;
}
this.setColumnWidth(column, newWidth); this.setColumnWidth(column, newWidth);
} }
} }
Expand Down Expand Up @@ -4159,7 +4184,7 @@
*/ */
var contentWidthChange = function contentWidthChange(newContentWidth) { var contentWidthChange = function contentWidthChange(newContentWidth) {
if (newContentWidth < this.contentMinWidth) { if (newContentWidth < this.contentMinWidth) {
var oldW = this.lastVisibleColumn.options.width; var oldW = parseInt(this.lastVisibleColumn.options.width);
this.lastVisibleColumnWidth = oldW + (this.contentMinWidth - newContentWidth); this.lastVisibleColumnWidth = oldW + (this.contentMinWidth - newContentWidth);
$('#' + this.options.id + '_header_table col:last').css('width', this.lastVisibleColumnWidth + "px"); $('#' + this.options.id + '_header_table col:last').css('width', this.lastVisibleColumnWidth + "px");
$('#' + this.options.id + '_content_table col:last').css('width', this.lastVisibleColumnWidth + "px"); $('#' + this.options.id + '_content_table col:last').css('width', this.lastVisibleColumnWidth + "px");
Expand All @@ -4173,15 +4198,15 @@
for (var i = 0; i < l; i++) { for (var i = 0; i < l; i++) {
var overWidthColumn = this.overWidthVisibleColumnArr[i]; var overWidthColumn = this.overWidthVisibleColumnArr[i];
var nowVisibleIndex = this.getVisibleIndexOfColumn(overWidthColumn); var nowVisibleIndex = this.getVisibleIndexOfColumn(overWidthColumn);
var w = overWidthColumn.options.width; var w = parseInt(overWidthColumn.options.width);
var realW = overWidthColumn.options.realWidth; var realW = overWidthColumn.options.realWidth;
$('#' + this.options.id + '_header_table col:eq(' + nowVisibleIndex + ')').css('width', realW + "px"); $('#' + this.options.id + '_header_table col:eq(' + nowVisibleIndex + ')').css('width', realW + "px");
$('#' + this.options.id + '_content_table col:eq(' + nowVisibleIndex + ')').css('width', realW + "px"); $('#' + this.options.id + '_content_table col:eq(' + nowVisibleIndex + ')').css('width', realW + "px");
newContentWidth = newContentWidth - (w - realW); newContentWidth = newContentWidth - (w - realW);
overWidthColumn.options.width = overWidthColumn.options.realWidth; overWidthColumn.options.width = overWidthColumn.options.realWidth;
} }
if (newContentWidth < this.contentMinWidth) { if (newContentWidth < this.contentMinWidth) {
var oldW = this.lastVisibleColumn.options.width; var oldW = parseInt(this.lastVisibleColumn.options.width);
this.lastVisibleColumnWidth = oldW + (this.contentMinWidth - newContentWidth); this.lastVisibleColumnWidth = oldW + (this.contentMinWidth - newContentWidth);
$('#' + this.options.id + '_header_table col:last').css('width', this.lastVisibleColumnWidth + "px"); $('#' + this.options.id + '_header_table col:last').css('width', this.lastVisibleColumnWidth + "px");
$('#' + this.options.id + '_content_table col:last').css('width', this.lastVisibleColumnWidth + "px"); $('#' + this.options.id + '_content_table col:last').css('width', this.lastVisibleColumnWidth + "px");
Expand Down Expand Up @@ -4388,7 +4413,7 @@
var gridCompColumn = oThis.gridCompColumnArr[i]; var gridCompColumn = oThis.gridCompColumnArr[i];
var w = 0; var w = 0;
if (gridCompColumn.options.visible) { if (gridCompColumn.options.visible) {
w = gridCompColumn.options.width; w = parseInt(gridCompColumn.options.width);
} }
this.attrLeftTotalWidth = oThis.contentWidth; this.attrLeftTotalWidth = oThis.contentWidth;
oThis.contentWidth += w; oThis.contentWidth += w;
Expand Down Expand Up @@ -4774,6 +4799,8 @@
$('#' + this.options.id + '_clearSet').on('click', function (e) { $('#' + this.options.id + '_clearSet').on('click', function (e) {
oThis.clearLocalData(); oThis.clearLocalData();
oThis.initGridCompColumn(); oThis.initGridCompColumn();
oThis.hasNoScrollRest = false;
oThis.noScrollWidthReset();
// 清除排序 // 清除排序
oThis.dataSourceObj.sortRows(); oThis.dataSourceObj.sortRows();
oThis.repaintGridDivs(); oThis.repaintGridDivs();
Expand Down Expand Up @@ -4933,16 +4960,37 @@
nowVisibleThIndex = this.getVisibleIndexOfColumn(column); nowVisibleThIndex = this.getVisibleIndexOfColumn(column);
if (nowTh && column != this.lastVisibleColumn) { if (nowTh && column != this.lastVisibleColumn) {
this.dragEndX = e.clientX; this.dragEndX = e.clientX;
var changeWidth = this.dragEndX - this.dragStartX, var changeWidth = parseInt(this.dragEndX) - parseInt(this.dragStartX),
newWidth = nowTh.attrWidth + changeWidth, newWidth = parseInt(nowTh.attrWidth) + parseInt(changeWidth),
cWidth = this.contentWidth + changeWidth; cWidth = parseInt(this.contentWidth) + parseInt(changeWidth);
if (newWidth > this.minColumnWidth) { if (newWidth > this.minColumnWidth) {
this.dragW = this.contentWidthChange(cWidth); if (this.options.noScroll) {
// 不显示滚动条的情况下，当前列的该变量对后面一列产生影响
var nextVisibleThIndex = this.getNextVisibleInidexOfColumn(column);
if (nextVisibleThIndex > -1) {
var nextColumn = this.getColumnByVisibleIndex(nextVisibleThIndex);
if (!this.dragNextClomunWidth || this.dragNextClomunWidth < 0) this.dragNextClomunWidth = nextColumn.options.width;
}
var nextNewWidth = parseInt(this.dragNextClomunWidth) - parseInt(changeWidth);
if (!(nextNewWidth > this.minColumnWidth)) {
$('#' + this.options.id + '_top').css('display', 'block');
return;
}
}
if (!this.options.noScroll) {
this.dragW = this.contentWidthChange(cWidth);
}
$('#' + this.options.id + '_header_table col:eq(' + nowVisibleThIndex + ')').css('width', newWidth + "px"); $('#' + this.options.id + '_header_table col:eq(' + nowVisibleThIndex + ')').css('width', newWidth + "px");
$('#' + this.options.id + '_content_table col:eq(' + nowVisibleThIndex + ')').css('width', newWidth + "px"); $('#' + this.options.id + '_content_table col:eq(' + nowVisibleThIndex + ')').css('width', newWidth + "px");


column.options.width = newWidth; column.options.width = newWidth;
column.options.realWidth = newWidth; column.options.realWidth = newWidth;
if (this.options.noScroll) {
$('#' + this.options.id + '_header_table col:eq(' + nextVisibleThIndex + ')').css('width', nextNewWidth + "px");
$('#' + this.options.id + '_content_table col:eq(' + nextVisibleThIndex + ')').css('width', nextNewWidth + "px");
nextColumn.options.width = nextNewWidth;
nextColumn.options.realWidth = nextNewWidth;
}
} }
} }
$('#' + this.options.id + '_top').css('display', 'block'); $('#' + this.options.id + '_top').css('display', 'block');
Expand All @@ -4956,6 +5004,7 @@
this.resetThVariable(); this.resetThVariable();
this.saveGridCompColumnArrToLocal(); this.saveGridCompColumnArrToLocal();
} }
this.dragNextClomunWidth = -1;
this.lastVisibleColumn.options.width = this.lastVisibleColumnWidth; this.lastVisibleColumn.options.width = this.lastVisibleColumnWidth;
if (this.dragW) this.contentWidth = this.dragW; if (this.dragW) this.contentWidth = this.dragW;
$('#' + this.options.id + '_resize_handle')[0].nowTh = null; $('#' + this.options.id + '_resize_handle')[0].nowTh = null;
Expand Down Expand Up @@ -5263,6 +5312,9 @@
if (this.editComp && this.editComp.hide) { if (this.editComp && this.editComp.hide) {
this.editComp.hide(); this.editComp.hide();
} }
if (this.editComp && this.editComp.comp && this.editComp.comp.hide) {
this.editComp.comp.hide();
}
$('#' + this.options.id + '_placeholder_div').remove(); $('#' + this.options.id + '_placeholder_div').remove();
if (!row) return; if (!row) return;
if (this.options.editType != 'form') { if (this.options.editType != 'form') {
Expand Down Expand Up @@ -5701,7 +5753,7 @@
var parentHeaderStr = oThis.getString(gridCompColumn.options.parentHeader, ''); var parentHeaderStr = oThis.getString(gridCompColumn.options.parentHeader, '');
var w = 0; var w = 0;
if (gridCompColumn.options.visible) { if (gridCompColumn.options.visible) {
w = gridCompColumn.options.width; w = parseInt(gridCompColumn.options.width);
} }
// 处理多表头 // 处理多表头
if (oldParentHeaderStr != '' && parentHeaderStr != oldParentHeaderStr) { if (oldParentHeaderStr != '' && parentHeaderStr != oldParentHeaderStr) {
Expand Down Expand Up @@ -5910,7 +5962,7 @@
var column = this.gridCompHiddenLevelColumnArr[i]; var column = this.gridCompHiddenLevelColumnArr[i];
if (column.options.visible) { if (column.options.visible) {
column.options.visible = false; column.options.visible = false;
columnWholeWidth = columnWholeWidth - column.options.width; columnWholeWidth = parseInt(columnWholeWidth) - parseInt(column.options.width);
} }
if (!(columnWholeWidth > wholeWidth)) { if (!(columnWholeWidth > wholeWidth)) {
break; break;
Expand All @@ -5921,7 +5973,7 @@
for (var i = this.gridCompHiddenLevelColumnArr.length - 1; i > -1; i--) { for (var i = this.gridCompHiddenLevelColumnArr.length - 1; i > -1; i--) {
var column = this.gridCompHiddenLevelColumnArr[i]; var column = this.gridCompHiddenLevelColumnArr[i];
if (!column.options.visible) { if (!column.options.visible) {
columnWholeWidth = columnWholeWidth + column.options.width; columnWholeWidth = parseInt(columnWholeWidth) + parseInt(column.options.width);
if (columnWholeWidth > wholeWidth) { if (columnWholeWidth > wholeWidth) {
break; break;
} }
Expand Down Expand Up @@ -5952,10 +6004,10 @@
}; };
var re_createContentSumRow = function re_createContentSumRow(bottonStr) { var re_createContentSumRow = function re_createContentSumRow(bottonStr) {
var htmlStr = ''; var htmlStr = '';
if (this.options.showSumRow) { // if(this.options.showSumRow){
htmlStr += '<div class="u-grid-content-left-sum-bottom" id="' + this.options.id + '_content_left_sum_bottom" style="width:' + (this.leftW + this.fixedWidth) + 'px;' + bottonStr + '">'; // htmlStr += '<div class="u-grid-content-left-sum-bottom" id="' + this.options.id + '_content_left_sum_bottom" style="width:' + (this.leftW + this.fixedWidth) + 'px;'+bottonStr+'">';
htmlStr += '</div>'; // htmlStr += '</div>';
} // }
return htmlStr; return htmlStr;
}; };
/* /*
Expand Down
10 changes: 5 additions & 5 deletions dist/js/u-grid.min.js
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion js/columnInit.js
View file
Expand Up @@ -55,7 +55,6 @@ const init = function(options, gridComp){


} }


// 转成数字
this.options.width = this.options.width; this.options.width = this.options.width;
this.firstColumn = false; this.firstColumn = false;
}; };
Expand Down
4 changes: 3 additions & 1 deletion js/gridComp.js
View file
Expand Up @@ -60,7 +60,8 @@ import {
getAllRows, getAllRows,
getRowByIndex, getRowByIndex,
getRowIndexByValue, getRowIndexByValue,
getChildRowIndex getChildRowIndex,
getColumnByVisibleIndex
} from './gridCompGet'; } from './gridCompGet';


import { import {
Expand Down Expand Up @@ -277,6 +278,7 @@ gridComp.prototype.getAllRows = getAllRows;
gridComp.prototype.getRowByIndex = getRowByIndex; gridComp.prototype.getRowByIndex = getRowByIndex;
gridComp.prototype.getRowIndexByValue = getRowIndexByValue; gridComp.prototype.getRowIndexByValue = getRowIndexByValue;
gridComp.prototype.getChildRowIndex = getChildRowIndex; gridComp.prototype.getChildRowIndex = getChildRowIndex;
gridComp.prototype.getColumnByVisibleIndex = getColumnByVisibleIndex;






Expand Down
22 changes: 20 additions & 2 deletions js/gridCompGet.js
View file
Expand Up @@ -59,8 +59,11 @@ const getNextVisibleInidexOfColumn = function(column){
var index = -1,flag = false,j = 0; var index = -1,flag = false,j = 0;
for(var i=0;i < this.gridCompColumnArr.length;i++){ for(var i=0;i < this.gridCompColumnArr.length;i++){
if(this.gridCompColumnArr[i] == column){ if(this.gridCompColumnArr[i] == column){
if(!($('#' + this.options.id + '_header').find('th').eq(i).css('display') == 'none')){

j++;
}
flag = true; flag = true;
continue;
} }
if(flag == true && !($('#' + this.options.id + '_header').find('th').eq(i).css('display') == 'none')){ if(flag == true && !($('#' + this.options.id + '_header').find('th').eq(i).css('display') == 'none')){
index = j; index = j;
Expand Down Expand Up @@ -140,6 +143,20 @@ const getChildRowIndex = function(row){
return result; return result;
} }


const getColumnByVisibleIndex = function(index){
var nowIndex = -1;
for (var i = 0; i < this.gridCompColumnArr.length; i++) {
var column = this.gridCompColumnArr[i];
if(!($('#' + this.options.id + '_header').find('th').eq(i).css('display') == 'none')){
nowIndex++;
}
if(nowIndex == index){
return column;
}
}
return null;
}

export{ export{
getColumnAttr, getColumnAttr,
getColumnByField, getColumnByField,
Expand All @@ -153,5 +170,6 @@ export{
getAllRows, getAllRows,
getRowByIndex, getRowByIndex,
getRowIndexByValue, getRowIndexByValue,
getChildRowIndex getChildRowIndex,
getColumnByVisibleIndex
} }
2 changes: 1 addition & 1 deletion js/gridCompOther.js
View file
Expand Up @@ -63,7 +63,7 @@ const resetThVariable = function() {
var gridCompColumn = oThis.gridCompColumnArr[i]; var gridCompColumn = oThis.gridCompColumnArr[i];
var w = 0; var w = 0;
if(gridCompColumn.options.visible){ if(gridCompColumn.options.visible){
w = gridCompColumn.options.width; w = parseInt(gridCompColumn.options.width);
} }
this.attrLeftTotalWidth = oThis.contentWidth; this.attrLeftTotalWidth = oThis.contentWidth;
oThis.contentWidth += w; oThis.contentWidth += w;
Expand Down
6 changes: 3 additions & 3 deletions js/gridCompSet.js
View file
Expand Up @@ -44,7 +44,7 @@ const setColumnVisibleByIndex = function(index,visible){
$('#' + this.options.id + '_content col:eq(' + (nextVisibleIndex) + ')').before(htmlStr); $('#' + this.options.id + '_content col:eq(' + (nextVisibleIndex) + ')').before(htmlStr);
} }
} }
var newContentW = this.contentWidth + column.options.width; var newContentW = this.contentWidth + parseInt(column.options.width);
} }
// 隐藏处理 // 隐藏处理
if(column.options.visible == true && !visible){ if(column.options.visible == true && !visible){
Expand All @@ -54,7 +54,7 @@ const setColumnVisibleByIndex = function(index,visible){
$('#' + this.options.id + '_content col:eq(' + visibleIndex + ')').remove(); $('#' + this.options.id + '_content col:eq(' + visibleIndex + ')').remove();
$('td:eq(' + index + ')',$('#' + this.options.id + '_content tbody tr')).css('display', "none"); $('td:eq(' + index + ')',$('#' + this.options.id + '_content tbody tr')).css('display', "none");
// 隐藏之后需要判断总体宽度是否小于内容区最小宽度，如果小于需要将最后一列进行扩展 // 隐藏之后需要判断总体宽度是否小于内容区最小宽度，如果小于需要将最后一列进行扩展
var newContentW = this.contentWidth - column.options.width; var newContentW = this.contentWidth - parseInt(column.options.width);
} }
column.options.visible = visible; column.options.visible = visible;
this.columnsVisibleFun(); this.columnsVisibleFun();
Expand All @@ -78,7 +78,7 @@ const setCoulmnWidthByField = function(field, newWidth){
*/ */
const setColumnWidth = function(column, newWidth){ const setColumnWidth = function(column, newWidth){
if(column != this.lastVisibleColumn){ if(column != this.lastVisibleColumn){
if (newWidth > this.minColumnWidth) { if (newWidth > this.minColumnWidth || newWidth == this.minColumnWidth) {
var nowVisibleThIndex = this.getVisibleIndexOfColumn(column), var nowVisibleThIndex = this.getVisibleIndexOfColumn(column),
oldWidth = column.options.width, oldWidth = column.options.width,
changeWidth = newWidth - oldWidth, changeWidth = newWidth - oldWidth,
Expand Down

0 comments on commit 1fe2a0b

Please sign in to comment.