Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zzx_123123
zui
提交
66a4e4b9
Z
zui
项目概览
zzx_123123
/
zui
与 Fork 源项目一致
Fork自
易企天创 / zui
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
66a4e4b9
编写于
5月 12, 2020
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* picker support sortValuesByDnd option.
上级
f43781c1
变更
6
展开全部
显示空白变更内容
内联
并排
Showing
6 changed file
with
136 addition
and
80 deletion
+136
-80
dist/lib/picker/zui.picker.css
dist/lib/picker/zui.picker.css
+4
-1
dist/lib/picker/zui.picker.js
dist/lib/picker/zui.picker.js
+62
-38
dist/lib/picker/zui.picker.min.css
dist/lib/picker/zui.picker.min.css
+2
-2
dist/lib/picker/zui.picker.min.js
dist/lib/picker/zui.picker.min.js
+2
-2
src/js/picker.js
src/js/picker.js
+61
-37
src/less/components/picker.less
src/less/components/picker.less
+5
-0
未找到文件。
dist/lib/picker/zui.picker.css
浏览文件 @
66a4e4b9
/*!
* ZUI: 选择器 - v1.9.1 - 2020-05-1
1
* ZUI: 选择器 - v1.9.1 - 2020-05-1
2
* http://openzui.com
* GitHub: https://github.com/easysoft/zui.git
* Copyright (c) 2020 cnezsoft.com; Licensed MIT
...
...
@@ -151,6 +151,9 @@
.picker-single.picker-focus
.picker-selection-remove
{
display
:
none
;
}
.picker-multi.picker-sortable
.picker-selection-text
{
cursor
:
move
;
}
.picker-search
{
color
:
transparent
;
background
:
none
;
...
...
dist/lib/picker/zui.picker.js
浏览文件 @
66a4e4b9
/*!
* ZUI: 选择器 - v1.9.1 - 2020-05-1
1
* ZUI: 选择器 - v1.9.1 - 2020-05-1
2
* http://openzui.com
* GitHub: https://github.com/easysoft/zui.git
* Copyright (c) 2020 cnezsoft.com; Licensed MIT
...
...
@@ -14,7 +14,6 @@
/**
* TODO:
* * Option: sortMultiValuesByDnd
* * 优化展开时滚动到选中项体验
*/
...
...
@@ -61,7 +60,7 @@
searchDelay
:
200
,
fixLabelFor
:
true
,
hotkey
:
true
,
// sort
Multi
ValuesByDnd: false,
// sortValuesByDnd: false,
// defaultValue: null,
onSelect
:
null
,
// function({value, picker}),
onDeselect
:
null
,
// function({value, picker}),
...
...
@@ -294,10 +293,33 @@
return
;
}
}).
on
(
'
mouseup
'
,
function
(
e
)
{
if
(
!
$
(
e
.
target
).
closest
(
'
.picker-selection-remove
'
).
length
&&
!
that
.
dropListShowed
)
{
if
(
!
$
selections
.
hasClass
(
'
sortable-sorting
'
)
&&
!
$
(
e
.
target
).
closest
(
'
.picker-selection-remove
'
).
length
&&
!
that
.
dropListShowed
)
{
that
.
focus
();
}
});
var
sortValuesByDnd
=
options
.
sortValuesByDnd
;
if
(
sortValuesByDnd
&&
$
.
fn
.
sortable
)
{
$container
.
addClass
(
'
picker-sortable
'
);
var
sortableOptions
=
{
selector
:
'
.picker-selection
'
,
stopPropagation
:
true
,
start
:
function
()
{
that
.
hideDropList
();
},
finish
:
function
(
e
)
{
var
values
=
[];
$
.
each
(
e
.
list
,
function
(
_
,
ele
)
{
values
.
push
(
ele
.
item
.
data
(
'
value
'
));
});
that
.
setValue
(
values
,
false
,
true
);
}
};
if
(
typeof
sortValuesByDnd
===
'
object
'
)
{
$
.
extend
(
sortableOptions
,
sortValuesByDnd
);
}
$selections
.
sortable
(
sortableOptions
);
}
}
$selections
.
on
(
'
click
'
,
'
.picker-selection-remove
'
,
function
(
e
)
{
if
(
that
.
multi
)
{
...
...
@@ -990,7 +1012,7 @@
}
};
Picker
.
prototype
.
setValue
=
function
(
value
,
silent
)
{
Picker
.
prototype
.
setValue
=
function
(
value
,
silent
,
skipRenderSelections
)
{
var
that
=
this
;
var
options
=
that
.
options
;
...
...
@@ -1048,7 +1070,8 @@
}
$formItem
.
val
(
value
);
// Update container
// Update selections
if
(
!
skipRenderSelections
)
{
var
hasValue
=
false
;
if
(
that
.
multi
)
{
var
$selections
=
that
.
$selections
;
...
...
@@ -1082,6 +1105,7 @@
that
.
$singleSelection
.
find
(
'
.picker-selection-text
'
).
text
(
hasValue
?
item
[
options
.
textKey
]
:
''
);
}
that
.
$container
.
toggleClass
(
'
picker-no-value
'
,
!
hasValue
).
toggleClass
(
'
picker-has-value
'
,
hasValue
);
}
if
(
that
.
dropListShowed
)
{
that
.
renderOptionsList
();
...
...
dist/lib/picker/zui.picker.min.css
浏览文件 @
66a4e4b9
/*!
* ZUI: 选择器 - v1.9.1 - 2020-05-1
1
* ZUI: 选择器 - v1.9.1 - 2020-05-1
2
* http://openzui.com
* GitHub: https://github.com/easysoft/zui.git
* Copyright (c) 2020 cnezsoft.com; Licensed MIT
*/
.picker
{
min-height
:
32px
;
background-color
:
#eee
}
.picker
:not
(
.picker-ready
)>*
{
display
:
none
}
.picker-selections
{
position
:
relative
;
min-height
:
32px
;
color
:
#222
;
background-color
:
#fff
;
border
:
1px
solid
#ccc
;
border-radius
:
4px
;
-webkit-box-shadow
:
inset
0
1px
1px
rgba
(
0
,
0
,
0
,
.075
);
box-shadow
:
inset
0
1px
1px
rgba
(
0
,
0
,
0
,
.075
)}
.picker-focus
.picker-selections
{
border-color
:
#145ccd
;
-webkit-box-shadow
:
inset
0
1px
1px
rgba
(
0
,
0
,
0
,
.075
),
0
0
8px
rgba
(
20
,
92
,
205
,
.6
);
box-shadow
:
inset
0
1px
1px
rgba
(
0
,
0
,
0
,
.075
),
0
0
8px
rgba
(
20
,
92
,
205
,
.6
)}
.picker-multi
.picker-selections
{
padding
:
3px
}
.picker-multi.picker-focus
.picker-selections
:before
{
position
:
absolute
;
right
:
0
;
bottom
:
8px
;
display
:
block
;
width
:
24px
;
height
:
14px
;
font-family
:
ZenIcon
;
font-size
:
14px
;
font-style
:
normal
;
font-weight
:
400
;
font-variant
:
normal
;
line-height
:
1
;
text-align
:
center
;
text-transform
:
none
;
content
:
'\e603'
;
opacity
:
.4
;
speak
:
none
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
}
.picker-multi.picker-focus.picker-loading
.picker-selections
::before
{
display
:
inline-block
;
content
:
'\e97c'
;
-webkit-animation
:
spin
2s
infinite
linear
;
-o-animation
:
spin
2s
infinite
linear
;
animation
:
spin
2s
infinite
linear
}
.picker-multi
.picker-selection
{
position
:
relative
;
display
:
inline-block
;
padding
:
0
20px
0
5px
;
margin
:
2px
;
line-height
:
18px
;
background-color
:
#f1f1f1
;
-webkit-background-clip
:
padding-box
;
background-clip
:
padding-box
;
border
:
1px
solid
#ddd
;
border-radius
:
3px
;
-webkit-box-shadow
:
0
0
2px
#fff
inset
,
0
1px
0
rgba
(
0
,
0
,
0
,
.05
);
box-shadow
:
0
0
2px
#fff
inset
,
0
1px
0
rgba
(
0
,
0
,
0
,
.05
)}
.picker-selection-single
{
max-width
:
100%
;
padding
:
5px
20px
5px
8px
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
}
.picker-focus
.picker-selection-single
.picker-selection-text
{
display
:
none
}
.picker-selection-single
:after
{
position
:
absolute
;
top
:
7px
;
right
:
0
;
display
:
block
;
width
:
24px
;
height
:
14px
;
font-family
:
ZenIcon
;
font-size
:
14px
;
font-style
:
normal
;
font-weight
:
400
;
font-variant
:
normal
;
line-height
:
1
;
text-align
:
center
;
text-transform
:
none
;
content
:
'\e6b8'
;
opacity
:
.4
;
speak
:
none
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
}
.picker-focus
.picker-selection-single
::after
{
content
:
'\e603'
}
.picker-focus.picker-loading
.picker-selection-single
::after
{
display
:
inline-block
;
content
:
'\e97c'
;
-webkit-animation
:
spin
2s
infinite
linear
;
-o-animation
:
spin
2s
infinite
linear
;
animation
:
spin
2s
infinite
linear
}
.picker-selection-remove
{
position
:
absolute
;
top
:
0
;
right
:
0
;
width
:
20px
;
height
:
20px
;
text-align
:
center
;
cursor
:
pointer
;
opacity
:
.2
}
.picker-selection-remove
:before
{
font-family
:
ZenIcon
;
font-size
:
14px
;
font-style
:
normal
;
font-weight
:
400
;
font-variant
:
normal
;
line-height
:
1
;
text-shadow
:
0
1px
0
#fff
;
text-transform
:
none
;
content
:
'\d7'
;
speak
:
none
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
}
.picker-selection-remove
:hover
{
opacity
:
.5
}
.picker-single
.picker-selection-remove
{
top
:
5px
;
right
:
20px
}
.picker-no-value
.picker-selection-remove
,
.picker-single.picker-focus
.picker-selection-remove
{
display
:
none
}
.picker-search
{
color
:
transparent
;
background
:
0
0
;
border
:
none
}
.picker-search
:focus
{
color
:
inherit
;
outline
:
0
}
.picker-single
.picker-search
{
position
:
absolute
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
z-index
:
1
;
width
:
100%
;
padding
:
5px
8px
}
.picker-multi
.picker-search
{
display
:
inline-block
;
width
:
10px
;
min-width
:
10px
;
max-width
:
100%
;
padding
:
0
2px
;
margin
:
2px
0
}
.picker-placeholder
{
position
:
absolute
;
top
:
5px
;
right
:
20px
;
left
:
8px
;
z-index
:
0
;
display
:
none
;
overflow
:
hidden
;
color
:
grey
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
}
.picker-no-value.picker-focus
.picker-placeholder
{
display
:
none
}
.picker-input-empty.picker-focus.picker-no-value
.picker-placeholder
,
.picker-no-value
.picker-placeholder
{
display
:
block
}
.picker-drop-menu
{
position
:
fixed
;
z-index
:
1200
;
display
:
none
;
min-width
:
100px
;
background-color
:
#fff
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
.15
);
border-radius
:
4px
;
-webkit-box-shadow
:
0
6px
12px
rgba
(
0
,
0
,
0
,
.12
),
0
1px
3px
rgba
(
0
,
0
,
0
,
.1
);
box-shadow
:
0
6px
12px
rgba
(
0
,
0
,
0
,
.12
),
0
1px
3px
rgba
(
0
,
0
,
0
,
.1
);
opacity
:
0
}
.picker-drop-menu.picker-drop-show
{
display
:
block
}
.picker-drop-menu.picker-has-message
{
min-height
:
22px
;
padding-bottom
:
22px
}
.picker-option-list
{
padding
:
5px
0
;
margin
:
0
;
overflow-y
:
auto
}
.picker-no-options
.picker-option-list
{
display
:
none
}
.picker-option
{
display
:
block
;
min-height
:
30px
;
padding
:
5px
10px
;
overflow
:
hidden
;
clear
:
both
;
font-weight
:
400
;
line-height
:
1.53846154
;
color
:
#353535
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
-webkit-transition
:
none
;
-o-transition
:
none
;
transition
:
none
}
.picker-single
.picker-option.picker-option-selected
{
color
:
#3280fc
;
background
:
#ebf2f9
}
.picker-option
:focus
,
.picker-option
:hover
{
text-decoration
:
none
}
.picker-option.picker-option-active
,
.picker-single
.picker-option.picker-option-selected.picker-option-active
{
color
:
#fff
;
background-color
:
#3280fc
}
.picker-multi
.picker-option.picker-option-selected
,
.picker-multi
.picker-option.picker-option-selected.picker-option-active
{
color
:
#ccc
;
cursor
:
not-allowed
;
background-color
:
#fff
}
.picker-option-text-matched
{
position
:
relative
;
color
:
#3280fc
}
.picker-option-text-matched
:before
{
position
:
absolute
;
right
:
0
;
bottom
:
-4px
;
left
:
0
;
display
:
block
;
height
:
3px
;
content
:
' '
;
background-color
:
#3280fc
;
border-radius
:
2px
;
opacity
:
.5
}
.picker-option-active
.picker-option-text-matched
,
.picker-option
:hover
.picker-option-text-matched
{
color
:
#fff
}
.picker-option-active
.picker-option-text-matched
:before
,
.picker-option
:hover
.picker-option-text-matched
:before
{
background-color
:
#fff
}
.picker-message
{
position
:
absolute
;
right
:
0
;
bottom
:
0
;
left
:
0
;
display
:
none
;
height
:
22px
;
padding
:
2px
5px
;
overflow
:
hidden
;
font-size
:
12px
;
color
:
grey
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
background-color
:
#f1f1f1
}
.picker-has-message
.picker-message
{
display
:
block
}
.picker-message
[
data-type
=
danger
]
{
color
:
#ea644a
}
\ No newline at end of file
*/
.picker
{
min-height
:
32px
;
background-color
:
#eee
}
.picker
:not
(
.picker-ready
)>*
{
display
:
none
}
.picker-selections
{
position
:
relative
;
min-height
:
32px
;
color
:
#222
;
background-color
:
#fff
;
border
:
1px
solid
#ccc
;
border-radius
:
4px
;
-webkit-box-shadow
:
inset
0
1px
1px
rgba
(
0
,
0
,
0
,
.075
);
box-shadow
:
inset
0
1px
1px
rgba
(
0
,
0
,
0
,
.075
)}
.picker-focus
.picker-selections
{
border-color
:
#145ccd
;
-webkit-box-shadow
:
inset
0
1px
1px
rgba
(
0
,
0
,
0
,
.075
),
0
0
8px
rgba
(
20
,
92
,
205
,
.6
);
box-shadow
:
inset
0
1px
1px
rgba
(
0
,
0
,
0
,
.075
),
0
0
8px
rgba
(
20
,
92
,
205
,
.6
)}
.picker-multi
.picker-selections
{
padding
:
3px
}
.picker-multi.picker-focus
.picker-selections
:before
{
position
:
absolute
;
right
:
0
;
bottom
:
8px
;
display
:
block
;
width
:
24px
;
height
:
14px
;
font-family
:
ZenIcon
;
font-size
:
14px
;
font-style
:
normal
;
font-weight
:
400
;
font-variant
:
normal
;
line-height
:
1
;
text-align
:
center
;
text-transform
:
none
;
content
:
'\e603'
;
opacity
:
.4
;
speak
:
none
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
}
.picker-multi.picker-focus.picker-loading
.picker-selections
::before
{
display
:
inline-block
;
content
:
'\e97c'
;
-webkit-animation
:
spin
2s
infinite
linear
;
-o-animation
:
spin
2s
infinite
linear
;
animation
:
spin
2s
infinite
linear
}
.picker-multi
.picker-selection
{
position
:
relative
;
display
:
inline-block
;
padding
:
0
20px
0
5px
;
margin
:
2px
;
line-height
:
18px
;
background-color
:
#f1f1f1
;
-webkit-background-clip
:
padding-box
;
background-clip
:
padding-box
;
border
:
1px
solid
#ddd
;
border-radius
:
3px
;
-webkit-box-shadow
:
0
0
2px
#fff
inset
,
0
1px
0
rgba
(
0
,
0
,
0
,
.05
);
box-shadow
:
0
0
2px
#fff
inset
,
0
1px
0
rgba
(
0
,
0
,
0
,
.05
)}
.picker-selection-single
{
max-width
:
100%
;
padding
:
5px
20px
5px
8px
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
}
.picker-focus
.picker-selection-single
.picker-selection-text
{
display
:
none
}
.picker-selection-single
:after
{
position
:
absolute
;
top
:
7px
;
right
:
0
;
display
:
block
;
width
:
24px
;
height
:
14px
;
font-family
:
ZenIcon
;
font-size
:
14px
;
font-style
:
normal
;
font-weight
:
400
;
font-variant
:
normal
;
line-height
:
1
;
text-align
:
center
;
text-transform
:
none
;
content
:
'\e6b8'
;
opacity
:
.4
;
speak
:
none
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
}
.picker-focus
.picker-selection-single
::after
{
content
:
'\e603'
}
.picker-focus.picker-loading
.picker-selection-single
::after
{
display
:
inline-block
;
content
:
'\e97c'
;
-webkit-animation
:
spin
2s
infinite
linear
;
-o-animation
:
spin
2s
infinite
linear
;
animation
:
spin
2s
infinite
linear
}
.picker-selection-remove
{
position
:
absolute
;
top
:
0
;
right
:
0
;
width
:
20px
;
height
:
20px
;
text-align
:
center
;
cursor
:
pointer
;
opacity
:
.2
}
.picker-selection-remove
:before
{
font-family
:
ZenIcon
;
font-size
:
14px
;
font-style
:
normal
;
font-weight
:
400
;
font-variant
:
normal
;
line-height
:
1
;
text-shadow
:
0
1px
0
#fff
;
text-transform
:
none
;
content
:
'\d7'
;
speak
:
none
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
}
.picker-selection-remove
:hover
{
opacity
:
.5
}
.picker-single
.picker-selection-remove
{
top
:
5px
;
right
:
20px
}
.picker-no-value
.picker-selection-remove
,
.picker-single.picker-focus
.picker-selection-remove
{
display
:
none
}
.picker-multi.picker-sortable
.picker-selection-text
{
cursor
:
move
}
.picker-search
{
color
:
transparent
;
background
:
0
0
;
border
:
none
}
.picker-search
:focus
{
color
:
inherit
;
outline
:
0
}
.picker-single
.picker-search
{
position
:
absolute
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
z-index
:
1
;
width
:
100%
;
padding
:
5px
8px
}
.picker-multi
.picker-search
{
display
:
inline-block
;
width
:
10px
;
min-width
:
10px
;
max-width
:
100%
;
padding
:
0
2px
;
margin
:
2px
0
}
.picker-placeholder
{
position
:
absolute
;
top
:
5px
;
right
:
20px
;
left
:
8px
;
z-index
:
0
;
display
:
none
;
overflow
:
hidden
;
color
:
grey
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
}
.picker-no-value.picker-focus
.picker-placeholder
{
display
:
none
}
.picker-input-empty.picker-focus.picker-no-value
.picker-placeholder
,
.picker-no-value
.picker-placeholder
{
display
:
block
}
.picker-drop-menu
{
position
:
fixed
;
z-index
:
1200
;
display
:
none
;
min-width
:
100px
;
background-color
:
#fff
;
border
:
1px
solid
rgba
(
0
,
0
,
0
,
.15
);
border-radius
:
4px
;
-webkit-box-shadow
:
0
6px
12px
rgba
(
0
,
0
,
0
,
.12
),
0
1px
3px
rgba
(
0
,
0
,
0
,
.1
);
box-shadow
:
0
6px
12px
rgba
(
0
,
0
,
0
,
.12
),
0
1px
3px
rgba
(
0
,
0
,
0
,
.1
);
opacity
:
0
}
.picker-drop-menu.picker-drop-show
{
display
:
block
}
.picker-drop-menu.picker-has-message
{
min-height
:
22px
;
padding-bottom
:
22px
}
.picker-option-list
{
padding
:
5px
0
;
margin
:
0
;
overflow-y
:
auto
}
.picker-no-options
.picker-option-list
{
display
:
none
}
.picker-option
{
display
:
block
;
min-height
:
30px
;
padding
:
5px
10px
;
overflow
:
hidden
;
clear
:
both
;
font-weight
:
400
;
line-height
:
1.53846154
;
color
:
#353535
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
-webkit-transition
:
none
;
-o-transition
:
none
;
transition
:
none
}
.picker-single
.picker-option.picker-option-selected
{
color
:
#3280fc
;
background
:
#ebf2f9
}
.picker-option
:focus
,
.picker-option
:hover
{
text-decoration
:
none
}
.picker-option.picker-option-active
,
.picker-single
.picker-option.picker-option-selected.picker-option-active
{
color
:
#fff
;
background-color
:
#3280fc
}
.picker-multi
.picker-option.picker-option-selected
,
.picker-multi
.picker-option.picker-option-selected.picker-option-active
{
color
:
#ccc
;
cursor
:
not-allowed
;
background-color
:
#fff
}
.picker-option-text-matched
{
position
:
relative
;
color
:
#3280fc
}
.picker-option-text-matched
:before
{
position
:
absolute
;
right
:
0
;
bottom
:
-4px
;
left
:
0
;
display
:
block
;
height
:
3px
;
content
:
' '
;
background-color
:
#3280fc
;
border-radius
:
2px
;
opacity
:
.5
}
.picker-option-active
.picker-option-text-matched
,
.picker-option
:hover
.picker-option-text-matched
{
color
:
#fff
}
.picker-option-active
.picker-option-text-matched
:before
,
.picker-option
:hover
.picker-option-text-matched
:before
{
background-color
:
#fff
}
.picker-message
{
position
:
absolute
;
right
:
0
;
bottom
:
0
;
left
:
0
;
display
:
none
;
height
:
22px
;
padding
:
2px
5px
;
overflow
:
hidden
;
font-size
:
12px
;
color
:
grey
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
background-color
:
#f1f1f1
}
.picker-has-message
.picker-message
{
display
:
block
}
.picker-message
[
data-type
=
danger
]
{
color
:
#ea644a
}
\ No newline at end of file
dist/lib/picker/zui.picker.min.js
浏览文件 @
66a4e4b9
此差异已折叠。
点击以展开。
src/js/picker.js
浏览文件 @
66a4e4b9
...
...
@@ -7,7 +7,6 @@
/**
* TODO:
* * Option: sortMultiValuesByDnd
* * 优化展开时滚动到选中项体验
*/
...
...
@@ -54,7 +53,7 @@
searchDelay
:
200
,
fixLabelFor
:
true
,
hotkey
:
true
,
// sort
Multi
ValuesByDnd: false,
// sortValuesByDnd: false,
// defaultValue: null,
onSelect
:
null
,
// function({value, picker}),
onDeselect
:
null
,
// function({value, picker}),
...
...
@@ -287,10 +286,33 @@
return
;
}
}).
on
(
'
mouseup
'
,
function
(
e
)
{
if
(
!
$
(
e
.
target
).
closest
(
'
.picker-selection-remove
'
).
length
&&
!
that
.
dropListShowed
)
{
if
(
!
$
selections
.
hasClass
(
'
sortable-sorting
'
)
&&
!
$
(
e
.
target
).
closest
(
'
.picker-selection-remove
'
).
length
&&
!
that
.
dropListShowed
)
{
that
.
focus
();
}
});
var
sortValuesByDnd
=
options
.
sortValuesByDnd
;
if
(
sortValuesByDnd
&&
$
.
fn
.
sortable
)
{
$container
.
addClass
(
'
picker-sortable
'
);
var
sortableOptions
=
{
selector
:
'
.picker-selection
'
,
stopPropagation
:
true
,
start
:
function
()
{
that
.
hideDropList
();
},
finish
:
function
(
e
)
{
var
values
=
[];
$
.
each
(
e
.
list
,
function
(
_
,
ele
)
{
values
.
push
(
ele
.
item
.
data
(
'
value
'
));
});
that
.
setValue
(
values
,
false
,
true
);
}
};
if
(
typeof
sortValuesByDnd
===
'
object
'
)
{
$
.
extend
(
sortableOptions
,
sortValuesByDnd
);
}
$selections
.
sortable
(
sortableOptions
);
}
}
$selections
.
on
(
'
click
'
,
'
.picker-selection-remove
'
,
function
(
e
)
{
if
(
that
.
multi
)
{
...
...
@@ -983,7 +1005,7 @@
}
};
Picker
.
prototype
.
setValue
=
function
(
value
,
silent
)
{
Picker
.
prototype
.
setValue
=
function
(
value
,
silent
,
skipRenderSelections
)
{
var
that
=
this
;
var
options
=
that
.
options
;
...
...
@@ -1041,7 +1063,8 @@
}
$formItem
.
val
(
value
);
// Update container
// Update selections
if
(
!
skipRenderSelections
)
{
var
hasValue
=
false
;
if
(
that
.
multi
)
{
var
$selections
=
that
.
$selections
;
...
...
@@ -1075,6 +1098,7 @@
that
.
$singleSelection
.
find
(
'
.picker-selection-text
'
).
text
(
hasValue
?
item
[
options
.
textKey
]
:
''
);
}
that
.
$container
.
toggleClass
(
'
picker-no-value
'
,
!
hasValue
).
toggleClass
(
'
picker-has-value
'
,
hasValue
);
}
if
(
that
.
dropListShowed
)
{
that
.
renderOptionsList
();
...
...
src/less/components/picker.less
浏览文件 @
66a4e4b9
...
...
@@ -116,6 +116,11 @@
display: none;
}
}
.picker-selection-text {
.picker-multi.picker-sortable & {
cursor: move;
}
}
.picker-search {
border: none;
background: none;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录