Permalink
Browse files

feat: 优化columnMenu的样式

  • Loading branch information...
LiuYueKai committed May 23, 2017
1 parent 6917267 commit 3e3a5f796d4a16c9477780ac03cbb24a03806cd6
Showing with 77 additions and 21 deletions.
  1. +37 −10 src/css/grid.css
  2. +9 −1 src/js/gridCompSet.js
  3. +31 −10 src/js/re_gridCompColMenu.js
View
@@ -730,14 +730,21 @@ columnMenu区域css begin
*/
.u-grid-column-menu {
width: 160px;
width: 240px;
display: none;
overflow: hidden;
position: fixed;
z-index: 13;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
padding: 20px;
border-width: 1px;
border-style: solid;
border-color: #cecece;
box-sizing: border-box;
background: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.20);
}
.u-grid-column-menu-ul {
@@ -806,7 +813,6 @@ columnMenu columns区域css begin
*/
.u-grid-column-menu-columns {
width: 160px;
display: block;
overflow-y: auto;
overflow-x: hidden;
@@ -831,7 +837,7 @@ columnMenu columns区域css begin
.u-grid-column-menu-columns-li {
display: block;
height: 2.125em;
height: 30px;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: #cecece;
@@ -841,30 +847,51 @@ columnMenu columns区域css begin
cursor: pointer;
}
.u-grid-column-menu-columns-li.header {
background: #F2F9F7;
border-top-width: 1px;
font-size: 13px;
}
.u-grid-column-menu-columns-div1 {
display: block;
padding: 0 .8em 0 .8em;
line-height: 2.83em;
font-size: 0.75em;
line-height: 30px;
font-size: 12px;
position: relative;
height: 100%;
}
.u-grid-column-menu-columns-div2 {
position: absolute;
filter: alpha(opacity=70);
/*filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: .7;
opacity: .7;*/
width: 60px;
text-align: center;
border-width: 0px 1px 1px 0px;
border-style: solid;
border-color: #cecece;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.u-grid-column-menu-columns-span {
position: absolute;
width: 120px;
width: 136px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
left: 35px;
left: 60px;
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: #cecece;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding-left: 12px;
padding-right: 12px;
}
View
@@ -11,7 +11,11 @@ const setColumnVisibleByColumn = function(column, visible) {
const setColumnVisibleByIndex = function(index, visible) {
if (index >= 0) {
var column = this.gridCompColumnArr[index],
visibleIndex = this.getVisibleIndexOfColumn(column);
visibleIndex = this.getVisibleIndexOfColumn(column),
canVisible = column.options.canVisible;
if (!canVisible) {
return;
}
// 显示处理
if (column.options.visible == false && visible) {
var htmlStr = '<col';
@@ -45,6 +49,8 @@ const setColumnVisibleByIndex = function(index, visible) {
}
}
var newContentW = this.contentWidth + parseInt(column.options.width);
$('#' + this.options.id + '_column_menu_columns_ul li input:eq(' + index + ')')[0].checked = true;
}
// 隐藏处理
if (column.options.visible == true && !visible) {
@@ -55,6 +61,8 @@ const setColumnVisibleByIndex = function(index, visible) {
$('td:eq(' + index + ')', $('#' + this.options.id + '_content_table tbody tr')).css('display', "none");
// 隐藏之后需要判断总体宽度是否小于内容区最小宽度,如果小于需要将最后一列进行扩展
var newContentW = this.contentWidth - parseInt(column.options.width);
$('#' + this.options.id + '_column_menu_columns_ul li input:eq(' + index + ')')[0].checked = false;
}
column.options.visible = visible;
this.columnsVisibleFun();
@@ -21,26 +21,39 @@ 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">';
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;
$.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">';
columnHtmlStr += '<li class="u-grid-column-menu-columns-li" role="menuitem" index="' + i + '" ' + styleStr + '>';
columnHtmlStr += '<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>';
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></li>';
}
});
htmlStr += '</ul></div>';
columnHtmlStr += '</ul></div>';
var checkedStr = '';
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></li>';
htmlStr += headerHtmlStr;
htmlStr += columnHtmlStr;
htmlStr += '</ul></div>';
@@ -69,7 +82,7 @@ const colMenu_initEventFun = function() {
// 根据点击位置来显示column menu区域
var left = e.clientX - 160;
var left = e.clientX - 240;
if (left < 0)
left = 0;
var top = e.clientY + 10;
@@ -201,6 +214,14 @@ const colMenu_initGridEventFun = function() {
var inputDom = $(this).find('input');
inputDom.click();
});
// $('#grid2_column_menu_ul .header input')
$('#' + this.options.id + '_column_menu_ul .header input').on('click', function(e) {
var nowCheck = $(this)[0].checked;
$.each(oThis.gridCompColumnArr, function(i) {
oThis.setColumnVisibleByColumn(this, nowCheck);
});
});
/*header 按钮处理结束*/
};

0 comments on commit 3e3a5f7

Please sign in to comment.