Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
7d3a9cc1
Z
zui
项目概览
易企天创
/
zui
12 个月 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
7d3a9cc1
编写于
12月 13, 2017
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* improve datagrid UI.
上级
f3933099
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
172 addition
and
37 deletion
+172
-37
src/js/datagrid.js
src/js/datagrid.js
+125
-32
src/less/views/datagrid.less
src/less/views/datagrid.less
+47
-5
未找到文件。
src/js/datagrid.js
浏览文件 @
7d3a9cc1
...
...
@@ -44,13 +44,25 @@
}
};
var
DEFAULT_CONFIGS
=
{
};
var
DEFAULT_STATES
=
{
// Fixed columns and rows config
fixedLeftUntil
:
0
,
// fixedRightFrom: 5,
fixedTopUntil
:
0
,
// fixedBottomFrom: 5,
};
// The datagrid modal class
var
DataGrid
=
function
(
element
,
options
)
{
var
that
=
this
;
var
$element
=
that
.
$
=
$
(
element
);
that
.
name
=
NAME
;
that
.
id
=
NAME
+
'
.
'
+
$
.
zui
.
uuid
();
options
=
$
.
extend
({},
DataGrid
.
DEFAULTS
,
that
.
$
.
data
(),
options
);
that
.
name
=
NAME
;
that
.
uuid
=
$
.
zui
.
uuid
();
that
.
id
=
'
zui-datagrid-
'
+
that
.
uuid
;
options
=
$
.
extend
({},
DataGrid
.
DEFAULTS
,
that
.
$
.
data
(),
options
);
options
.
valueOperator
=
$
.
extend
({},
DEFAULT_VALUE_OPERATOR
,
options
.
valueOperator
);
options
.
rowDefaultHeight
=
options
.
rowDefaultHeight
||
30
;
...
...
@@ -78,7 +90,7 @@
}
var
isMouseDown
=
false
;
var
lastPos
=
null
;
var
eventSuffix
=
'
.scrollbar
'
+
direction
+
'
.
'
+
that
.
id
;
var
eventSuffix
=
'
.scrollbar
'
+
direction
+
'
.
'
+
NAME
+
'
.
'
+
that
.
uu
id
;
var
startPagePos
,
startPageOffset
,
isClickBar
,
startScrollOffset
;
var
handleMousePosition
=
function
(
e
)
{
if
(
!
isMouseDown
)
return
;
...
...
@@ -102,6 +114,7 @@
}
};
$scrollbar
.
on
(
'
mousedown
'
,
function
(
e
)
{
e
.
preventDefault
();
isMouseDown
=
true
;
var
scroll
=
that
.
layout
[
direction
+
'
Scroll
'
];
var
degree
=
direction
===
'
h
'
?
'
X
'
:
'
Y
'
;
...
...
@@ -143,14 +156,14 @@
that
.
$cells
=
$cells
;
// configs is an object
that
.
configs
=
$
.
extend
({},
options
.
configs
);
that
.
configs
=
$
.
extend
({},
DEFAULT_CONFIGS
,
options
.
configs
);
that
.
layout
=
{
scrollLeft
:
0
,
scrollTop
:
0
};
that
.
configsCache
=
{};
that
.
userConfigs
=
{};
// states is 2D arrays
that
.
states
=
[]
;
that
.
states
=
$
.
extend
({},
DEFAULT_STATES
,
options
.
states
)
;
that
.
cells
=
[];
that
.
resetData
(
options
.
data
,
options
.
cols
);
...
...
@@ -167,10 +180,10 @@
$cells
.
on
(
'
mouseenter
'
,
'
.datagrid-cell-head
'
,
function
()
{
var
$headCol
=
$
(
this
);
var
colIndex
=
$headCol
.
data
(
'
col
'
);
$
(
'
.datagrid-cell.hover
'
).
removeClass
(
'
hover
'
);
$
(
'
.datagrid-cell[data-col="
'
+
colIndex
+
'
"]
'
).
addClass
(
'
hover
'
);
that
.
$cells
.
find
(
'
.datagrid-cell.hover
'
).
removeClass
(
'
hover
'
);
that
.
$cells
.
find
(
'
.datagrid-cell[data-col="
'
+
colIndex
+
'
"]
'
).
addClass
(
'
hover
'
);
}).
on
(
'
mouseleave
'
,
'
.datagrid-cell-head.hover
'
,
function
()
{
$
(
'
.datagrid-cell.hover
'
).
removeClass
(
'
hover
'
);
that
.
$cells
.
find
(
'
.datagrid-cell.hover
'
).
removeClass
(
'
hover
'
);
});
}
};
...
...
@@ -237,7 +250,7 @@
var
rowIndexWidth
=
options
.
rowIndexWidth
;
var
colsLayout
=
[{
left
:
0
,
width
:
options
.
showRowIndex
?
(
rowIndexWidth
===
'
auto
'
?
((
dataLength
+
''
).
length
*
1
4
+
10
)
:
rowIndexWidth
)
:
0
,
width
:
options
.
showRowIndex
?
(
rowIndexWidth
===
'
auto
'
?
((
dataLength
+
''
).
length
*
1
2
+
10
)
:
rowIndexWidth
)
:
0
,
}];
var
cellsTotalWidth
=
0
;
var
fixedWidth
=
colsLayout
[
0
].
width
;
...
...
@@ -357,17 +370,17 @@
return
cell
;
};
DataGrid
.
prototype
.
getCellBounds
=
function
(
rowIndex
,
colIndex
)
{
var
layout
=
this
.
layout
;
var
colLayout
=
layout
.
cols
[
colIndex
];
var
rowLayout
=
this
.
getRowLayout
(
rowIndex
);
return
{
left
:
colLayout
.
left
,
width
:
colLayout
.
width
,
top
:
rowLayout
.
top
,
height
:
rowLayout
.
height
};
};
//
DataGrid.prototype.getCellBounds = function(rowIndex, colIndex) {
//
var layout = this.layout;
//
var colLayout = layout.cols[colIndex];
//
var rowLayout = this.getRowLayout(rowIndex);
//
return {
//
left: colLayout.left,
//
width: colLayout.width,
//
top: rowLayout.top,
//
height: rowLayout.height
//
};
//
};
DataGrid
.
prototype
.
getRowConfig
=
function
(
rowIndex
)
{
var
that
=
this
;
...
...
@@ -376,6 +389,7 @@
if
(
!
config
)
{
config
=
$
.
extend
({
// height: 'auto'
// fixed: false
},
that
.
configs
[
rowId
],
that
.
userConfigs
[
rowId
]);
that
.
configsCache
[
rowId
]
=
config
;
}
...
...
@@ -389,6 +403,7 @@
if
(
!
config
)
{
config
=
$
.
extend
(
{
// Fixed: false,
// html: false,
// style: null,
// className: '',
...
...
@@ -425,10 +440,10 @@
var
that
=
this
;
var
options
=
that
.
options
;
var
cell
=
that
.
getCell
(
rowIndex
,
colIndex
);
var
elementId
=
[
'
cell
'
,
rowIndex
,
colIndex
].
join
(
'
-
'
);
var
elementId
=
[
that
.
id
,
'
cell
'
,
rowIndex
,
colIndex
].
join
(
'
-
'
);
var
$cell
=
$
(
'
#
'
+
elementId
);
if
(
!
$cell
.
length
)
{
$row
=
$row
||
$
(
'
#row-
'
+
rowIndex
);
$row
=
$row
||
$
(
'
#
'
+
that
.
id
+
'
-
row-
'
+
rowIndex
);
$cell
=
(
options
.
cellCreator
?
options
.
cellCreator
(
cell
,
that
)
:
$
(
'
<div class="datagrid-cell" />
'
)).
appendTo
(
$row
);
$cell
.
attr
({
id
:
elementId
,
...
...
@@ -469,7 +484,7 @@
var
options
=
that
.
options
;
var
rowLayout
=
that
.
getRowLayout
(
rowIndex
);
var
colsLength
=
that
.
layout
.
colsLength
;
var
elementId
=
'
row-
'
+
rowIndex
;
var
elementId
=
that
.
id
+
'
-
row-
'
+
rowIndex
;
var
$row
=
$
(
'
#
'
+
elementId
);
if
(
!
$row
.
length
)
{
$row
=
(
options
.
rowCreator
?
options
.
rowCreator
(
rowIndex
,
that
)
:
$
(
'
<div class="datagrid-row" />
'
)).
appendTo
(
that
.
$cells
);
...
...
@@ -514,7 +529,7 @@
that
.
renderData
();
// Render scrollbars
that
.
renderScroll
bar
s
();
that
.
renderScrolls
();
};
DataGrid
.
prototype
.
setScrollbarOffset
=
function
(
offsetX
,
offsetY
)
{
...
...
@@ -537,7 +552,7 @@
that
.
scroll
(
scrollLeft
,
scrollTop
);
};
DataGrid
.
prototype
.
renderScroll
bar
s
=
function
()
{
DataGrid
.
prototype
.
renderScrolls
=
function
()
{
var
that
=
this
;
var
layout
=
that
.
layout
;
var
vSize
=
layout
.
height
-
layout
.
containerHeight
;
...
...
@@ -586,6 +601,7 @@
};
$bar
.
css
(
barStyle
);
}
that
.
renderFixeds
();
that
.
$cells
.
css
({
top
:
-
layout
.
scrollTop
,
left
:
-
layout
.
scrollLeft
...
...
@@ -594,7 +610,7 @@
DataGrid
.
prototype
.
scroll
=
function
(
scrollLeft
,
scrollTop
)
{
if
(
this
.
scrollLeft
(
scrollLeft
,
true
)
||
this
.
scrollTop
(
scrollTop
,
true
))
{
this
.
renderScroll
bar
s
();
this
.
renderScrolls
();
}
};
...
...
@@ -604,7 +620,7 @@
var
needRender
=
scrollLeft
!==
layout
.
scrollLeft
;
if
(
needRender
)
{
layout
.
scrollLeft
=
scrollLeft
;
if
(
!
notRender
)
this
.
renderScroll
bar
s
();
if
(
!
notRender
)
this
.
renderScrolls
();
}
return
needRender
;
};
...
...
@@ -615,11 +631,88 @@
var
needRender
=
scrollTop
!==
layout
.
scrollTop
;
if
(
needRender
)
{
layout
.
scrollTop
=
scrollTop
;
if
(
!
notRender
)
this
.
renderScroll
bar
s
();
if
(
!
notRender
)
this
.
renderScrolls
();
}
return
needRender
;
};
DataGrid
.
prototype
.
isRowVisible
=
function
(
rowIndex
)
{
};
DataGrid
.
prototype
.
renderFixeds
=
function
()
{
var
that
=
this
;
var
states
=
that
.
states
;
var
layout
=
that
.
layout
;
that
.
$cells
.
find
(
'
.datagrid-fixed
'
).
removeClass
(
'
datagrid-fixed
'
);
that
.
$cells
.
find
(
'
.datagrid-fixed-edge-top
'
).
removeClass
(
'
datagrid-fixed-edge-top
'
);
that
.
$cells
.
find
(
'
.datagrid-fixed-edge-bottom
'
).
removeClass
(
'
datagrid-fixed-edge-bottom
'
);
that
.
$cells
.
find
(
'
.datagrid-fixed-edge-left
'
).
removeClass
(
'
datagrid-fixed-edge-left
'
);
that
.
$cells
.
find
(
'
.datagrid-fixed-edge-right
'
).
removeClass
(
'
datagrid-fixed-edge-right
'
);
var
vScroll
=
layout
.
vScroll
;
var
fixedTopUntil
=
states
.
fixedTopUntil
;
if
(
typeof
fixedTopUntil
===
'
number
'
&&
fixedTopUntil
>
-
1
)
{
fixedTopUntil
=
Math
.
min
(
fixedTopUntil
,
layout
.
rowsLength
);
for
(
var
i
=
0
;
i
<=
fixedTopUntil
;
++
i
)
{
var
rowLayout
=
that
.
getRowLayout
(
i
);
var
$row
=
$
(
'
#
'
+
that
.
id
+
'
-row-
'
+
i
);
var
fixedTop
=
rowLayout
.
top
+
layout
.
scrollTop
;
$row
.
addClass
(
'
datagrid-fixed
'
).
css
(
'
top
'
,
fixedTop
);
if
(
i
===
fixedTopUntil
&&
layout
.
scrollTop
)
{
$row
.
addClass
(
'
datagrid-fixed-edge-top
'
);
}
}
}
else
{
fixedTopUntil
=
-
1
;
}
var
fixedBottomFrom
=
states
.
fixedBottomFrom
;
if
(
typeof
fixedBottomFrom
===
'
number
'
&&
fixedBottomFrom
>
-
1
)
{
fixedBottomFrom
=
Math
.
max
(
fixedTopUntil
>
-
1
?
(
fixedTopUntil
+
1
)
:
1
,
Math
.
min
(
fixedBottomFrom
,
layout
.
rowsLength
));
for
(
var
i
=
fixedBottomFrom
;
i
<
layout
.
rowsLength
;
++
i
)
{
var
rowLayout
=
that
.
getRowLayout
(
i
);
var
$row
=
$
(
'
#
'
+
that
.
id
+
'
-row-
'
+
i
);
var
fixedTop
=
rowLayout
.
top
-
vScroll
.
size
+
layout
.
scrollTop
;
$row
.
addClass
(
'
datagrid-fixed
'
).
css
(
'
top
'
,
fixedTop
);
if
(
i
===
fixedBottomFrom
&&
layout
.
scrollTop
<
vScroll
.
size
)
{
$row
.
addClass
(
'
datagrid-fixed-edge-bottom
'
);
}
}
}
var
hScroll
=
layout
.
hScroll
;
var
fixedLeftUntil
=
states
.
fixedLeftUntil
;
if
(
typeof
fixedLeftUntil
===
'
number
'
&&
fixedLeftUntil
>
-
1
)
{
fixedLeftUntil
=
Math
.
min
(
fixedLeftUntil
,
layout
.
colsLength
);
for
(
var
i
=
0
;
i
<=
fixedLeftUntil
;
++
i
)
{
var
colLayout
=
layout
.
cols
[
i
];
var
$cols
=
that
.
$cells
.
find
(
'
.datagrid-cell[data-col="
'
+
i
+
'
"]
'
);
var
fixedLeft
=
colLayout
.
left
+
layout
.
scrollLeft
-
layout
.
borderWidth
;
$cols
.
addClass
(
'
datagrid-fixed
'
).
css
(
'
left
'
,
fixedLeft
);
if
(
i
===
fixedLeftUntil
&&
layout
.
scrollLeft
)
{
$cols
.
addClass
(
'
datagrid-fixed-edge-left
'
);
}
}
}
else
{
fixedLeftUntil
=
-
1
;
}
var
fixedRightFrom
=
states
.
fixedRightFrom
;
if
(
typeof
fixedRightFrom
===
'
number
'
&&
fixedRightFrom
>
-
1
)
{
fixedRightFrom
=
Math
.
max
(
fixedLeftUntil
>
-
1
?
(
fixedLeftUntil
+
1
)
:
1
,
Math
.
min
(
fixedRightFrom
,
layout
.
colsLength
));
console
.
log
(
'
fixedRightFrom
'
,
fixedRightFrom
);
for
(
var
i
=
fixedRightFrom
;
i
<
layout
.
colsLength
;
++
i
)
{
var
colLayout
=
layout
.
cols
[
i
];
console
.
log
(
'
colLayout
'
,
colLayout
,
i
);
var
$cols
=
that
.
$cells
.
find
(
'
.datagrid-cell[data-col="
'
+
i
+
'
"]
'
);
var
fixedLeft
=
colLayout
.
left
-
hScroll
.
size
+
layout
.
scrollLeft
;
$cols
.
addClass
(
'
datagrid-fixed
'
).
css
(
'
left
'
,
fixedLeft
);
if
(
i
===
fixedRightFrom
&&
layout
.
scrollLeft
<
hScroll
.
size
)
{
$cols
.
addClass
(
'
datagrid-fixed-edge-right
'
);
}
}
}
};
// default options
DataGrid
.
DEFAULTS
=
{
// The data grid width, if set 'auto', then use the container element width
...
...
@@ -635,10 +728,10 @@
data
:
[],
// The cells configurations
configs
:
{}
,
configs
:
null
,
// The cells default states
states
:
{}
,
states
:
null
,
// Cell default height
rowDefaultHeight
:
30
,
...
...
@@ -689,7 +782,7 @@
responsive
:
true
,
// Value operator
valueOperator
:
{}
,
valueOperator
:
null
,
// Default date formater
defaultDateFormater
:
'
yyyy-MM-dd hh:mm
'
...
...
src/less/views/datagrid.less
浏览文件 @
7d3a9cc1
...
...
@@ -7,8 +7,12 @@
// Variables
@hover-cell-zIndex: 30;
@hover-row-zIndex: 20;
@fixed-cell-zIndex: 30;
@fixed-row-zIndex: 35;
@fixed-hover-row-zIndex: 38;
@hover-cell-zIndex: 40;
@fixed-row-hover-cell-zIndex: 42;
@scrollbar-zIndex: 50;
...
...
@@ -25,8 +29,8 @@
position: absolute;
left: 0;
top: 0;
transition: @animation-speed-fast @animation-type;
transition-property: left, top;
//
transition: @animation-speed-fast @animation-type;
//
transition-property: left, top;
}
.datagrid-cell {
overflow: hidden;
...
...
@@ -35,6 +39,7 @@
border: 1px solid @color-gray-light;
transition: @animation-speed-normal @animation-type;
transition-property: background, outline;
background-color: @color-white;
&.datagrid-cell-index {
background-color: @color-gray-pale;
...
...
@@ -42,6 +47,10 @@
text-align: right;
font-family: @font-family-monospace;
}
&.datagrid-cell-head {
background-color: @color-gray-pale;
}
}
.datagrid-row {
...
...
@@ -57,11 +66,39 @@
color: @color-gray;
}
.datagrid-fixed {
&.datagrid-row {
z-index: @fixed-row-zIndex;
}
&.datagrid-cell {
z-index: @fixed-cell-zIndex;
}
}
.datagrid-fixed-edge-top {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.125), 0 1px 0 rgba(0, 0, 0, 0.25);
}
.datagrid-fixed-edge-bottom {
box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.125), 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datagrid-fixed-edge-left {
box-shadow: -1px 0 0 rgba(0, 0, 0, 0.25) inset;
}
.datagrid-fixed-edge-right {
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.25) inset;
}
.datagrid-hover-row {
.datagrid-row-cell:hover {
background-color: @color-pale;
z-index: @hover-row-zIndex;
.datagrid-cell {
background-color: @color-pale;
}
&.datagrid-fixed {
z-index: @fixed-hover-row-zIndex;
}
> .datagrid-cell-index {
background-color: @color-gray-light;
}
...
...
@@ -79,6 +116,11 @@
background-color: @color-white;
}
.datagrid-row-cell .datagrid-cell-cell.datagrid-fixed:hover,
.datagrid-row-cell.datagrid-fixed .datagrid-cell-cell:hover {
z-index: @fixed-row-hover-cell-zIndex;
}
&.datagrid-hover-shadow .datagrid-row-cell .datagrid-cell:hover {
box-shadow: 0 1px 3px 3px rgba(0,0,0,.075), 0 0px 2px rgba(0,0,0,.1);
}
...
...
@@ -99,7 +141,7 @@
bottom: 0;
right: 0;
opacity: 0;
transition:
1
s @animation-type;
transition:
2.5
s @animation-type;
transition-property: background, opacity;
z-index: @scrollbar-zIndex;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录