mirror of https://github.com/layui/layui
Merge branch 'main' into 2.x
贤心
commit
90e0cb3605
|
|
@ -24,6 +24,7 @@ toc: true
|
||||||
| [dropdown.reload(id, options)](#reload) | 完整重载 |
|
| [dropdown.reload(id, options)](#reload) | 完整重载 |
|
||||||
| [dropdown.reloadData(id, options)](#reload) <sup>2.8+</sup> | 仅重载数据或内容 |
|
| [dropdown.reloadData(id, options)](#reload) <sup>2.8+</sup> | 仅重载数据或内容 |
|
||||||
| [dropdown.close(id)](#close) | 关闭对应的组件面板 |
|
| [dropdown.close(id)](#close) | 关闭对应的组件面板 |
|
||||||
|
| [dropdown.open(id)](#open) <sup>2.9.8+</sup> | 打开对应的组件面板 |
|
||||||
|
|
||||||
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
|
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
|
||||||
|
|
||||||
|
|
@ -155,3 +156,25 @@ dropdown.render({
|
||||||
// 关闭对应的组件面板
|
// 关闭对应的组件面板
|
||||||
dropdown.close('test');
|
dropdown.close('test');
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
<h3 id="open" lay-pid="api" class="ws-anchor ws-bold">打开面板 <sup>2.9.8+</sup></h3>
|
||||||
|
|
||||||
|
`dropdown.open(id);`
|
||||||
|
|
||||||
|
- 参数 `id` : 组件渲染时定义的 `id` 属性值
|
||||||
|
|
||||||
|
该方法用于打开对应的 `dropdown` 组件面板。
|
||||||
|
|
||||||
|
```
|
||||||
|
var dropdown = layui.dropdown;
|
||||||
|
|
||||||
|
// 渲染
|
||||||
|
dropdown.render({
|
||||||
|
elem: '', // 绑定元素选择器
|
||||||
|
id: 'test', // 自定义 id
|
||||||
|
// 其他属性 …
|
||||||
|
});
|
||||||
|
// 打开对应的组件面板
|
||||||
|
dropdown.open('test');
|
||||||
|
```
|
||||||
|
|
@ -39,7 +39,7 @@ layui.use(function(){
|
||||||
- 属性 `checked` 可设置默认选中
|
- 属性 `checked` 可设置默认选中
|
||||||
- 属性 `disabled` 可设置禁用状态
|
- 属性 `disabled` 可设置禁用状态
|
||||||
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）
|
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）
|
||||||
- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，默认风格可不填
|
- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，`none`(无样式)<sup>2.9.8+</sup> 默认风格可不填
|
||||||
|
|
||||||
特别地，当表单提交时，只有选中状态的复选框才能获取到 `value`，这点和浏览器原有的复选框机制相同。
|
特别地，当表单提交时，只有选中状态的复选框才能获取到 `value`，这点和浏览器原有的复选框机制相同。
|
||||||
|
|
||||||
|
|
@ -85,7 +85,7 @@ layui.use(function(){
|
||||||
在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题
|
在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题
|
||||||
|
|
||||||
|
|
||||||
<h2 id="title" lay-toc="{hot: true}">标题模板 <sup>2.8.3+</sup></h2>
|
<h2 id="title" lay-toc="{}">自定义标题模板 <sup>2.8.3+</sup></h2>
|
||||||
|
|
||||||
在 `checkbox` 元素后的相邻元素设置特定属性 `lay-checkbox`，可以与 `checkbox` 标题进行绑定。
|
在 `checkbox` 元素后的相邻元素设置特定属性 `lay-checkbox`，可以与 `checkbox` 标题进行绑定。
|
||||||
|
|
||||||
|
|
@ -119,6 +119,19 @@ layui.use(function(){
|
||||||
</textarea>
|
</textarea>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
<h2 id="skin" lay-toc="{hot: true}">自定义任意风格 <sup>2.9.8+</sup></h2>
|
||||||
|
|
||||||
|
通过对 `checkbox` 元素设置 `lay-skin="none"` 属性禁用默认样式，从而实现任意风格的多选组件。<br>
|
||||||
|
**注：** 这意味着你需要掌握一定的 `CSS` 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。
|
||||||
|
|
||||||
|
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||||
|
obj.render();
|
||||||
|
}}">
|
||||||
|
<textarea>
|
||||||
|
{{- d.include("/form/examples/checkbox.skin.md") }}
|
||||||
|
</textarea>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
|
||||||
<h2 id="on" lay-toc="{hot: true}">复选框事件</h2>
|
<h2 id="on" lay-toc="{hot: true}">复选框事件</h2>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,91 @@
|
||||||
|
<!--
|
||||||
|
以下示例仅用于演示 lay-skin="none" 用法，仅支持 webkit 系浏览器，任何样式或兼容性问题请自行解决
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div class="layui-form" lay-filter="form-demo-skin">
|
||||||
|
{{- d.include("/form/examples/checkboxAndRadio.style.md") }}
|
||||||
|
<h3 class="ws-bold">自定义“卡片风格”的多选组件</h3>
|
||||||
|
<div class="layui-row layui-col-space8">
|
||||||
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||||
|
<input type="checkbox" name="browser[0]" value="chrome" lay-skin="none">
|
||||||
|
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||||
|
<div class="lay-skin-checkcard-avatar">
|
||||||
|
<i class="layui-icon layui-icon-chrome" style="font-size: 30px"></i>
|
||||||
|
</div>
|
||||||
|
<div class="lay-skin-checkcard-detail">
|
||||||
|
<div class="lay-skin-checkcard-header">Chrome</div>
|
||||||
|
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||||
|
由 Google 公司开发的网页浏览器，被大多数人所使用。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||||
|
<input type="checkbox" name="browser[1]" value="edge" lay-skin="none" checked>
|
||||||
|
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||||
|
<div class="lay-skin-checkcard-avatar">
|
||||||
|
<i class="layui-icon layui-icon-edge" style="font-size: 30px"></i>
|
||||||
|
</div>
|
||||||
|
<div class="lay-skin-checkcard-detail">
|
||||||
|
<div class="lay-skin-checkcard-header">Edge</div>
|
||||||
|
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||||
|
由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||||
|
<input type="checkbox" name="browser[2]" value="firefox" lay-skin="none" disabled>
|
||||||
|
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||||
|
<div class="lay-skin-checkcard-avatar">
|
||||||
|
<i class="layui-icon layui-icon-firefox" style="font-size: 30px"></i>
|
||||||
|
</div>
|
||||||
|
<div class="lay-skin-checkcard-detail">
|
||||||
|
<div class="lay-skin-checkcard-header">Firefox</div>
|
||||||
|
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||||
|
由 Mozilla 开发的开放源代码的网页浏览器。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||||
|
<input type="checkbox" name="browser[3]" value="ie" lay-skin="none" disabled checked>
|
||||||
|
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||||
|
<div class="lay-skin-checkcard-avatar">
|
||||||
|
<i class="layui-icon layui-icon-ie" style="font-size: 30px"></i>
|
||||||
|
</div>
|
||||||
|
<div class="lay-skin-checkcard-detail">
|
||||||
|
<div class="lay-skin-checkcard-header">Internet Explorer</div>
|
||||||
|
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||||
|
由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="ws-bold">自定义“标签风格”的多选组件</h3>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" name="hobby[0]" value="唱" lay-skin="none" checked>
|
||||||
|
<div lay-checkbox class="lay-skin-tag layui-badge">唱</div>
|
||||||
|
<input type="checkbox" name="hobby[1]" value="跳" lay-skin="none" checked>
|
||||||
|
<div lay-checkbox class="lay-skin-tag layui-badge">跳</div>
|
||||||
|
<input type="checkbox" name="hobby[2]" value="rap" lay-skin="none">
|
||||||
|
<div lay-checkbox class="lay-skin-tag layui-badge">rap</div>
|
||||||
|
<input type="checkbox" name="hobby[3]" value="篮球" lay-skin="none">
|
||||||
|
<div lay-checkbox class="lay-skin-tag layui-badge">篮球</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<p>更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- import layui -->
|
||||||
|
<script>
|
||||||
|
layui.use(function () {
|
||||||
|
var form = layui.form;
|
||||||
|
var $ = layui.$;
|
||||||
|
// …
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,191 @@
|
||||||
|
<style>
|
||||||
|
/*
|
||||||
|
* 基于复选框和单选框的卡片风格多选组件
|
||||||
|
* 需要具备一些基础的 CSS 技能，以下样式均为外部自主实现。
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* 主体 */
|
||||||
|
.layui-form-checkbox>.lay-skin-checkcard,
|
||||||
|
.layui-form-radio>.lay-skin-checkcard {
|
||||||
|
display: table;
|
||||||
|
display: flex;
|
||||||
|
padding: 12px;
|
||||||
|
white-space: normal;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #e5e5e5;
|
||||||
|
color: #000;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-form-checkbox>.lay-skin-checkcard>*,
|
||||||
|
.layui-form-radio>.lay-skin-checkcard>* {
|
||||||
|
/* display: table-cell; */ /* IE */
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬停 */
|
||||||
|
.layui-form-checkbox:hover>.lay-skin-checkcard,
|
||||||
|
.layui-form-radio:hover>.lay-skin-checkcard {
|
||||||
|
border-color: #16b777;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中 */
|
||||||
|
.layui-form-checked>.lay-skin-checkcard,
|
||||||
|
.layui-form-radioed[lay-skin="none"]>.lay-skin-checkcard {
|
||||||
|
color: #000;
|
||||||
|
border-color: #16b777;
|
||||||
|
background-color: rgb(22 183 119 / 10%) !important;
|
||||||
|
/* box-shadow: 0 0 0 3px rgba(22, 183, 119, 0.08); */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 禁用 */
|
||||||
|
.layui-checkbox-disabled>.lay-skin-checkcard,
|
||||||
|
.layui-radio-disabled>.lay-skin-checkcard {
|
||||||
|
box-shadow: none;
|
||||||
|
border-color: #e5e5e5 !important;
|
||||||
|
background-color: #eee !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* card 布局 */
|
||||||
|
.lay-skin-checkcard-avatar {
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-skin-checkcard-detail {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-skin-checkcard-header {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-skin-checkcard-description {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #5f5f5f;
|
||||||
|
}
|
||||||
|
.layui-disabled .lay-skin-checkcard-description{
|
||||||
|
color: #c2c2c2! important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中 dot */
|
||||||
|
.layui-form-checked>.lay-check-dot:after,
|
||||||
|
.layui-form-radioed>.lay-check-dot:after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: dashed;
|
||||||
|
border-color: transparent;
|
||||||
|
border-top-left-radius: 0px;
|
||||||
|
border-top-right-radius: 6px;
|
||||||
|
border-bottom-right-radius: 0px;
|
||||||
|
border-bottom-left-radius: 6px;
|
||||||
|
border-top-color: #16b777;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-right-color: #16b777;
|
||||||
|
border-right-style: solid;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-checkbox-disabled>.lay-check-dot:after,
|
||||||
|
.layui-radio-disabled>.lay-check-dot:after {
|
||||||
|
border-top-color: #d2d2d2;
|
||||||
|
border-right-color: #d2d2d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中 dot-2 */
|
||||||
|
.layui-form-checked>.lay-check-dot-2:before,
|
||||||
|
.layui-form-radioed>.lay-check-dot-2:before {
|
||||||
|
position: absolute;
|
||||||
|
font-family: "layui-icon";
|
||||||
|
content: "\e605";
|
||||||
|
color: #fff;
|
||||||
|
bottom: 4px;
|
||||||
|
right: 3px;
|
||||||
|
font-size: 9px;
|
||||||
|
z-index: 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-form-checked>.lay-check-dot-2:after,
|
||||||
|
.layui-form-radioed>.lay-check-dot-2:after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
bottom: 2px;
|
||||||
|
right: 2px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: dashed;
|
||||||
|
border-color: transparent;
|
||||||
|
border-top-left-radius: 6px;
|
||||||
|
border-top-right-radius: 0px;
|
||||||
|
border-bottom-right-radius: 6px;
|
||||||
|
border-bottom-left-radius: 0px;
|
||||||
|
border-right-color: #16b777;
|
||||||
|
border-right-style: solid;
|
||||||
|
border-bottom-color: #16b777;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-checkbox-disabled>.lay-check-dot-2:before,
|
||||||
|
.layui-radio-disabled>.lay-check-dot-2:before {
|
||||||
|
color: #eee !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-checkbox-disabled>.lay-check-dot-2:after,
|
||||||
|
.layui-radio-disabled>.lay-check-dot-2:after {
|
||||||
|
border-bottom-color: #d2d2d2;
|
||||||
|
border-right-color: #d2d2d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lay-ellipsis-multi-line {
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<!-- 标签风格 -->
|
||||||
|
<style>
|
||||||
|
.layui-form-radio>.lay-skin-tag,
|
||||||
|
.layui-form-checkbox>.lay-skin-tag {
|
||||||
|
font-size: 13px;
|
||||||
|
border-radius: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-form-checked>.lay-skin-tag,
|
||||||
|
.layui-form-radioed>.lay-skin-tag {
|
||||||
|
color: #fff !important;
|
||||||
|
background-color: #16b777 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<!-- 单选框 Color Picker -->
|
||||||
|
<style>
|
||||||
|
/* 主体 */
|
||||||
|
.layui-form-radio>.lay-skin-color-picker {
|
||||||
|
border-radius: 50%;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中 */
|
||||||
|
.layui-form-radioed>.lay-skin-color-picker {
|
||||||
|
box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px currentColor;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
<!--
|
||||||
|
以下示例仅用于演示 lay-skin="none" 用法，仅支持 webkit 系浏览器，任何样式或兼容性问题请自行解决
|
||||||
|
-->
|
||||||
|
|
||||||
|
<div class="layui-form" lay-filter="form-demo-skin">
|
||||||
|
{{- d.include("/form/examples/checkboxAndRadio.style.md") }}
|
||||||
|
<h3 class="ws-bold">自定义“卡片风格”的单选组件</h3>
|
||||||
|
<div class="layui-row layui-col-space8">
|
||||||
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||||
|
<input type="radio" name="radio1" value="chrome" lay-skin="none">
|
||||||
|
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||||
|
<div class="lay-skin-checkcard-avatar">
|
||||||
|
<span class="layui-icon layui-icon-chrome" style="font-size: 30px"></span>
|
||||||
|
</div>
|
||||||
|
<div class="lay-skin-checkcard-detail">
|
||||||
|
<div class="lay-skin-checkcard-header">Chrome</div>
|
||||||
|
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||||
|
由 Google 公司开发的网页浏览器，被大多数人所使用。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||||
|
<input type="radio" name="radio1" value="edge" lay-skin="none" checked>
|
||||||
|
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||||
|
<div class="lay-skin-checkcard-avatar">
|
||||||
|
<i class="layui-icon layui-icon-edge" style="font-size: 30px"></i>
|
||||||
|
</div>
|
||||||
|
<div class="lay-skin-checkcard-detail">
|
||||||
|
<div class="lay-skin-checkcard-header">Edge</div>
|
||||||
|
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||||
|
由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||||
|
<input type="radio" name="radio11" value="firefox" lay-skin="none" disabled>
|
||||||
|
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||||
|
<div class="lay-skin-checkcard-avatar">
|
||||||
|
<i class="layui-icon layui-icon-firefox" style="font-size: 30px"></i>
|
||||||
|
</div>
|
||||||
|
<div class="lay-skin-checkcard-detail">
|
||||||
|
<div class="lay-skin-checkcard-header">Firefox</div>
|
||||||
|
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||||
|
由 Mozilla 开发的开放源代码的网页浏览器。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||||
|
<input type="radio" name="radio11" value="ie" lay-skin="none" disabled checked>
|
||||||
|
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||||
|
<div class="lay-skin-checkcard-avatar">
|
||||||
|
<i class="layui-icon layui-icon-ie" style="font-size: 30px"></i>
|
||||||
|
</div>
|
||||||
|
<div class="lay-skin-checkcard-detail">
|
||||||
|
<div class="lay-skin-checkcard-header">Internet Explorer</div>
|
||||||
|
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||||
|
由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="ws-bold">自定义“标签风格”的单选组件</h3>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" name="hobby[0]" value="唱" lay-skin="none" checked>
|
||||||
|
<div lay-checkbox class="lay-skin-tag layui-badge">唱</div>
|
||||||
|
<input type="checkbox" name="hobby[1]" value="跳" lay-skin="none" checked>
|
||||||
|
<div lay-checkbox class="lay-skin-tag layui-badge">跳</div>
|
||||||
|
<input type="checkbox" name="hobby[2]" value="rap" lay-skin="none">
|
||||||
|
<div lay-checkbox class="lay-skin-tag layui-badge">rap</div>
|
||||||
|
<input type="checkbox" name="hobby[3]" value="篮球" lay-skin="none">
|
||||||
|
<div lay-checkbox class="lay-skin-tag layui-badge">篮球</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="ws-bold">自定义“颜色选择”的单选组件</h3>
|
||||||
|
<div>
|
||||||
|
<input type="radio" name="color" value="red" lay-skin="none">
|
||||||
|
<div lay-radio class="lay-skin-color-picker" style="color: red; background-color: red"></div>
|
||||||
|
<input type="radio" name="color" value="#16b777" lay-skin="none">
|
||||||
|
<div lay-radio class="lay-skin-color-picker" style="color: #16b777; background-color: #16b777"></div>
|
||||||
|
<input type="radio" name="color" value="blueviolet" lay-skin="none">
|
||||||
|
<div lay-radio class="lay-skin-color-picker" style="color: blueviolet; background-color: blueviolet"></div>
|
||||||
|
<input type="radio" name="color" value="#16baaa" lay-skin="none">
|
||||||
|
<div lay-radio class="lay-skin-color-picker" style="color: #16baaa; background-color: #16baaa"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
<p>更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- import layui -->
|
||||||
|
<script>
|
||||||
|
layui.use(function () {
|
||||||
|
var form = layui.form;
|
||||||
|
var $ = layui.$;
|
||||||
|
// …
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -115,7 +115,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
|
||||||
| lay-vertype | `tips`吸附层<br>`alert` 对话框<br>`msg` 默认 | 设置验证异常时的提示层模式 |
|
| lay-vertype | `tips`吸附层<br>`alert` 对话框<br>`msg` 默认 | 设置验证异常时的提示层模式 |
|
||||||
| lay-reqtext | 自定义 | 设置*必填项*（`lay-verify="required"`）的默认提示文本 |
|
| lay-reqtext | 自定义 | 设置*必填项*（`lay-verify="required"`）的默认提示文本 |
|
||||||
| lay-affix | [#详见](input.html#affix) | 输入框动态点缀，`<input type="text">`元素 **私有属性** |
|
| lay-affix | [#详见](input.html#affix) | 输入框动态点缀，`<input type="text">`元素 **私有属性** |
|
||||||
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `<input type="checkbox">` 元素 **私有属性** |
|
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `<input type="checkbox">`，`<input type="radio">` 元素 **私有属性** |
|
||||||
| lay-search | 默认不区分大小写;<br>设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。`<select>` 元素 **私有属性** |
|
| lay-search | 默认不区分大小写;<br>设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。`<select>` 元素 **私有属性** |
|
||||||
| lay-creatable <sup>2.9.7+</sup> | 无需值 | 是否允许创建新条目，需要配合 `lay-search` 使用。`<select>` 元素 **私有属性** |
|
| lay-creatable <sup>2.9.7+</sup> | 无需值 | 是否允许创建新条目，需要配合 `lay-search` 使用。`<select>` 元素 **私有属性** |
|
||||||
| lay-submit | 无需值 | 设置元素（一般为`<button>` 标签）触发 `submit` 提交事件 |
|
| lay-submit | 无需值 | 设置元素（一般为`<button>` 标签）触发 `submit` 提交事件 |
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@ toc: true
|
||||||
- 属性 `checked` 可设置默认选中
|
- 属性 `checked` 可设置默认选中
|
||||||
- 属性 `disabled` 可设置禁用状态
|
- 属性 `disabled` 可设置禁用状态
|
||||||
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）。同组单选框一般设置相同值。
|
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）。同组单选框一般设置相同值。
|
||||||
|
- 属性 `lay-skin` 可设置单选框风格，可选值：`none`(无样式)<sup>2.9.8+</sup> 默认风格可不填
|
||||||
|
|
||||||
<h2 id="title" lay-toc="{}">自定义标题模板</h2>
|
<h2 id="title" lay-toc="{}">自定义标题模板</h2>
|
||||||
|
|
||||||
|
|
@ -51,6 +52,19 @@ toc: true
|
||||||
</textarea>
|
</textarea>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
<h2 id="skin" lay-toc="{hot: true}">自定义任意风格 <sup>2.9.8+</sup></h2>
|
||||||
|
|
||||||
|
通过对 `radio` 元素设置 `lay-skin="none"` 属性禁用默认样式，从而实现任意风格的单选组件。<br>
|
||||||
|
**注：** 这意味着你需要掌握一定的 `CSS` 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。
|
||||||
|
|
||||||
|
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||||
|
obj.render();
|
||||||
|
}}">
|
||||||
|
<textarea>
|
||||||
|
{{- d.include("/form/examples/radio.skin.md") }}
|
||||||
|
</textarea>
|
||||||
|
</pre>
|
||||||
|
|
||||||
<h2 id="on" lay-toc="{hot: true}">单选框事件</h2>
|
<h2 id="on" lay-toc="{hot: true}">单选框事件</h2>
|
||||||
|
|
||||||
`form.on('radio(filter)', callback);`
|
`form.on('radio(filter)', callback);`
|
||||||
|
|
|
||||||
|
|
@ -325,6 +325,66 @@ max: 7 // 最大日期为 7 天后
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
<td>disabledDate <sup>2.9.8+</sup> </td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
用于设置不可选取的日期。示例：
|
||||||
|
|
||||||
|
```js
|
||||||
|
disabledDate: function(date, type){
|
||||||
|
// date - 当前的日期对象
|
||||||
|
// type - 面板类型，'start'/'end'
|
||||||
|
|
||||||
|
// 返回值为 true 的日期会被禁用
|
||||||
|
return date.getTime() < new Date(2024, 1).getTime(); // 2024-02-01
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>function</td>
|
||||||
|
<td> - </td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>disabledTime <sup>2.9.8+</sup> </td>
|
||||||
|
<td>
|
||||||
|
|
||||||
|
用于设置不可选取的时间。示例：
|
||||||
|
|
||||||
|
```js
|
||||||
|
disabledTime: function(date, type){
|
||||||
|
// date - 当前的日期对象
|
||||||
|
// type - 面板类型，'start'/'end'
|
||||||
|
|
||||||
|
// 数组中指定的时间会被禁用
|
||||||
|
return {
|
||||||
|
hours: function(){
|
||||||
|
return range(0, 10);
|
||||||
|
},
|
||||||
|
minutes:function(hour){
|
||||||
|
return hour > 5 ? range(0, 20) : [];
|
||||||
|
},
|
||||||
|
seconds:function(hour, minute){
|
||||||
|
return range(0, 2);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function range(start, end) {
|
||||||
|
var result = [];
|
||||||
|
for (var i = start; i < end; i++) {
|
||||||
|
result.push(i);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
</td>
|
||||||
|
<td>function</td>
|
||||||
|
<td> - </td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
<td>trigger</td>
|
<td>trigger</td>
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,18 @@
|
||||||
这里以控制在 9:30-17:30 为例
|
这里以控制在 9:30-17:30 为例
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">禁用日期</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="ID-laydate-limit-4" placeholder="仅过去的时间可选">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">禁用指定时间</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="ID-laydate-limit-5" placeholder="时间范围禁用">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -54,5 +66,41 @@ layui.use(function(){
|
||||||
max: '17:30:00',
|
max: '17:30:00',
|
||||||
btns: ['clear', 'confirm']
|
btns: ['clear', 'confirm']
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 禁用日期
|
||||||
|
laydate.render({
|
||||||
|
elem: '#ID-laydate-limit-4',
|
||||||
|
disabledDate: function(date, type){
|
||||||
|
return date.getTime() > Date.now();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 禁用指定时间
|
||||||
|
laydate.render({
|
||||||
|
elem: '#ID-laydate-limit-5',
|
||||||
|
type: 'time',
|
||||||
|
range: true,
|
||||||
|
disabledTime: function(date, type){
|
||||||
|
return {
|
||||||
|
hours: function(){
|
||||||
|
return range(0, 10);
|
||||||
|
},
|
||||||
|
minutes:function(hour){
|
||||||
|
return hour > 5 ? range(0, 20) : [];
|
||||||
|
},
|
||||||
|
seconds:function(hour, minute){
|
||||||
|
return range(0, 2);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function range(start, end) {
|
||||||
|
var result = [];
|
||||||
|
for (var i = start; i < end; i++) {
|
||||||
|
result.push(i);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -29,6 +29,12 @@
|
||||||
<a href="javascript:;" id="demo3">文字下拉 <i class="layui-icon layui-icon-down"></i></a>
|
<a href="javascript:;" id="demo3">文字下拉 <i class="layui-icon layui-icon-down"></i></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<a href="javascript:;" id="testopen">testopen <i class="layui-icon layui-icon-down"></i></a>
|
||||||
|
<button class="layui-btn" lay-on="open">open</button>
|
||||||
|
<button class="layui-btn" lay-on="close">close</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="layui-bg-gray" style="margin-top: 30px; width: 100%; height: 300px; text-align: center;" id="demo20">
|
<div class="layui-bg-gray" style="margin-top: 30px; width: 100%; height: 300px; text-align: center;" id="demo20">
|
||||||
<span class="layui-font-gray" style="position: relative; top:50%;">鼠标右键菜单</span>
|
<span class="layui-font-gray" style="position: relative; top:50%;">鼠标右键菜单</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -39,6 +45,7 @@
|
||||||
<script>
|
<script>
|
||||||
layui.use('dropdown', function () {
|
layui.use('dropdown', function () {
|
||||||
var dropdown = layui.dropdown;
|
var dropdown = layui.dropdown;
|
||||||
|
var util = layui.util;
|
||||||
|
|
||||||
dropdown.render({
|
dropdown.render({
|
||||||
elem: '#demo1',
|
elem: '#demo1',
|
||||||
|
|
@ -309,6 +316,23 @@ layui.use('dropdown', function () {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dropdown.render({
|
||||||
|
elem: '#testopen',
|
||||||
|
id: 'testopen',
|
||||||
|
trigger: "manual",
|
||||||
|
data: [{ id: "refresh", title: "刷新"}]
|
||||||
|
});
|
||||||
|
|
||||||
|
util.on({
|
||||||
|
open: function(){
|
||||||
|
dropdown.open('testopen')
|
||||||
|
},
|
||||||
|
close: function(){
|
||||||
|
dropdown.close('testopen')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{trigger: 'mouseenter'});
|
||||||
|
|
||||||
return;
|
return;
|
||||||
|
|
||||||
dropdown.render({
|
dropdown.render({
|
||||||
|
|
|
||||||
|
|
@ -589,7 +589,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||||
.layui-panel-window{position: relative; padding: 15px; border-radius: 0; border-top: 5px solid #eee; background-color: #fff;}
|
.layui-panel-window{position: relative; padding: 15px; border-radius: 0; border-top: 5px solid #eee; background-color: #fff;}
|
||||||
|
|
||||||
/* 其它辅助 */
|
/* 其它辅助 */
|
||||||
.layui-auxiliar-moving{position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: none; z-index: 9999999999;}
|
.layui-auxiliar-moving{position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: none; z-index: 9999999999; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
|
||||||
.layui-scrollbar-hide{overflow: hidden !important;}
|
.layui-scrollbar-hide{overflow: hidden !important;}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -904,6 +904,18 @@ hr.layui-border-black{border-width: 0 0 1px;}
|
||||||
.layui-form-onswitch > i{left: 100%; margin-left: -21px; background-color: #fff;}
|
.layui-form-onswitch > i{left: 100%; margin-left: -21px; background-color: #fff;}
|
||||||
.layui-form-onswitch > div{margin-left: 0; margin-right: 21px; color: #fff!important;}
|
.layui-form-onswitch > div{margin-left: 0; margin-right: 21px; color: #fff!important;}
|
||||||
|
|
||||||
|
/* 无样式风格-根据模板自定义样式*/
|
||||||
|
.layui-form-checkbox[lay-skin="none"] *,
|
||||||
|
.layui-form-radio[lay-skin="none"] *{box-sizing: border-box;}
|
||||||
|
.layui-form-checkbox[lay-skin="none"],
|
||||||
|
.layui-form-radio[lay-skin="none"] {position: relative; min-height: 20px; margin: 0; padding: 0; height: auto; line-height: normal;}
|
||||||
|
.layui-form-checkbox[lay-skin="none"]>div,
|
||||||
|
.layui-form-radio[lay-skin="none"]>div{position: relative; top: 0; left: 0; cursor: pointer; z-index: 10; color: inherit; background-color: inherit;}
|
||||||
|
.layui-form-checkbox[lay-skin="none"]>i,
|
||||||
|
.layui-form-radio[lay-skin="none"]>i{display: none;}
|
||||||
|
.layui-form-checkbox[lay-skin="none"].layui-checkbox-disabled>div,
|
||||||
|
.layui-form-radio[lay-skin="none"].layui-radio-disabled>div{cursor: not-allowed;}
|
||||||
|
|
||||||
.layui-checkbox-disabled{border-color: #eee !important;}
|
.layui-checkbox-disabled{border-color: #eee !important;}
|
||||||
.layui-checkbox-disabled > div{color: #c2c2c2!important;}
|
.layui-checkbox-disabled > div{color: #c2c2c2!important;}
|
||||||
.layui-checkbox-disabled > i{border-color: #eee !important;}
|
.layui-checkbox-disabled > i{border-color: #eee !important;}
|
||||||
|
|
|
||||||
|
|
@ -139,6 +139,7 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
|
||||||
.layui-laydate .layui-this,.layui-laydate .layui-this>div{background-color: #16baaa !important; color: #fff !important;}
|
.layui-laydate .layui-this,.layui-laydate .layui-this>div{background-color: #16baaa !important; color: #fff !important;}
|
||||||
.layui-laydate .laydate-disabled,
|
.layui-laydate .laydate-disabled,
|
||||||
.layui-laydate .laydate-disabled:hover{background:none !important; color: #d2d2d2 !important; cursor: not-allowed !important; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
|
.layui-laydate .laydate-disabled:hover{background:none !important; color: #d2d2d2 !important; cursor: not-allowed !important; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
|
||||||
|
.layui-laydate .layui-this.laydate-disabled,.layui-laydate .layui-this.laydate-disabled>div{background-color: #eee !important}
|
||||||
.layui-laydate-content td>div{padding: 7px 0;height: 100%;}
|
.layui-laydate-content td>div{padding: 7px 0;height: 100%;}
|
||||||
|
|
||||||
/* 墨绿/自定义背景色主题 */
|
/* 墨绿/自定义背景色主题 */
|
||||||
|
|
|
||||||
|
|
@ -60,6 +60,9 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||||
},
|
},
|
||||||
close: function () {
|
close: function () {
|
||||||
that.remove()
|
that.remove()
|
||||||
|
},
|
||||||
|
open: function () {
|
||||||
|
that.render()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -628,6 +631,15 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
||||||
return thisModule.call(that);
|
return thisModule.call(that);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 打开面板
|
||||||
|
dropdown.open = function(id){
|
||||||
|
var that = thisModule.getThis(id);
|
||||||
|
if(!that) return this;
|
||||||
|
|
||||||
|
that.render();
|
||||||
|
return thisModule.call(that);
|
||||||
|
}
|
||||||
|
|
||||||
// 重载实例
|
// 重载实例
|
||||||
dropdown.reload = function(id, options, type){
|
dropdown.reload = function(id, options, type){
|
||||||
var that = thisModule.getThis(id);
|
var that = thisModule.getThis(id);
|
||||||
|
|
|
||||||
|
|
@ -871,9 +871,19 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
hasRender[0] && hasRender.remove(); // 若已经渲染，则 Rerender
|
hasRender[0] && hasRender.remove(); // 若已经渲染，则 Rerender
|
||||||
|
|
||||||
// 若存在标题模板，则优先读取标题模板
|
// 若存在标题模板，则优先读取标题模板
|
||||||
|
var titleTplAttrs = [];
|
||||||
if(othis.next('[lay-checkbox]')[0]){
|
if(othis.next('[lay-checkbox]')[0]){
|
||||||
title = othis.next().html() || '';
|
var titleTplElem = othis.next();
|
||||||
|
title = titleTplElem.html() || '';
|
||||||
|
if(titleTplElem[0].attributes.length > 1){
|
||||||
|
layui.each(titleTplElem[0].attributes, function(i, attr){
|
||||||
|
if(attr.name !== 'lay-checkbox'){
|
||||||
|
titleTplAttrs.push(attr.name + '="' + attr.value + '"')
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
titleTplAttrs = titleTplAttrs.join(' ');
|
||||||
|
|
||||||
// 若为开关，则对 title 进行分隔解析
|
// 若为开关，则对 title 进行分隔解析
|
||||||
title = skin === 'switch' ? title.split('|') : [title];
|
title = skin === 'switch' ? title.split('|') : [title];
|
||||||
|
|
@ -891,7 +901,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
var type = {
|
var type = {
|
||||||
// 复选框
|
// 复选框
|
||||||
"checkbox": [
|
"checkbox": [
|
||||||
(title[0] ? ('<div>'+ title[0] +'</div>') : (skin === 'primary' ? '' : '<div></div>')),
|
(title[0] ? ('<div ' + titleTplAttrs +'>'+ title[0] +'</div>') : (skin === 'primary' ? '' : '<div></div>')),
|
||||||
'<i class="layui-icon '+(skin === 'primary' && !check.checked && othis.get(0).indeterminate ? CLASS.SUBTRA : 'layui-icon-ok')+'"></i>'
|
'<i class="layui-icon '+(skin === 'primary' && !check.checked && othis.get(0).indeterminate ? CLASS.SUBTRA : 'layui-icon-ok')+'"></i>'
|
||||||
].join(''),
|
].join(''),
|
||||||
// 开关
|
// 开关
|
||||||
|
|
@ -947,22 +957,34 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
||||||
radios.each(function(index, radio){
|
radios.each(function(index, radio){
|
||||||
var othis = $(this), hasRender = othis.next('.' + CLASS);
|
var othis = $(this), hasRender = othis.next('.' + CLASS);
|
||||||
var disabled = this.disabled;
|
var disabled = this.disabled;
|
||||||
|
var skin = othis.attr('lay-skin');
|
||||||
|
|
||||||
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
|
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
|
||||||
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
|
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
|
||||||
|
|
||||||
|
var title = util.escape(radio.title || '');
|
||||||
|
var titleTplAttrs = [];
|
||||||
|
if(othis.next('[lay-radio]')[0]){
|
||||||
|
var titleTplElem = othis.next();
|
||||||
|
title = titleTplElem.html() || '';
|
||||||
|
if(titleTplElem[0].attributes.length > 1){
|
||||||
|
layui.each(titleTplElem[0].attributes, function(i, attr){
|
||||||
|
if(attr.name !== 'lay-radio'){
|
||||||
|
titleTplAttrs.push(attr.name + '="' + attr.value + '"')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
titleTplAttrs = titleTplAttrs.join(' ');
|
||||||
|
|
||||||
// 替代元素
|
// 替代元素
|
||||||
var reElem = $(['<div class="layui-unselect '+ CLASS,
|
var reElem = $(['<div class="layui-unselect '+ CLASS,
|
||||||
(radio.checked ? (' '+ CLASS +'ed') : ''), // 选中状态
|
(radio.checked ? (' '+ CLASS +'ed') : ''), // 选中状态
|
||||||
(disabled ? ' layui-radio-disabled '+DISABLED : '') +'">', // 禁用状态
|
(disabled ? ' layui-radio-disabled '+DISABLED : '') +'"', // 禁用状态
|
||||||
|
(skin ? ' lay-skin="'+ skin +'"' : ''),
|
||||||
|
'>',
|
||||||
'<i class="layui-anim layui-icon '+ ICON[radio.checked ? 0 : 1] +'"></i>',
|
'<i class="layui-anim layui-icon '+ ICON[radio.checked ? 0 : 1] +'"></i>',
|
||||||
'<div>'+ function(){
|
'<div ' + titleTplAttrs +'>'+ title +'</div>',
|
||||||
var title = util.escape(radio.title || '');
|
|
||||||
if(othis.next('[lay-radio]')[0]){
|
|
||||||
title = othis.next().html();
|
|
||||||
}
|
|
||||||
return title;
|
|
||||||
}() +'</div>',
|
|
||||||
'</div>'].join(''));
|
'</div>'].join(''));
|
||||||
|
|
||||||
othis.after(reElem);
|
othis.after(reElem);
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
/** laydate 日期与时间控件 | MIT Licensed */
|
/** laydate 日期与时间控件 | MIT Licensed */
|
||||||
|
// @ts-expect-error
|
||||||
;!function(window, document){ // gulp build: laydate-header
|
;!function(window, document){ // gulp build: laydate-header
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var isLayui = window.layui && layui.define, ready = {
|
var isLayui = window.layui && layui.define;
|
||||||
getPath: (window.lay && lay.getPath) ? lay.getPath : ''
|
var ready = {
|
||||||
|
getPath: window.lay && lay.getPath ? lay.getPath : '',
|
||||||
|
|
||||||
// 载入 CSS 依赖
|
// 载入 CSS 依赖
|
||||||
,link: function(href, fn, cssname){
|
link: function (href, fn, cssname) {
|
||||||
|
|
||||||
// 未设置路径，则不主动加载 css
|
// 未设置路径，则不主动加载 css
|
||||||
if (!laydate.path) return;
|
if (!laydate.path) return;
|
||||||
|
|
||||||
|
|
@ -24,34 +24,34 @@
|
||||||
|
|
||||||
// 模块名
|
// 模块名
|
||||||
var MOD_NAME = 'laydate';
|
var MOD_NAME = 'laydate';
|
||||||
var MOD_ID = 'layui-'+ MOD_NAME +'-id' // 已渲染过的索引标记名
|
var MOD_ID = 'layui-' + MOD_NAME + '-id'; // 已渲染过的索引标记名
|
||||||
|
|
||||||
// 外部调用
|
// 外部调用
|
||||||
var laydate = {
|
var laydate = {
|
||||||
v: '5.5.0' // layDate 版本号
|
v: '5.6.0', // layDate 版本号
|
||||||
,config: {
|
config: {
|
||||||
weekStart: 0, // 默认周日一周的开始
|
weekStart: 0 // 默认周日一周的开始
|
||||||
} // 全局配置项
|
}, // 全局配置项
|
||||||
,index: (window.laydate && window.laydate.v) ? 100000 : 0
|
index: window.laydate && window.laydate.v ? 100000 : 0,
|
||||||
,path: GLOBAL.laydate_dir || ready.getPath
|
path: GLOBAL.laydate_dir || ready.getPath,
|
||||||
|
|
||||||
// 设置全局项
|
// 设置全局项
|
||||||
,set: function(options){
|
set: function (options) {
|
||||||
var that = this;
|
var that = this;
|
||||||
that.config = lay.extend({}, that.config, options);
|
that.config = lay.extend({}, that.config, options);
|
||||||
return that;
|
return that;
|
||||||
}
|
},
|
||||||
|
|
||||||
// 主体 CSS 等待事件
|
// 主体 CSS 等待事件
|
||||||
,ready: function(callback){
|
ready: function (callback) {
|
||||||
var cssname = 'laydate';
|
var cssname = 'laydate';
|
||||||
var ver = ''
|
var ver = '';
|
||||||
var path = (isLayui ? 'modules/' : '') + 'laydate.css?v=' + laydate.v + ver;
|
var path = (isLayui ? 'modules/' : '') + 'laydate.css?v=' + laydate.v + ver;
|
||||||
|
|
||||||
isLayui ? (
|
isLayui ? (
|
||||||
layui['layui.all']
|
layui['layui.all'] ?
|
||||||
? (typeof callback === 'function' && callback())
|
(typeof callback === 'function' && callback()) :
|
||||||
: layui.addcss(path, callback, cssname)
|
layui.addcss(path, callback, cssname)
|
||||||
) : ready.link(path, callback, cssname);
|
) : ready.link(path, callback, cssname);
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
|
|
@ -1074,9 +1074,23 @@
|
||||||
|
|
||||||
if(layui.type(options.holidays) !== 'array') return that;
|
if(layui.type(options.holidays) !== 'array') return that;
|
||||||
|
|
||||||
|
var isEquals = function(ymdStr1, ymdStr2){
|
||||||
|
var ymd1 = ymdStr1.split('-');
|
||||||
|
var ymd2 = ymdStr2.split('-');
|
||||||
|
|
||||||
|
lay.each(ymd1, function(i,v){
|
||||||
|
ymd1[i] = parseInt(v, 10);
|
||||||
|
})
|
||||||
|
lay.each(ymd2, function(i,v){
|
||||||
|
ymd2[i] = parseInt(v, 10);
|
||||||
|
})
|
||||||
|
|
||||||
|
return ymd1.join('-') === ymd2.join('-');
|
||||||
|
}
|
||||||
|
|
||||||
lay.each(options.holidays, function(idx, item) {
|
lay.each(options.holidays, function(idx, item) {
|
||||||
lay.each(item, function(i, dayStr) {
|
lay.each(item, function(i, dayStr) {
|
||||||
if(dayStr === td.attr('lay-ymd')){
|
if(isEquals(dayStr, td.attr('lay-ymd'))){
|
||||||
td.find('div').html('<span class="laydate-day-holidays"' + (
|
td.find('div').html('<span class="laydate-day-holidays"' + (
|
||||||
type[idx] ? ('type="'+ type[idx] +'"') : ''
|
type[idx] ? ('type="'+ type[idx] +'"') : ''
|
||||||
) + '>' + YMD[2] + '</span>');
|
) + '>' + YMD[2] + '</span>');
|
||||||
|
|
@ -1087,7 +1101,184 @@
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 无效日期范围的标记
|
/**
|
||||||
|
* 给定年份的开始日期
|
||||||
|
* @param {Date} date
|
||||||
|
*/
|
||||||
|
Class.prototype.startOfYear = function(date){
|
||||||
|
var newDate = new Date(date);
|
||||||
|
newDate.setFullYear(newDate.getFullYear(), 0, 1);
|
||||||
|
newDate.setHours(0, 0, 0, 0);
|
||||||
|
return newDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 给定年份的结束日期
|
||||||
|
* @param {Date} date
|
||||||
|
*/
|
||||||
|
Class.prototype.endOfYear = function(date){
|
||||||
|
var newDate = new Date(date);
|
||||||
|
var year = newDate.getFullYear();
|
||||||
|
newDate.setFullYear(year + 1, 0, 0);
|
||||||
|
newDate.setHours(23, 59, 59, 999);
|
||||||
|
return newDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 给定月份的开始日期
|
||||||
|
* @param {Date} date
|
||||||
|
*/
|
||||||
|
Class.prototype.startOfMonth = function(date){
|
||||||
|
var newDate = new Date(date);
|
||||||
|
newDate.setDate(1);
|
||||||
|
newDate.setHours(0, 0, 0, 0);
|
||||||
|
return newDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 给定月份的结束日期
|
||||||
|
* @param {Date} date
|
||||||
|
*/
|
||||||
|
Class.prototype.endOfMonth = function(date){
|
||||||
|
var newDate = new Date(date);
|
||||||
|
var month = newDate.getMonth();
|
||||||
|
newDate.setFullYear(newDate.getFullYear(), month + 1, 0);
|
||||||
|
newDate.setHours(23, 59, 59, 999);
|
||||||
|
return newDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将指定的天数添加到给定日期
|
||||||
|
* @param {Date} date 要更改的日期
|
||||||
|
* @param {number} amount 天数
|
||||||
|
*/
|
||||||
|
Class.prototype.addDays = function(date, amount){
|
||||||
|
var newDate = new Date(date);
|
||||||
|
if(!amount) return newDate;
|
||||||
|
newDate.setDate(newDate.getDate() + amount);
|
||||||
|
return newDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 不可选取的年或月。年或月中的所有日期都禁用时，才判定为不可选取。
|
||||||
|
* @param {Date} date 要检测的年或月
|
||||||
|
* @param {'year' | 'month'} type 面板类型
|
||||||
|
* @param {'start' | 'end'} position 面板位置
|
||||||
|
*/
|
||||||
|
Class.prototype.isDisabledYearOrMonth = function(date, type, position){
|
||||||
|
var that = this;
|
||||||
|
var options = that.config;
|
||||||
|
var millisecondsInDay = 24 * 60 * 60 * 1000;
|
||||||
|
|
||||||
|
var startDay = type === 'year' ? that.startOfYear(date) : that.startOfMonth(date);
|
||||||
|
var endDay = type === 'year' ? that.endOfYear(date) : that.endOfMonth(date);
|
||||||
|
var numOfDays = Math.floor((endDay.getTime() - startDay.getTime()) / millisecondsInDay) + 1;
|
||||||
|
var disabledCount = 0;
|
||||||
|
|
||||||
|
for(var i = 0; i < numOfDays; i++){
|
||||||
|
var day = that.addDays(startDay, i);
|
||||||
|
if(options.disabledDate.call(options, day, position)){
|
||||||
|
disabledCount++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return disabledCount === numOfDays;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @typedef limitOptions
|
||||||
|
* @prop {JQuery} [elem] - 检测的元素, 例如面板中年月日时分秒元素，“现在”，“确认” 按钮等
|
||||||
|
* @prop {number} [index] - 元素集合中，当前检测元素的索引，years:0,month:0,date:0-41,hms:0
|
||||||
|
* @prop {['hours', 'minutes', 'seconds'] | ['hours', 'minutes'] | ['hours']} [time] - 是否比较时分秒
|
||||||
|
* @prop {'year'|'month'|string} [type] - 面板类型?
|
||||||
|
* @prop {0 | 1} [rangeType] - 面板索引, 0 表示 start, 1 表示 end
|
||||||
|
* @prop {Partial<{year:number,month: number,date:number,hours:number,minutes:number,seconds:number}>} [date] - 检测的日期时间对象
|
||||||
|
* @prop {'date' | 'time' | 'datetime'} disabledType - 禁用类型，按钮应使用 datetime
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* 不可选取的日期
|
||||||
|
* @param {number} date 当前检测的日期的时间戳
|
||||||
|
* @param {limitOptions} opts
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
Class.prototype.isDisabledDate = function(date, opts){
|
||||||
|
opts = opts || {};
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
var options = that.config;
|
||||||
|
var position = options.range ? (opts.rangeType === 0 ? 'start' : 'end') : 'start';
|
||||||
|
|
||||||
|
if(!options.disabledDate) return false;
|
||||||
|
if(options.type === 'time') return false;
|
||||||
|
if(!(opts.disabledType === 'date' || opts.disabledType === 'datetime')) return false;
|
||||||
|
|
||||||
|
// 不需要时分秒
|
||||||
|
var normalizedDate = new Date(date);
|
||||||
|
normalizedDate.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
return opts.type === 'year' || opts.type === 'month'
|
||||||
|
? that.isDisabledYearOrMonth(normalizedDate, opts.type, position)
|
||||||
|
: options.disabledDate.call(options, normalizedDate, position);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 不可选取的时间
|
||||||
|
* @param {number} date 当前检测的日期的时间戳
|
||||||
|
* @param {limitOptions} opts
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
Class.prototype.isDisabledTime = function(date, opts){
|
||||||
|
opts = opts || {};
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
var options = that.config;
|
||||||
|
var position = options.range ? (opts.rangeType === 0 ? 'start' : 'end') : 'start';
|
||||||
|
|
||||||
|
if(!options.disabledTime) return false;
|
||||||
|
if(!(options.type === "time" || options.type === "datetime")) return false;
|
||||||
|
if(!(opts.disabledType === 'time' || opts.disabledType === 'datetime')) return false;
|
||||||
|
|
||||||
|
var isDisabledItem = function(compareVal, rangeFn, rangeFnParam){
|
||||||
|
return function(){
|
||||||
|
return (typeof rangeFn === 'function' && rangeFn.apply(options, rangeFnParam) || []).indexOf(compareVal) !== -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var dateObj = that.systemDate(new Date(date));
|
||||||
|
var disabledTime = options.disabledTime.call(options, that.newDate(dateObj), position) || {};
|
||||||
|
|
||||||
|
// 面板中的时分秒 HTML 元素需要分别检测是否禁用
|
||||||
|
// 按钮检测任意一项是否禁用即可
|
||||||
|
return opts.disabledType === 'datetime'
|
||||||
|
? isDisabledItem(dateObj.hours, disabledTime.hours)()
|
||||||
|
|| isDisabledItem(dateObj.minutes, disabledTime.minutes, [dateObj.hours])()
|
||||||
|
|| isDisabledItem(dateObj.seconds, disabledTime.seconds, [dateObj.hours, dateObj.minutes])()
|
||||||
|
: [isDisabledItem(dateObj.hours, disabledTime.hours),
|
||||||
|
isDisabledItem(dateObj.minutes, disabledTime.minutes, [dateObj.hours]),
|
||||||
|
isDisabledItem(dateObj.seconds, disabledTime.seconds, [dateObj.hours, dateObj.minutes])][opts.time.length - 1]();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 不可选取的日期时间
|
||||||
|
* @param {number} timestamp 当前检测的日期的时间戳
|
||||||
|
* @param {limitOptions} opts
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
Class.prototype.isDisabledDateTime = function(timestamp, opts){
|
||||||
|
opts = opts || {};
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
var options = that.config;
|
||||||
|
|
||||||
|
return that.isDisabledDate(timestamp, opts) || that.isDisabledTime(timestamp, opts);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 无效日期范围的标记
|
||||||
|
* @param {limitOptions} opts
|
||||||
|
*
|
||||||
|
*/
|
||||||
Class.prototype.limit = function(opts){
|
Class.prototype.limit = function(opts){
|
||||||
opts = opts || {};
|
opts = opts || {};
|
||||||
|
|
||||||
|
|
@ -1115,7 +1306,7 @@
|
||||||
}())).getTime(); //time：是否比较时分秒
|
}())).getTime(); //time：是否比较时分秒
|
||||||
});
|
});
|
||||||
|
|
||||||
isOut = timestamp.now < timestamp.min || timestamp.now > timestamp.max;
|
isOut = timestamp.now < timestamp.min || timestamp.now > timestamp.max || that.isDisabledDateTime(timestamp.now, opts);
|
||||||
opts.elem && opts.elem[isOut ? 'addClass' : 'removeClass'](DISABLED);
|
opts.elem && opts.elem[isOut ? 'addClass' : 'removeClass'](DISABLED);
|
||||||
|
|
||||||
return isOut;
|
return isOut;
|
||||||
|
|
@ -1185,7 +1376,9 @@
|
||||||
month: YMD[1] - 1,
|
month: YMD[1] - 1,
|
||||||
date: YMD[2]
|
date: YMD[2]
|
||||||
},
|
},
|
||||||
index: index_
|
index: index_,
|
||||||
|
rangeType: index,
|
||||||
|
disabledType: 'date' // 日面板，检测当前日期是否禁用
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -1246,13 +1439,15 @@
|
||||||
elem: lay(that.footer).find(ELEM_NOW),
|
elem: lay(that.footer).find(ELEM_NOW),
|
||||||
date: that.systemDate(/^(datetime|time)$/.test(options.type) ? new Date() : null),
|
date: that.systemDate(/^(datetime|time)$/.test(options.type) ? new Date() : null),
|
||||||
index: 0,
|
index: 0,
|
||||||
time: timeParams
|
time: timeParams,
|
||||||
|
disabledType: 'datetime' // 按钮，检测日期和时间
|
||||||
});
|
});
|
||||||
// 确认按钮
|
// 确认按钮
|
||||||
that.limit({
|
that.limit({
|
||||||
elem: lay(that.footer).find(ELEM_CONFIRM),
|
elem: lay(that.footer).find(ELEM_CONFIRM),
|
||||||
index: 0,
|
index: 0,
|
||||||
time: timeParams
|
time: timeParams,
|
||||||
|
disabledType: 'datetime' // 按钮，检测日期和时间
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1328,7 +1523,9 @@
|
||||||
elem: lay(li),
|
elem: lay(li),
|
||||||
date: ymd,
|
date: ymd,
|
||||||
index: index,
|
index: index,
|
||||||
type: type
|
type: type,
|
||||||
|
rangeType: index,
|
||||||
|
disabledType: 'date' // 年面板，检测当前年份中的所有日期是否禁用
|
||||||
});
|
});
|
||||||
yearNum++;
|
yearNum++;
|
||||||
});
|
});
|
||||||
|
|
@ -1365,7 +1562,9 @@
|
||||||
elem: lay(li),
|
elem: lay(li),
|
||||||
date: ymd,
|
date: ymd,
|
||||||
index: index,
|
index: index,
|
||||||
type: type
|
type: type,
|
||||||
|
rangeType: index,
|
||||||
|
disabledType: 'date' // 月面板，检测当前月份中的所有日期是否禁用
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -1392,6 +1591,8 @@
|
||||||
,seconds: ii
|
,seconds: ii
|
||||||
}][i],
|
}][i],
|
||||||
index: index,
|
index: index,
|
||||||
|
rangeType: index,
|
||||||
|
disabledType: 'time', // 时间面板，分别检测时分秒列表是否禁用
|
||||||
time: [
|
time: [
|
||||||
['hours'],
|
['hours'],
|
||||||
['hours', 'minutes'],
|
['hours', 'minutes'],
|
||||||
|
|
@ -1405,7 +1606,8 @@
|
||||||
elem: lay(that.footer).find(ELEM_CONFIRM),
|
elem: lay(that.footer).find(ELEM_CONFIRM),
|
||||||
date: that[startEnd],
|
date: that[startEnd],
|
||||||
index: 0,
|
index: 0,
|
||||||
time: ['hours', 'minutes', 'seconds']
|
time: ['hours', 'minutes', 'seconds'],
|
||||||
|
disabledType: 'datetime' // 确认按钮，检测时分秒列表任意一项是否禁用
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -1587,17 +1789,25 @@
|
||||||
var that = this
|
var that = this
|
||||||
,options = that.config
|
,options = that.config
|
||||||
,lang = that.lang()
|
,lang = that.lang()
|
||||||
,isOut, elemBtn = lay(that.footer).find(ELEM_CONFIRM);
|
,isOut
|
||||||
if(options.range && options.type !== 'time'){
|
,elemBtn = lay(that.footer).find(ELEM_CONFIRM)
|
||||||
|
,timeParams = options.type === 'datetime' || options.type === 'time' ? ['hours', 'minutes', 'seconds'] : undefined;
|
||||||
|
if(options.range){
|
||||||
start = start || (that.rangeLinked ? that.startDate : options.dateTime);
|
start = start || (that.rangeLinked ? that.startDate : options.dateTime);
|
||||||
end = end || that.endDate;
|
end = end || that.endDate;
|
||||||
isOut = !that.endState || that.newDate(start).getTime() > that.newDate(end).getTime();
|
isOut = !that.endState || that.newDate(start).getTime() > that.newDate(end).getTime();
|
||||||
|
|
||||||
//如果不在有效日期内，直接禁用按钮，否则比较开始和结束日期
|
//如果不在有效日期内，直接禁用按钮，否则比较开始和结束日期
|
||||||
(that.limit({
|
(that.limit({
|
||||||
date: start
|
date: start,
|
||||||
|
disabledType: 'datetime', // 按钮，检测日期和时间
|
||||||
|
time: timeParams,
|
||||||
|
rangeType: 0
|
||||||
}) || that.limit({
|
}) || that.limit({
|
||||||
date: end
|
date: end,
|
||||||
|
disabledType: 'datetime', // 按钮，检测日期和时间
|
||||||
|
time: timeParams,
|
||||||
|
rangeType: 1
|
||||||
}))
|
}))
|
||||||
? elemBtn.addClass(DISABLED)
|
? elemBtn.addClass(DISABLED)
|
||||||
: elemBtn[isOut ? 'addClass' : 'removeClass'](DISABLED);
|
: elemBtn[isOut ? 'addClass' : 'removeClass'](DISABLED);
|
||||||
|
|
@ -1871,7 +2081,8 @@
|
||||||
that.startDate = lay.extend({}, dateTime); // 同步startDate
|
that.startDate = lay.extend({}, dateTime); // 同步startDate
|
||||||
}
|
}
|
||||||
// 校验另外一个日期是否在有效的范围内
|
// 校验另外一个日期是否在有效的范围内
|
||||||
if (that.endState && !that.limit({date: that.thisDateTime(1 - index)})) {
|
// 此处为范围选择的日期面板点击选中处理，所以 disabledType 为 date
|
||||||
|
if (that.endState && !that.limit({date: that.rangeLinked ? that.startDate : that.thisDateTime(1 - index), disabledType:'date'})) {
|
||||||
// 根据选择之后判断是否需要切换模式
|
// 根据选择之后判断是否需要切换模式
|
||||||
var isChange;
|
var isChange;
|
||||||
if (that.endState && that.autoCalendarModel.auto) {
|
if (that.endState && that.autoCalendarModel.auto) {
|
||||||
|
|
@ -1981,9 +2192,15 @@
|
||||||
//确定
|
//确定
|
||||||
,confirm: function(){
|
,confirm: function(){
|
||||||
if(options.range){
|
if(options.range){
|
||||||
if(lay(btn).hasClass(DISABLED)) return that.hint(
|
if(lay(btn).hasClass(DISABLED)){
|
||||||
options.type === 'time' ? lang.timeout.replace(/日期/g, '时间') : lang.timeout
|
var isTimeout = options.type === 'time'
|
||||||
);
|
? that.startTime && that.endTime && that.newDate(that.startTime) > that.newDate(that.endTime)
|
||||||
|
: that.startDate && that.endDate && that.newDate(lay.extend({},that.startDate, that.startTime || {})) > that.newDate(lay.extend({},that.endDate, that.endTime || {}));
|
||||||
|
|
||||||
|
return isTimeout
|
||||||
|
? that.hint(options.type === 'time' ? lang.timeout.replace(/日期/g, '时间') : lang.timeout)
|
||||||
|
: that.hint(lang.invalidDate);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
if(lay(btn).hasClass(DISABLED)) return that.hint(lang.invalidDate);
|
if(lay(btn).hasClass(DISABLED)) return that.hint(lang.invalidDate);
|
||||||
}
|
}
|
||||||
|
|
@ -2029,7 +2246,8 @@
|
||||||
elem: lay(that.footer).find(ELEM_CONFIRM),
|
elem: lay(that.footer).find(ELEM_CONFIRM),
|
||||||
date: {
|
date: {
|
||||||
year: listYM[0]
|
year: listYM[0]
|
||||||
}
|
},
|
||||||
|
disabledType: 'datetime' // 按钮，检测日期和时间
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2358,4 +2576,3 @@
|
||||||
);
|
);
|
||||||
|
|
||||||
}(window, window.document);
|
}(window, window.document);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2544,7 +2544,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
|
||||||
if(hide){
|
if(hide){
|
||||||
othis.find('.layui-table-grid-down').remove();
|
othis.find('.layui-table-grid-down').remove();
|
||||||
} else if((
|
} else if((
|
||||||
elemCell.prop('scrollWidth') > elemCell.outerWidth() ||
|
elemCell.prop('scrollWidth') > elemCell.prop('clientWidth') ||
|
||||||
elemCell.find("br").length > 0
|
elemCell.find("br").length > 0
|
||||||
) && !options.lineStyle){
|
) && !options.lineStyle){
|
||||||
if(elemCell.find('.'+ ELEM_GRID_DOWN)[0]) return;
|
if(elemCell.find('.'+ ELEM_GRID_DOWN)[0]) return;
|
||||||
|
|
|
||||||
|
|
@ -1152,8 +1152,32 @@ layui.define(['table'], function (exports) {
|
||||||
if(!that) return;
|
if(!that) return;
|
||||||
|
|
||||||
var options = that.getOptions();
|
var options = that.getOptions();
|
||||||
|
var treeOptions = options.tree;
|
||||||
|
|
||||||
|
var tableData = treeTable.getData(id);
|
||||||
|
var customName = treeOptions.customName;
|
||||||
|
var childrenKey = customName.children;
|
||||||
|
|
||||||
|
// 只和同级节点排序
|
||||||
|
var sort = function(data, field, type){
|
||||||
|
layui.sort(data, field, type, true);
|
||||||
|
layui.each(data, function(rowIndex, trData){
|
||||||
|
sort(trData[childrenKey] || [], field, type);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
if (options.autoSort) {
|
if (options.autoSort) {
|
||||||
that.initData();
|
var initSort = options.initSort;
|
||||||
|
if (initSort.type) {
|
||||||
|
sort(tableData, initSort.field, initSort.type === 'desc');
|
||||||
|
} else {
|
||||||
|
// 恢复默认
|
||||||
|
sort(tableData, table.config.indexName, null);
|
||||||
|
}
|
||||||
|
// 更新缓存中数据的顺序
|
||||||
|
table.cache[id] = tableData;
|
||||||
|
// 重新初始化缓存数据
|
||||||
|
that.initData(tableData);
|
||||||
treeTable.renderData(id);
|
treeTable.renderData(id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue