Permalink
Browse files

feat: 合计行支持在第一行显示,同时优化多级表头样式

  • Loading branch information...
LiuYueKai committed Apr 19, 2017
1 parent 3799a5a commit 48efee188f04a042cf3df75ffc8dd41c12d08604
Showing with 58 additions and 27 deletions.
  1. +18 −8 src/css/grid.css
  2. +19 −11 src/js/gridCompCreate.js
  3. +3 −0 src/js/gridCompInit.js
  4. +17 −7 src/js/re_gridCompSumRow.js
  5. +1 −1 src/js/ut_utility.js
View
@@ -142,11 +142,9 @@ header区域css begin
background:#d7d7d7;
}
-.u-grid-header-level-div{
+.u-grid-header-level-th{
z-index: 1;
- border-style: solid;
- border-color: #cecece;
- border-width: 0px 1px 0px 0px;
+ border-width: 0px 0px 0px 1px;
}
.u-grid-header-th-first {
@@ -172,16 +170,16 @@ header区域css begin
position: absolute;
top: 0px;
text-align: center;
- /*background-color: #F9F9F9;*/
background-color: #eeeff1;
z-index: 1;
border-style: solid;
border-color: #cecece;
border-width: 1px;
+ border-right-width: 0px;
margin-left: -1px;
- box-sizing: content-box;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
}
.grid-no-left-border{
@@ -317,6 +315,18 @@ content区域css begin
border-bottom-width: 1px;
}
+.u-grid-content-left.u-grid-content-left-sum.u-grid-content-left-sum-first>div:last-child{
+ border-bottom-width: 0px;
+}
+
+.u-grid-content-left-sum-first{
+ bottom:0px;
+ border-style: solid;
+ border-color: #cecece;
+ border-width: 0px;
+ border-top-width: 1px;
+}
+
.u-grid-content tr{
border-top:0px !important;
}
View
@@ -197,7 +197,7 @@ const createThead = function(createFlag) {
thLevelClass = '';
if (this.options.maxHeaderLevel > 1) {
trStyle = 'style="height:' + (this.headerHeight - 1) + 'px;"';
- thLevelClass = ' u-grid-header-level-div ';
+ thLevelClass = ' u-grid-header-level-th ';
}
var htmlStr = '<tr role="row" ' + trStyle + '>';
if (createFlag == 'fixed') {
@@ -216,7 +216,7 @@ const createThead = function(createFlag) {
}
// 低版本浏览器不支持th position为relative,因此加入空div
- htmlStr += '<th role="columnheader" data-filed="' + this.options.field + '" rowspan="1" class="u-grid-header-th" ' + displayStyle + 'field="' + this.options.field + '" index="' + i + '" visibleIndex="' + vi + '"><div style="position:relative;" class="u-grid-header-div ' + thLevelClass + '">';
+ htmlStr += '<th role="columnheader" data-filed="' + this.options.field + '" rowspan="1" class="u-grid-header-th ' + thLevelClass + '" ' + displayStyle + 'field="' + this.options.field + '" index="' + i + '" visibleIndex="' + vi + '"><div style="position:relative;" class="u-grid-header-div">';
var colorStype = '';
if (this.options.headerColor) {
colorStype = 'style="color:' + this.options.headerColor + '"';
@@ -293,6 +293,9 @@ const createContentLeft = function() {
// }
if (this.options.showSumRow) {
sumRowClass = 'u-grid-content-left-sum';
+ if(this.options.sumRowFirst){
+ sumRowClass += ' u-grid-content-left-sum-first';
+ }
}
if (this.options.multiSelect) {
htmlStr += '<div class="u-grid-content-left ' + sumRowClass + '" id="' + this.options.id + '_content_multiSelect" style="width:' + this.multiSelectWidth + 'px;' + hStr + '">';
@@ -460,10 +463,15 @@ const createContentRows = function(createFlag) {
// 遍历生成所有行
if (this.dataSourceObj.rows) {
htmlStr += '<tbody role="rowgroup" id="' + this.options.id + '_content_' + idStr + 'tbody">';
+ if (this.options.sumRowFirst) {
+ htmlStr += this.createContentRowsSumRow(createFlag);
+ }
$.each(this.dataSourceObj.rows, function(i) {
htmlStr += oThis.createContentOneRow(this, createFlag);
});
- htmlStr += this.createContentRowsSumRow(createFlag);
+ if (!this.options.sumRowFirst) {
+ htmlStr += this.createContentRowsSumRow(createFlag);
+ }
htmlStr += '</tbody>';
}
return htmlStr;
@@ -492,10 +500,10 @@ const createContentOneRow = function(row, createFlag, displayFlag) {
classStr += ' u-grid-content-leaf-row ';
}
- if(row.level == 0 ){
- classStr += ' u-grid-content-level0-row ';
- }else{
- classStr += ' u-grid-content-levelother-row ';
+ if (row.level == 0) {
+ classStr += ' u-grid-content-level0-row ';
+ } else {
+ classStr += ' u-grid-content-levelother-row ';
}
}
@@ -524,10 +532,10 @@ const createContentOneRowForIE = function(table, index, rowObj, createFlag, disp
$(row).addClass('u-grid-content-leaf-row');
}
- if(row.level == 0 ){
- $(row).addClass('u-grid-content-level0-row');
- }else{
- $(row).addClass('u-grid-content-levelother-row');
+ if (row.level == 0) {
+ $(row).addClass('u-grid-content-level0-row');
+ } else {
+ $(row).addClass('u-grid-content-levelother-row');
}
}
View
@@ -62,6 +62,7 @@ const getBooleanOptions = function() {
this.options.overWidthHiddenColumn = this.getBoolean(this.options.overWidthHiddenColumn);
this.options.sortable = this.getBoolean(this.options.sortable);
this.options.showSumRow = this.getBoolean(this.options.showSumRow);
+ this.options.sumRowFirst = this.getBoolean(this.options.sumRowFirst);
this.options.canSwap = this.getBoolean(this.options.canSwap);
this.options.showTree = this.getBoolean(this.options.showTree);
this.options.autoExpand = this.getBoolean(this.options.autoExpand);
@@ -71,6 +72,7 @@ const getBooleanOptions = function() {
this.options.cancelSelect = this.getBoolean(this.options.cancelSelect);
this.options.contentSelect = this.getBoolean(this.options.contentSelect);
this.options.contentFocus = this.getBoolean(this.options.contentFocus);
+
};
/*
* 初始化默认参数
@@ -92,6 +94,7 @@ const initDefault = function() {
overWidthHiddenColumn: false, // 宽度不足时是否自动隐藏column
sortable: true, // 是否可以排序
showSumRow: false, // 是否显示合计行
+ sumRowFirst: false, // 合计行是否显示在第一行,true表示显示在第一行,false表示显示在最后一行
canSwap: true, // 是否可以交换列位置
showTree: false, // 是否显示树表
autoExpand: true, // 是否默认展开
@@ -29,7 +29,7 @@ const createSumRow = function(createFlag) {
}
var t = parseInt(this.wholeHeight) - this.exceptContentHeight - 48 - this.scrollBarHeight;
t = t > 0 ? t : 0;
- var htmlStr = '<tr role="row" class="u-grid-content-sum-row" id="' + this.options.id + '_content_' + idStr + 'sum_row" style="top:' + t + 'px;">';
+ var htmlStr = '<tr role="sumrow" class="u-grid-content-sum-row" id="' + this.options.id + '_content_' + idStr + 'sum_row" style="top:' + t + 'px;">';
$.each(gridCompColumnArr, function() {
var f = this.options.field;
var precision = this.options.precision;
@@ -45,7 +45,7 @@ const createSumRow = function(createFlag) {
if (!this.options.visible) {
tdStyle = 'style="display:none;"';
}
- htmlStr += '<td role="rowcell" title="' + sumValue + '" ' + tdStyle + '>';
+ htmlStr += '<td role="sumrowcell" title="' + sumValue + '" ' + tdStyle + '>';
if (this.firstColumn) {
htmlStr += '<div class="u-gird-centent-sum-div"><span>' + oThis.transMap.ml_sum + '</span></div>';
}
@@ -77,7 +77,7 @@ const createSumRowForIE = function(table, createFlag) {
var t = parseInt(this.wholeHeight) - this.exceptContentHeight - 48 - this.scrollBarHeight;
t = t > 0 ? t : 0;
var row = table.insertRow();
- row.row = 'row';
+ row.role = 'sumrow';
row.className = 'u-grid-content-sum-row';
row.id = this.options.id + '_content_' + idStr + 'sum_row';
row.style.top = t + 'px';
@@ -93,7 +93,7 @@ const createSumRowForIE = function(table, createFlag) {
sumValue = oThis.DicimalFormater(o)
}
var newCell = row.insertCell();
- newCell.role = 'rowcell';
+ newCell.role = 'sumrowcell';
newCell.title = sumValue;
var contentStyle = '';
if (this.options.dataType == 'integer' || this.options.dataType == 'float') {
@@ -129,10 +129,20 @@ const re_repairSumRowFun = function() {
try {
if (this.dataSourceObj.rows && this.dataSourceObj.rows.length > 0) {
var htmlStr = this.createSumRow();
- $('#' + this.options.id + '_content_div tbody')[0].insertAdjacentHTML('beforeEnd', htmlStr);
+ if (this.options.sumRowFirst) {
+ $('#' + this.options.id + '_content_div tbody')[0].insertAdjacentHTML('afterBegin', htmlStr);
+ } else {
+ $('#' + this.options.id + '_content_div tbody')[0].insertAdjacentHTML('beforeEnd', htmlStr);
+ }
var htmlStr = this.createSumRow('fixed');
- if ($('#' + this.options.id + '_content_fixed_div tbody')[0])
- $('#' + this.options.id + '_content_fixed_div tbody')[0].insertAdjacentHTML('beforeEnd', htmlStr);
+ if ($('#' + this.options.id + '_content_fixed_div tbody')[0]) {
+ if (this.options.sumRowFirst) {
+ $('#' + this.options.id + '_content_fixed_div tbody')[0].insertAdjacentHTML('afterBegin', htmlStr);
+ } else {
+ $('#' + this.options.id + '_content_fixed_div tbody')[0].insertAdjacentHTML('beforeEnd', htmlStr);
+ }
+ }
+
}
} catch (e) {
var table = $('#' + this.options.id + '_content_div table')[0];
View
@@ -108,7 +108,7 @@ const accAdd = function(v1, v2) {
return (v1 * m + v2 * m) / m;
};
const getTrIndex = function($tr) {
- return $('tr[id!="' + this.options.id + '_edit_tr"]', $tr.parent()).index($tr);
+ return $('tr[id!="' + this.options.id + '_edit_tr"][role="row"]', $tr.parent()).index($tr);
};
const getDataTableRowIdByRow = function(row) {

0 comments on commit 48efee1

Please sign in to comment.