Permalink
Browse files

feat: columnMenu样式支持通过参数columnMenuType来控制

  • Loading branch information...
LiuYueKai committed May 23, 2017
1 parent 3e3a5f7 commit 3cbeb21a141bbdf78ba0cb70362c1bef263129cb
Showing with 98 additions and 8 deletions.
  1. +37 −1 src/css/grid.css
  2. +1 −0 src/js/gridCompInit.js
  3. +60 −7 src/js/re_gridCompColMenu.js
View
@@ -730,6 +730,17 @@ columnMenu区域css begin
*/
.u-grid-column-menu {
width: 160px;
display: none;
overflow: hidden;
position: fixed;
z-index: 13;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.u-grid-column-menu-border {
width: 240px;
display: none;
overflow: hidden;
@@ -854,6 +865,15 @@ columnMenu columns区域css begin
}
.u-grid-column-menu-columns-div1 {
display: block;
padding: 0 .8em 0 .8em;
line-height: 2.83em;
font-size: 0.75em;
position: relative;
height: 100%;
}
.u-grid-column-menu-columns-div1-border {
display: block;
line-height: 30px;
font-size: 12px;
@@ -862,6 +882,22 @@ columnMenu columns区域css begin
}
.u-grid-column-menu-columns-div2 {
position: absolute;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: .7;
}
.u-grid-column-menu-columns-span {
position: absolute;
width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
left: 35px;
}
.u-grid-column-menu-columns-div2-border {
position: absolute;
/*filter: alpha(opacity=70);
-moz-opacity: 0.7;
@@ -877,7 +913,7 @@ columnMenu columns区域css begin
-webkit-box-sizing: border-box;
}
.u-grid-column-menu-columns-span {
.u-grid-column-menu-columns-span-border {
position: absolute;
width: 136px;
overflow: hidden;
View
@@ -106,6 +106,7 @@ const initDefault = function() {
groupField: '', // 是否按照某字段进行分组显示
groupSumRow: false, //是否显示分组小计
rowHeight: 44, // 行高
columnMenuType: 'base'
// sumRowHeight 合计行行高
// headerHeight 表头高
}
@@ -10,6 +10,14 @@ const colMenu_initGridCompColumn = function() {
};
const re_createColumnMenu = function() {
if (this.options.columnMenuType == 'base') {
return re_createColumnMenu_base.call(this);
} else if (this.options.columnMenuType == 'border') {
return re_createColumnMenu_border.call(this);
}
}
const re_createColumnMenu_base = function() {
var oThis = this;
var htmlStr = '<div class="u-grid-column-menu" id="' + this.options.id + '_column_menu">';
htmlStr += '<ul data-role="menu" role="menubar" class="u-grid-column-menu-ul" id="' + this.options.id + '_column_menu_ul">';
@@ -21,6 +29,46 @@ const re_createColumnMenu = function() {
htmlStr += '</div></li>';
htmlStr += '<div class="u-grid-column-menu-columns" id="' + this.options.id + '_column_menu_columns">';
htmlStr += '<ul data-role="menu" role="menubar" class="u-grid-column-menu-columns-ul" id="' + this.options.id + '_column_menu_columns_ul">';
$.each(this.gridCompColumnArr, function(i) {
if (oThis.getString(this.options.title, '') != '') {
var styleStr = '';
if (!this.options.canVisible)
styleStr += ' style="display:none;"';
htmlStr += '<li class="u-grid-column-menu-columns-li" role="menuitem" index="' + i + '" ' + styleStr + '>';
htmlStr += '<div class="u-grid-column-menu-columns-div1">';
var checkedStr = "";
if (this.options.visible)
checkedStr = ' checked';
htmlStr += '<div class="u-grid-column-menu-columns-div2"><input type="checkbox" ' + checkedStr + '><label></label></div>';
htmlStr += '<span class="u-grid-column-menu-columns-span">' + this.options.title + '</span>';
htmlStr += '</div></li>';
}
});
htmlStr += '</ul></div>';
htmlStr += '</ul></div>';
// 创建数据列区域
return htmlStr;
}
const re_createColumnMenu_border = function() {
var oThis = this;
var htmlStr = '<div class="u-grid-column-menu-border" id="' + this.options.id + '_column_menu">';
htmlStr += '<ul data-role="menu" role="menubar" class="u-grid-column-menu-ul" id="' + this.options.id + '_column_menu_ul">';
// 创建清除设置
htmlStr += '<li class="u-grid-column-menu-li" role="menuitem">';
htmlStr += '<div class="u-grid-column-menu-div1" id="' + this.options.id + '_clearSet">';
htmlStr += '<span class="u-grid-column-menu-span">' + this.transMap.ml_clear_set + '</span>';
htmlStr += '</div></li>';
var columnHtmlStr = '<div class="u-grid-column-menu-columns" id="' + this.options.id + '_column_menu_columns">';
columnHtmlStr += '<ul data-role="menu" role="menubar" class="u-grid-column-menu-columns-ul" id="' + this.options.id + '_column_menu_columns_ul">';
var allCheckFlag = true;
@@ -30,15 +78,15 @@ const re_createColumnMenu = function() {
if (!this.options.canVisible)
styleStr += ' style="display:none;"';
columnHtmlStr += '<li class="u-grid-column-menu-columns-li" role="menuitem" index="' + i + '" ' + styleStr + '>';
columnHtmlStr += '<div class="u-grid-column-menu-columns-div1">';
columnHtmlStr += '<div class="u-grid-column-menu-columns-div1-border">';
var checkedStr = "";
if (this.options.visible)
checkedStr = ' checked';
if (this.options.canVisible && !this.options.visible)
allCheckFlag = false;
columnHtmlStr += '<div class="u-grid-column-menu-columns-div2"><input type="checkbox" ' + checkedStr + '><label></label></div>';
columnHtmlStr += '<span class="u-grid-column-menu-columns-span">' + this.options.title + '</span>';
columnHtmlStr += '<div class="u-grid-column-menu-columns-div2-border"><input type="checkbox" ' + checkedStr + '><label></label></div>';
columnHtmlStr += '<span class="u-grid-column-menu-columns-span-border">' + this.options.title + '</span>';
columnHtmlStr += '</div></li>';
}
});
@@ -47,9 +95,9 @@ const re_createColumnMenu = function() {
if (allCheckFlag)
checkedStr = ' checked '
var headerHtmlStr = '<li class="u-grid-column-menu-columns-li header" role="menuitem">';
headerHtmlStr += '<div class="u-grid-column-menu-columns-div1">';
headerHtmlStr += '<div class="u-grid-column-menu-columns-div2"><input type="checkbox" ' + checkedStr + '><label></label>&nbsp;显示</div>';
headerHtmlStr += '<span class="u-grid-column-menu-columns-span">项目</span>';
headerHtmlStr += '<div class="u-grid-column-menu-columns-div1-border">';
headerHtmlStr += '<div class="u-grid-column-menu-columns-div2-border"><input type="checkbox" ' + checkedStr + '><label></label>&nbsp;显示</div>';
headerHtmlStr += '<span class="u-grid-column-menu-columns-span-border">项目</span>';
headerHtmlStr += '</div></li>';
htmlStr += headerHtmlStr;
@@ -82,7 +130,12 @@ const colMenu_initEventFun = function() {
// 根据点击位置来显示column menu区域
var left = e.clientX - 240;
if (oThis.options.columnMenuType == 'base') {
var left = e.clientX - 160;
} else if (oThis.options.columnMenuType == 'border') {
var left = e.clientX - 240;
}
if (left < 0)
left = 0;
var top = e.clientY + 10;

0 comments on commit 3cbeb21

Please sign in to comment.