mirror of https://github.com/layui/layui
Merge pull request #1052 from layui/main
贤心
GitHub
commit
b9acac35a4
72
README.md
72
README.md
|
|
@ -1,8 +1,9 @@
|
|||
<p align="center">
|
||||
<a href="http://www.layui.com">
|
||||
<img src="https://unpkg.com/outeres/img/layui/logo-1.png" alt="layui" width="360">
|
||||
<a href="https://layui.github.io/">
|
||||
<img src="https://unpkg.com/outeres@0.0.6/img/layui/icon-1.png" width="81" alt="Layui">
|
||||
</a>
|
||||
</p>
|
||||
<h1 align="center">Layui</h1>
|
||||
<p align="center">
|
||||
Classic modular front-end UI library
|
||||
</p>
|
||||
|
|
@ -24,52 +25,51 @@
|
|||
|
||||
---
|
||||
|
||||
layui 是一套开源的 Web UI 组件库，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端的各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
|
||||
Layui 是一套开源的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，极易上手，拿来即用。其风格简约，而内在丰盈，利于实现网页界面的快速构建。Layui 区别于一众主流的前端框架，却并非逆道而行，而是信奉返璞归真之道。确切地说，它更多是面向于追求简单的务实主义者，他们无需涉足各类构建工具，只需面向浏览器本身，即可轻松掌握页面所需的元素与交互，进而信手拈来。
|
||||
|
||||
|
||||
## 快速上手
|
||||
|
||||
获得 layui 后，将其完整地部署到你的静态资源项目目录，你只需要引入下述两个文件：
|
||||
使用 Layui 只需在页面中引入核心文件即可：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>开始使用 layui</title>
|
||||
<link rel="stylesheet" href="./layui/css/layui.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 你的 HTML 代码 -->
|
||||
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script>
|
||||
//一般直接写在一个 js 文件中
|
||||
layui.use(['layer', 'form'], function(){
|
||||
var layer = layui.layer
|
||||
,form = layui.form;
|
||||
|
||||
//欢迎语
|
||||
layer.msg('Hello World');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>开始使用 Layui</title>
|
||||
<link href="./layui/css/layui.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- HTML -->
|
||||
|
||||
<script src="./layui/layui.js"></script>
|
||||
<script>
|
||||
// 使用组件
|
||||
layui.use(['layer', 'form'], function(){
|
||||
var layer = layui.layer;
|
||||
var form = layui.form;
|
||||
|
||||
// 欢迎语
|
||||
layer.msg('Hello World');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 阅读文档
|
||||
[**最新文档**](https://layui.github.io/)
|
||||
|
||||
愿 layui 能成为你得心应手的 Web 界面解决方案，化作你方寸屏幕前的亿万字节！
|
||||
## 使用文档
|
||||
[**最新文档**](https://layui.github.io)
|
||||
|
||||
## 贡献者
|
||||
[贡献者列表](https://github.com/layui/layui/graphs/contributors)
|
||||
## 项目参与
|
||||
[项目参与者](https://github.com/layui/layui/graphs/contributors)
|
||||
|
||||
> 大概是因为 layui 让开发者变得更懒，所以贡献者才如此之少。
|
||||
## 破旧立新 🌱
|
||||
layui 原官网已于2021年10月13日下线。详见：
|
||||
> 1. <a href="https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png" target="_blank">layui 原官网下线公告</a> 2. <a href="https://www.zhihu.com/question/488668647/answer/2159962082" target="_blank">layui 原官网为什么要下线？</a>
|
||||
|
||||
## 相关
|
||||
> layui 原官网已于2021年10月13日下线。
|
||||
---
|
||||
|
||||
目前包括版本更新、文档等在内的所有日常维护，都以 Github 或 Gitee 项目主页为准。
|
||||
鉴于 Layui 相对庞大的受众群体，从此 Github 和 Gitee 平台将支撑起 Layui 的后续。<br>
|
||||
**Layui 将继续陪伴着所有为之热爱的人们，共同去探索和论证「Layui 开发模式的可行性」**
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-view{display:block;position:relative;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#fafafa;color:#333;font-family:Courier New;font-size:12px}.layui-code-h3{position:relative;padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee;font-size:12px}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0c0c0c;border-left-color:#3f3f3f;background-color:#0c0c0c;color:#c2be9e}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3f3f3f;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}
|
||||
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-view{display:block;position:relative;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#fafafa;color:#333;font-family:Courier New;font-size:13px}.layui-code-h3{position:relative;padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee;font-size:12px}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0c0c0c;border-left-color:#3f3f3f;background-color:#0c0c0c;color:#c2be9e}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3f3f3f;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -54,13 +54,11 @@ div[carousel-item]>*:nth-child(2n+1){background-color: #5FB878;}
|
|||
|
||||
<div class="layui-carousel" id="test4">
|
||||
<div carousel-item>
|
||||
<div><img src="http://s2.mogucdn.com/mlcdn/c45406/170714_2f9k4a3lgdfb80cie2g7aaba8l4ag_778x440.jpg_900x9999.v1c7E.70.webp"></div>
|
||||
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170710_3a6jf5f0j24bgcc3i3f36el2a2ckj_778x440.jpg_900x9999.v1c7E.70.webp"></div>
|
||||
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170714_5e8867724c4bfae8ka6l3a5274h0h_778x440.jpg_900x9999.v1c7E.70.webp"></div>
|
||||
<div><img src="http://s3.mogucdn.com/mlcdn/c45406/170609_83i077ikhb3023kch5gah5b2il9k3_778x440.jpg_900x9999.v1c7E.70.webp"></div>
|
||||
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170714_8d301bj507l9la1cjccbabg433beh_778x440.jpg_900x9999.v1c7E.70.webp"></div>
|
||||
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170710_4kaiaee4j39899b08abc685j2ehk1_778x440.jpg_900x9999.v1c7E.70.webp"></div>
|
||||
<div><img src="http://s10.mogucdn.com/mlcdn/c45406/170710_31a9gb225bga4agf4c9b25a8c8924_778x440.jpg_900x9999.v1c7E.70.webp"></div>
|
||||
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div>
|
||||
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg"></div>
|
||||
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div>
|
||||
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div>
|
||||
<div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -76,6 +74,10 @@ layui.use('carousel', function(){
|
|||
,index: 2
|
||||
//,full: true
|
||||
,arrow: 'always'
|
||||
,autoplay: 'always'
|
||||
,change: function(obj){
|
||||
console.log(obj)
|
||||
}
|
||||
//,interval: 5000
|
||||
//,autoplay: false
|
||||
//,indicator: 'outside'
|
||||
|
|
@ -83,9 +85,11 @@ layui.use('carousel', function(){
|
|||
});
|
||||
|
||||
//事件
|
||||
carousel.on('change(test1)', function(res){
|
||||
console.log(res)
|
||||
/*
|
||||
carousel.on('change(test1)', function(obj){
|
||||
console.log(obj)
|
||||
});
|
||||
*/
|
||||
|
||||
carousel.render({
|
||||
elem: '#test2'
|
||||
|
|
@ -106,10 +110,11 @@ layui.use('carousel', function(){
|
|||
//,full: true
|
||||
});
|
||||
|
||||
// 图片轮播
|
||||
carousel.render({
|
||||
elem: '#test4'
|
||||
,width: '778px'
|
||||
,height: '440px'
|
||||
,width: '720px'
|
||||
,height: '360px'
|
||||
,interval: 5000
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,341 +1,411 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>表单模块 - layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>表单模块 - layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
<style>
|
||||
body{padding: 16px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<form class="layui-form" method="get">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="arr[title]" required placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" lay-submit lay-filter="top">立即提交</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<form class="layui-form layui-form-pane1" action="" lay-filter="first">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" lay-verify="required|title" lay-reqText="标题不能为空" required placeholder="请输入标题" autocomplete="off" class="layui-input" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="tel" name="phone" lay-verify="required|number" lay-verType="tips" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="email" name="email" lay-verify="email" lay-verType="alert" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">生日</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">范围</label>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
<form class="layui-form" method="get" lay-filter="top">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="arr[]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="arr[]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="arr[title]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">行内表单</label>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" id="testSubmit">立即提交</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<form class="layui-form layui-form-pane1" action="" lay-filter="first">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="quiz" lay-verify="required" lay-verType="tips" lay-filter="quiz111">
|
||||
<option value="">请选择问题</option>
|
||||
<option value="0">你工作的 第一个城市</option>
|
||||
<option value="1" disabled>你的工号</option>
|
||||
<option value="2">
|
||||
你最喜欢的老师
|
||||
</option>
|
||||
</select>
|
||||
<input type="text" name="title" lay-verify="required|title" lay-reqText="标题不能为空" required placeholder="请输入标题" autocomplete="off" class="layui-input" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">select分组</label>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">手机</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="quiz" lay-filter="quiz">
|
||||
<option value="">请选择问题</option>
|
||||
<optgroup label="城市记忆">
|
||||
<option value="0">你工作的第一个城市</option>
|
||||
</optgroup>
|
||||
<optgroup label="学生时代">
|
||||
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input demo-phone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="vercode" lay-verify="required" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid" style="padding: 0!important;">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">邮箱</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="email" name="email" lay-verify="email" lay-verType="alert" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">生日</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">范围</label>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">行内表单</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="quiz" lay-verify="required" lay-verType="tips" lay-filter="quiz111">
|
||||
<option value="">请选择问题</option>
|
||||
<option value="0">你工作的 第一个城市</option>
|
||||
<option value="1" disabled>你的工号</option>
|
||||
<option value="2">你最喜欢的老师</option>
|
||||
</optgroup>
|
||||
<option value="2">
|
||||
你最喜欢的老师
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">select分组</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="quiz" lay-filter="quiz">
|
||||
<option value="">请选择问题</option>
|
||||
<optgroup label="城市记忆">
|
||||
<option value="0">你工作的第一个城市</option>
|
||||
</optgroup>
|
||||
<optgroup label="学生时代">
|
||||
<option value="1" disabled>你的工号</option>
|
||||
<option value="2">你最喜欢的老师</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest" lay-filter="interest">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1">阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest" lay-filter="interest">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1">阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">搜索选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest-search" lay-filter="interest-search" lay-search>
|
||||
<option value="">请搜索</option>
|
||||
<option value="写作">写作</option>
|
||||
<option value="阅读" disabled>阅读</option>
|
||||
<option value="游戏" disabled>游戏</option>
|
||||
<option value="音乐">音乐</option>
|
||||
<option value="旅行">旅行</option>
|
||||
<option value="读书">读书</option>
|
||||
<option value="1">layer</option>
|
||||
<option value="2" disabled>laydate</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">layim</option>
|
||||
<option value="5">laypage</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">搜索分组框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest-search-group" lay-filter="interest-search-group" lay-search="">
|
||||
<option value="">请搜索</option>
|
||||
<optgroup label="分组a">
|
||||
<option value="a1">a1</option>
|
||||
<option value="a2">a2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组aa">
|
||||
<option value="aa1">aA1</option>
|
||||
<option value="aa2">aA2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组b">
|
||||
<option value="b1">b1</option>
|
||||
<option value="b2">b2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组bb">
|
||||
<option value="bb1">bb1</option>
|
||||
<option value="bb2">bb2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组bbb">
|
||||
<option value="bbb1">bBb1</option>
|
||||
<option value="bbb2">bBB2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组c">
|
||||
<option value="c1">c1</option>
|
||||
<option value="c2">c2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组cc">
|
||||
<option value="cc1">cc1</option>
|
||||
<option value="cc2">cc2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组ccc">
|
||||
<option value="ccc1">ccc1</option>
|
||||
<option value="ccc2">ccc2</option>
|
||||
</optgroup>
|
||||
<optgroup label="分组cccc">
|
||||
<option value="cccc1">cccc1</option>
|
||||
<option value="cccc2">cccc2</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">搜索选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="interest-search" lay-filter="interest-search" lay-search>
|
||||
<option value="">请搜索</option>
|
||||
<option value="写作">写作</option>
|
||||
<option value="阅读" disabled>阅读</option>
|
||||
<option value="游戏" disabled>游戏</option>
|
||||
<option value="音乐">音乐</option>
|
||||
<option value="旅行">旅行</option>
|
||||
<option value="读书">读书</option>
|
||||
<option value="1">layer</option>
|
||||
<option value="2" disabled>laydate</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">layim</option>
|
||||
<option value="5">laypage</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
</select>
|
||||
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like[write]" title="写作">
|
||||
<input type="checkbox" name="like[read]" title="阅读">
|
||||
<input type="checkbox" name="like[game]" title="游戏" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like[write]" title="写作">
|
||||
<input type="checkbox" name="like[read]" title="阅读">
|
||||
<input type="checkbox" name="like[game]" title="游戏" disabled>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">原始复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作">
|
||||
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
|
||||
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">原始复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作">
|
||||
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
|
||||
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">开关关</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="close" lay-skin="switch" title="开关">
|
||||
<input type="checkbox" name="close2" lay-skin="switch" title="开关" lay-text="ON|OFF" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">开关关</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="close" lay-skin="switch" title="开关">
|
||||
<input type="checkbox" name="close2" lay-skin="switch" title="开关" lay-text="ON|OFF" disabled>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">开关开</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
|
||||
<input type="checkbox" name="open2" lay-skin="switch" lay-filter="switchTest" lay-text="已绑定|绑定">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">开关开</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
|
||||
<input type="checkbox" name="open2" lay-skin="switch" lay-filter="switchTest" lay-text="已绑定|绑定">
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男">
|
||||
<input type="radio" name="sex" value="女" title="女" checked>
|
||||
<input type="radio" name="sex" value="中型" title="中" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男">
|
||||
<input type="radio" name="sex" value="女" title="女" checked>
|
||||
<input type="radio" name="sex" value="中型" title="中" disabled>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex.id" value="男" title="男">
|
||||
<input type="radio" name="sex.id" value="女" title="女" checked>
|
||||
<input type="radio" name="sex.id" value="中型" title="中">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" pane>
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex.id" value="男" title="男">
|
||||
<input type="radio" name="sex.id" value="女" title="女" checked>
|
||||
<input type="radio" name="sex.id" value="中型" title="中">
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">请填写描述</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">请填写描述</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
|
||||
<br><br><br>
|
||||
<br><br><br>
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<!-- <script src="../build/lay/dest/layui.all.js"></script> -->
|
||||
<script src="../src/layui.js"></script>
|
||||
<!-- <script src="../build/lay/dest/layui.all.js"></script> -->
|
||||
|
||||
<script>
|
||||
<script>
|
||||
|
||||
layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
var form = layui.form
|
||||
,layer = layui.layer
|
||||
,layedit = layui.layedit
|
||||
,laydate = layui.laydate;
|
||||
layui.use(['form', 'util', 'laydate'], function(){
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var laydate = layui.laydate;
|
||||
|
||||
//自定义验证规则
|
||||
form.verify({
|
||||
title: function(value){
|
||||
if(value.length < 5){
|
||||
return '标题也太短了吧';
|
||||
//自定义验证规则
|
||||
form.verify({
|
||||
title: function(value){
|
||||
if(value.length < 5){
|
||||
return '标题也太短了吧';
|
||||
}
|
||||
}
|
||||
}
|
||||
,pass: [/(.+){6,12}$/, '密码必须6到12位']
|
||||
,money: [
|
||||
/^\d+\.\b\d{2}\b$/
|
||||
,'金额必须为小数保留两位'
|
||||
]
|
||||
});
|
||||
|
||||
form.on('submit(top)', function(data){
|
||||
console.log(data);
|
||||
,pass: [/(.+){6,12}$/, '密码必须6到12位']
|
||||
,money: [
|
||||
/^\d+\.\b\d{2}\b$/
|
||||
,'金额必须为小数保留两位'
|
||||
]
|
||||
});
|
||||
|
||||
/*
|
||||
form.on('submit(top)', function(data){
|
||||
console.log(data);
|
||||
return false;
|
||||
});
|
||||
*/
|
||||
|
||||
//方法提交
|
||||
$('#testSubmit').on('click', function(){
|
||||
form.submit('top', function(data){
|
||||
layer.confirm('确定提交么？', function(index){
|
||||
layer.close(index);
|
||||
|
||||
// 验证均通过后执行提交
|
||||
setTimeout(function(){
|
||||
alert(JSON.stringify(data.field));
|
||||
})
|
||||
|
||||
});
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//日期
|
||||
laydate.render({
|
||||
elem: '#date'
|
||||
});
|
||||
|
||||
//初始赋值
|
||||
var thisValue = form.val('first', {
|
||||
'title': '测试测试测试'
|
||||
,'phone': 11111111111
|
||||
,'email': 'xu@sentsin.com'
|
||||
,'date': '2021-05-30'
|
||||
,'password': 123123
|
||||
//,'quiz': 2
|
||||
,'interest': 3
|
||||
,'like[write]': true
|
||||
//,'open': false
|
||||
,'sex': '男'
|
||||
,'desc': 'form 是我们非常看重的一块'
|
||||
,xxxxxxxxx: 123
|
||||
|
||||
|
||||
//日期
|
||||
laydate.render({
|
||||
elem: '#date'
|
||||
});
|
||||
|
||||
//初始赋值
|
||||
var thisValue = form.val('first', {
|
||||
'title': '测试测试测试'
|
||||
//,'phone': 11111111111
|
||||
,'email': 'xu@sentsin.com'
|
||||
,'date': '2021-05-30'
|
||||
,'password': 123123
|
||||
//,'quiz': 2
|
||||
,'interest': 3
|
||||
,'like[write]': true
|
||||
//,'open': false
|
||||
,'sex': '男'
|
||||
,'desc': 'form 是我们非常看重的一块'
|
||||
,xxxxxxxxx: 123
|
||||
});
|
||||
|
||||
|
||||
//事件
|
||||
form.on('select(quiz111)', function(data){
|
||||
console.log('select: ', this, data);
|
||||
});
|
||||
|
||||
form.on('select(quiz)', function(data){
|
||||
console.log('select.quiz：', this, data);
|
||||
});
|
||||
|
||||
form.on('select(interest)', function(data){
|
||||
console.log('select.interest: ', this, data);
|
||||
});
|
||||
|
||||
form.on('checkbox', function(data){
|
||||
console.log(this.checked, data.elem.checked);
|
||||
});
|
||||
|
||||
form.on('switch', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
form.on('radio', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
// 提交事件
|
||||
form.on('submit(*)', function(data){
|
||||
console.log(data)
|
||||
alert(JSON.stringify(data.field));
|
||||
return false;
|
||||
});
|
||||
|
||||
// 普通事件
|
||||
util.on('lay-on', {
|
||||
"get-vercode": function(othis){
|
||||
var isvalid = form.validate('.demo-phone');
|
||||
|
||||
// 验证通过
|
||||
if(isvalid){
|
||||
layer.msg('手机号验证通过，执行发送验证码的操作');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
//事件监听
|
||||
form.on('select(quiz111)', function(data){
|
||||
console.log('select: ', this, data);
|
||||
});
|
||||
|
||||
form.on('select(quiz)', function(data){
|
||||
console.log('select.quiz：', this, data);
|
||||
});
|
||||
|
||||
form.on('select(interest)', function(data){
|
||||
console.log('select.interest: ', this, data);
|
||||
});
|
||||
|
||||
|
||||
|
||||
form.on('checkbox', function(data){
|
||||
console.log(this.checked, data.elem.checked);
|
||||
});
|
||||
|
||||
form.on('switch', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
form.on('radio', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
//监听提交
|
||||
form.on('submit(*)', function(data){
|
||||
console.log(data)
|
||||
alert(JSON.stringify(data.field));
|
||||
return false;
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</script>
|
||||
|
||||
<form id="test1" action="" target="_blank">
|
||||
<input type="radio" value="girl" disabled>
|
||||
<input type="checkbox" name="love[a]">
|
||||
<input type="checkbox" name="love[b]">
|
||||
<input value="1">
|
||||
<input name="as">
|
||||
<input name="=" value="2">
|
||||
<select name="quiz">
|
||||
<option value="">请选择问题</option>
|
||||
<option disabled value="你工作的第一个城市">你工作的第一个城市</option>
|
||||
<option value="你的工号">你的工号</option>
|
||||
<option value="你最喜欢的老师">你最喜欢的老师</option>
|
||||
<option value="你的工号" selected>你的工号</option>
|
||||
<option value="你的工号">你的工号</option>
|
||||
</select>
|
||||
<button type="submit">原始表单，测试提交</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use('jquery', function(){
|
||||
var $ = layui.jquery;
|
||||
var submit = function(){
|
||||
return false;
|
||||
};
|
||||
$('#test').on('submit', function(){
|
||||
return false
|
||||
});
|
||||
$('#test1').on('submit', function(obj){
|
||||
//console.log(obj.field)
|
||||
//return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<h3>原始表单调试：</h3>
|
||||
<hr>
|
||||
|
||||
<form id="test1" action="" target="_blank">
|
||||
<input type="radio" value="girl" disabled>
|
||||
<input type="checkbox" name="love[a]">
|
||||
<input type="checkbox" name="love[b]">
|
||||
<input value="1">
|
||||
<input name="as">
|
||||
<input name="=" value="2">
|
||||
<select name="quiz">
|
||||
<option value="">请选择问题</option>
|
||||
<option disabled value="你工作的第一个城市">你工作的第一个城市</option>
|
||||
<option value="你的工号">你的工号</option>
|
||||
<option value="你最喜欢的老师">你最喜欢的老师</option>
|
||||
<option value="你的工号" selected>你的工号</option>
|
||||
<option value="你的工号">你的工号</option>
|
||||
</select>
|
||||
<button type="submit">原始表单，测试提交</button>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,18 +3,18 @@
|
|||
,"msg": ""
|
||||
,"count": 3000000
|
||||
,"totalRow": {
|
||||
"experience": "666"
|
||||
"experience": "777"
|
||||
}
|
||||
,"data": [{
|
||||
"id": "10001"
|
||||
,"username": "杜甫"
|
||||
,"username": "杜甫123"
|
||||
,"email": "test1@email.com"
|
||||
,"sex": "<strong>男</strong>"
|
||||
,"city": "浙江杭州"
|
||||
,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。"
|
||||
,"experience": 7
|
||||
,"ip": "192.168.0.8"
|
||||
,"logins": null
|
||||
,"logins": 0
|
||||
,"joinTime": "2016-10-14"
|
||||
}, {
|
||||
"id": "10002"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"status": 200
|
||||
,"message": ""
|
||||
,"total": 3000000
|
||||
,"total": 333333
|
||||
,"data": {
|
||||
"list": [{
|
||||
"id": "10001"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>静态表格 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
<style>
|
||||
body {padding: 32px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<a href="table.html" class="layui-btn">表格综合</a>
|
||||
<a href="table-test.html" class="layui-btn">表格操作</a>
|
||||
<a href="table-static.html" class="layui-btn layui-btn-primary layui-border-green">静态表格</a>
|
||||
</div>
|
||||
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>人物</th>
|
||||
<th>民族</th>
|
||||
<th>格言</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>孔子</td>
|
||||
<td>华夏</td>
|
||||
<td>有朋至远方来，不亦乐乎</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孟子</td>
|
||||
<td>华夏</td>
|
||||
<td>穷则独善其身，达则兼济天下</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<table class="layui-table" lay-size="sm">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>人物</th>
|
||||
<th>民族</th>
|
||||
<th>格言</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>孔子</td>
|
||||
<td>华夏</td>
|
||||
<td>有朋至远方来，不亦乐乎</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孟子</td>
|
||||
<td>华夏</td>
|
||||
<td>穷则独善其身，达则兼济天下</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<br>
|
||||
|
||||
<table class="layui-table" lay-size="lg">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col width="150">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>人物</th>
|
||||
<th>民族</th>
|
||||
<th>格言</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>孔子</td>
|
||||
<td>华夏</td>
|
||||
<td>有朋至远方来，不亦乐乎</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>孟子</td>
|
||||
<td>华夏</td>
|
||||
<td>穷则独善其身，达则兼济天下</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
@ -8,16 +6,15 @@
|
|||
<title>表格操作 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
body {padding: 32px; /*overflow-y: scroll;*/}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<a href="table.html" class="layui-btn">表格综合</a>
|
||||
<a href="table-test.html" class="layui-btn layui-btn-primary">表格测试</a>
|
||||
<a href="table-test.html" class="layui-btn layui-btn-primary layui-border-green">表格操作</a>
|
||||
<a href="table-static.html" class="layui-btn">静态表格</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -25,20 +22,23 @@
|
|||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页所有数据</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="reload">重载（保留初始参数）</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="reload2">重载（不保留初始参数）</button>
|
||||
<button class="layui-btn layui-btn-sm" id="dropdown">
|
||||
更多菜单
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
|
||||
|
||||
<button class="layui-btn layui-btn-sm" id="reloadTest">
|
||||
重载测试
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm" id="moreTest">
|
||||
更多测试
|
||||
<i class="layui-icon layui-icon-down layui-font-12"></i>
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="barDemo">
|
||||
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
||||
{{# if(d.email.trim()){ }}
|
||||
{{# if(layui.$.trim(d.email)){ }}
|
||||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
||||
{{# } }}
|
||||
<input type="checkbox" name="demoTableSwitch" lay-skin="switch" {{ d.demoTableSwitch }}>
|
||||
|
|
@ -68,18 +68,25 @@
|
|||
<span {{# if(!d.activate){ }}style="color:#999"{{# } }}>{{ d.email }}</span>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="pagebarDemo">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn1">底部按钮1</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="footerDemoBtn2">底部按钮2</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<table id="test" lay-filter="test"></table>
|
||||
|
||||
<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.5.3/layui.js" charset="utf-8"></script>
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['table', 'dropdown'], function(){
|
||||
var table = layui.table
|
||||
,$ = layui.$
|
||||
,laytpl = layui.laytpl
|
||||
,dropdown = layui.dropdown
|
||||
,form = layui.form;
|
||||
var $ = layui.$;
|
||||
var table = layui.table;
|
||||
var laytpl = layui.laytpl;
|
||||
var dropdown = layui.dropdown;
|
||||
var form = layui.form;
|
||||
|
||||
//全局设定某参数
|
||||
// 全局设定某参数
|
||||
table.set({
|
||||
where: {
|
||||
token: '默认 token 参数'
|
||||
|
|
@ -96,15 +103,24 @@ layui.use(['table', 'dropdown'], function(){
|
|||
//渲染
|
||||
window.ins1 = table.render({
|
||||
elem: '#test'
|
||||
,height: 400
|
||||
,height: 500
|
||||
//,width: 600
|
||||
,title: '用户数据表'
|
||||
,url: 'json/table/demo1.json'
|
||||
|
||||
,pagebar: '#pagebarDemo' // 分页栏模板
|
||||
,lineStyle: 'height: 100px;' // 行样式
|
||||
,css: [ // 自定义样式
|
||||
'.layui-table-page{text-align: right;}'
|
||||
,'.layui-table-pagebar{float: left;}'
|
||||
].join('')
|
||||
|
||||
//,size: 'lg'
|
||||
//,skin: 'line'
|
||||
//,autoSort: false //是否自动排序。如果否，则由服务端排序
|
||||
//,loading: false
|
||||
,totalRow: true
|
||||
,page: true
|
||||
,limit: 30
|
||||
,toolbar: '#toolbarDemo'
|
||||
,defaultToolbar: ['filter', 'exports', 'print', {
|
||||
|
|
@ -136,7 +152,7 @@ layui.use(['table', 'dropdown'], function(){
|
|||
var td = obj.td(this.field); //获取当前 td
|
||||
return td.find('select').val();
|
||||
}}
|
||||
,{field:'sign', title:'签名'}
|
||||
,{field:'sign', title:'签名', edit: 'textarea'}
|
||||
,{field: 'experience', title: '积分', width:80, sort: true, align:'center', totalRow: '{{ d.TOTAL_NUMS }} 😊', templet: '<div>{{ d.experience }} 分</div>'}
|
||||
,{field:'ip', title:'IP', width: 120}
|
||||
,{field:'logins', title:'登入次数', width: 100, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 次'}
|
||||
|
|
@ -156,18 +172,134 @@ layui.use(['table', 'dropdown'], function(){
|
|||
,key: 'experience'
|
||||
,order: 'asc'
|
||||
}
|
||||
|
||||
,done: function(){
|
||||
//下拉菜单
|
||||
var id = this.id;
|
||||
|
||||
// 重载测试
|
||||
dropdown.render({
|
||||
elem: '#dropdown' //可绑定在任意元素中，此处以上述按钮为例
|
||||
elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
|
||||
,data: [{
|
||||
id: 0,
|
||||
title: '刷新'
|
||||
id: 'reload',
|
||||
title: '重载'
|
||||
},{
|
||||
id: 'reload-deep',
|
||||
title: '重载 - 参数叠加'
|
||||
},{
|
||||
id: 'reloadData',
|
||||
title: '仅重载数据'
|
||||
},{
|
||||
id: 'reloadData-deep',
|
||||
title: '仅重载数据 - 参数叠加'
|
||||
}]
|
||||
// 菜单被点击的事件
|
||||
,click: function(obj){
|
||||
switch(obj.id){
|
||||
case 'reload':
|
||||
// 重载 - 默认（参数重置）
|
||||
table.reload('test', {
|
||||
where: {
|
||||
abc: '123456'
|
||||
//,test: '新的 test2'
|
||||
//,token: '新的 token2'
|
||||
}
|
||||
,height: 'full-130' // 重载高度
|
||||
/*
|
||||
,cols: [[ // 重置表头
|
||||
{type: 'checkbox', fixed: 'left'}
|
||||
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
|
||||
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
|
||||
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
|
||||
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
|
||||
,{field:'joinTime', title:'加入时间', width:120}
|
||||
]]
|
||||
*/
|
||||
|
||||
});
|
||||
break;
|
||||
case 'reload-deep':
|
||||
// 重载 - 深度（参数叠加）
|
||||
table.reload('test', {
|
||||
where: {
|
||||
abc: 123
|
||||
,test: '新的 test1'
|
||||
}
|
||||
//,defaultToolbar: ['print'] // 重载头部工具栏右侧图标
|
||||
,page: {curr: 5, limit: 20}
|
||||
//,cols: ins1.config.cols
|
||||
}, true);
|
||||
break;
|
||||
case 'reloadData':
|
||||
// 数据重载 - 参数重置
|
||||
var isnt3 = table.reloadData('test', {
|
||||
where: {
|
||||
abc: '123456'
|
||||
//,test: '新的 test2'
|
||||
//,token: '新的 token2'
|
||||
}
|
||||
,height: 2000 // 测试无效参数
|
||||
//,url: '404'
|
||||
,elem: null
|
||||
,page: {curr: 5, limit: 20}
|
||||
});
|
||||
console.log(isnt3.config);
|
||||
break;
|
||||
case 'reloadData-deep':
|
||||
// 数据重载 - 参数叠加
|
||||
table.reloadData('test', {
|
||||
where: {
|
||||
abc: 123
|
||||
,test: '新的 test1'
|
||||
}
|
||||
}, true);
|
||||
break;
|
||||
}
|
||||
layer.msg('可观察 Network 请求参数的变化');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 更多测试
|
||||
dropdown.render({
|
||||
elem: '#moreTest' //可绑定在任意元素中，此处以上述按钮为例
|
||||
,data: [{
|
||||
id: 'add',
|
||||
title: '添加'
|
||||
},{
|
||||
id: 'update',
|
||||
title: '编辑'
|
||||
},{
|
||||
id: 'delete',
|
||||
title: '删除'
|
||||
}]
|
||||
//菜单被点击的事件
|
||||
,click: function(obj){
|
||||
table.reload('test');
|
||||
var checkStatus = table.checkStatus(id)
|
||||
var data = checkStatus.data; // 获取选中的数据
|
||||
|
||||
switch(obj.id){
|
||||
case 'add':
|
||||
layer.open({
|
||||
title: '添加',
|
||||
type: 1,
|
||||
area: ['80%','80%'],
|
||||
content: '<div style="padding: 16px;">自定义表单元素</div>'
|
||||
});
|
||||
break;
|
||||
case 'update':
|
||||
layer.open({
|
||||
title: '编辑',
|
||||
type: 1,
|
||||
area: ['80%','80%'],
|
||||
content: '<div style="padding: 16px;">自定义表单元素</div>'
|
||||
});
|
||||
break;
|
||||
case 'delete':
|
||||
if(data.length === 0){
|
||||
return layer.msg('请选择一行');
|
||||
}
|
||||
layer.msg('delete event');
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -177,11 +309,11 @@ layui.use(['table', 'dropdown'], function(){
|
|||
}
|
||||
|
||||
/*
|
||||
,response: {
|
||||
statusName: 'status'
|
||||
,statusCode: 200
|
||||
,request: { // 自定义请求参数名称
|
||||
pageName: 'curr' //页码的参数名称，默认：page
|
||||
,limitName: 'nums' //每页数据量的参数名，默认：limit
|
||||
}
|
||||
,parseData: function(res){
|
||||
,parseData: function(res){ // 任意数据格式的解析
|
||||
return {
|
||||
"status": res.status
|
||||
,"msg": res.message
|
||||
|
|
@ -209,19 +341,12 @@ layui.use(['table', 'dropdown'], function(){
|
|||
}, true);
|
||||
});
|
||||
|
||||
//工具栏事件
|
||||
// 工具栏事件
|
||||
table.on('toolbar(test)', function(obj){
|
||||
var checkStatus = table.checkStatus(obj.config.id);
|
||||
var id = obj.config.id;
|
||||
var checkStatus = table.checkStatus(id);
|
||||
|
||||
switch(obj.event){
|
||||
case 'add':
|
||||
layer.msg('添加');
|
||||
break;
|
||||
case 'update':
|
||||
layer.msg('编辑');
|
||||
break;
|
||||
case 'delete':
|
||||
layer.msg('删除');
|
||||
break;
|
||||
case 'getCheckData':
|
||||
var data = checkStatus.data;
|
||||
layer.alert(layui.util.escape(JSON.stringify(data)));
|
||||
|
|
@ -231,7 +356,7 @@ layui.use(['table', 'dropdown'], function(){
|
|||
layer.msg('选中了：'+ data.length + ' 个');
|
||||
break;
|
||||
case 'getData':
|
||||
var getData = table.getData(obj.config.id);
|
||||
var getData = table.getData(id);
|
||||
console.log(getData);
|
||||
layer.alert(layui.util.escape(JSON.stringify(getData)));
|
||||
break;
|
||||
|
|
@ -241,45 +366,11 @@ layui.use(['table', 'dropdown'], function(){
|
|||
case 'LAYTABLE_TIPS':
|
||||
layer.alert('Table for layui-v'+ layui.v);
|
||||
break;
|
||||
case 'reload':
|
||||
//深度重载
|
||||
var instReload = table.reload('test', {
|
||||
|
||||
where: {
|
||||
abc: 123
|
||||
,test: '新的 test1'
|
||||
}
|
||||
,defaultToolbar: ['print']
|
||||
,page: {curr: 5, limit: 20}
|
||||
,cols: ins1.config.cols
|
||||
//,height: 300
|
||||
//,url: 'x'
|
||||
}, true);
|
||||
break;
|
||||
case 'reload2':
|
||||
//浅重载
|
||||
table.reload('test', {
|
||||
where: {
|
||||
efg: 'sasasas'
|
||||
//,test: '新的 test2'
|
||||
//,token: '新的 token2'
|
||||
}
|
||||
,cols: [[
|
||||
{type: 'checkbox', fixed: 'left'}
|
||||
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
|
||||
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
|
||||
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
|
||||
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
|
||||
,{field:'joinTime', title:'加入时间', width:120}
|
||||
]]
|
||||
//,height: 500
|
||||
});
|
||||
break;
|
||||
};
|
||||
});
|
||||
|
||||
//触发行工具事件
|
||||
table.on('tool(test)', function(obj){
|
||||
//触发单元格工具事件
|
||||
table.on('tool(test)', function(obj){ // 双击 toolDouble
|
||||
var data = obj.data;
|
||||
//console.log(obj)
|
||||
if(obj.event === 'del'){
|
||||
|
|
@ -300,7 +391,29 @@ layui.use(['table', 'dropdown'], function(){
|
|||
}
|
||||
});
|
||||
|
||||
//触发单元格编辑
|
||||
|
||||
|
||||
//触发表格复选框选择
|
||||
table.on('checkbox(test)', function(obj){
|
||||
console.log(obj)
|
||||
});
|
||||
|
||||
//触发表格单选框选择
|
||||
table.on('radio(test)', function(obj){
|
||||
console.log(obj)
|
||||
});
|
||||
|
||||
// 行单击事件
|
||||
table.on('row(test)', function(obj){
|
||||
//console.log(obj);
|
||||
//layer.closeAll('tips');
|
||||
});
|
||||
// 行双击事件
|
||||
table.on('rowDouble(test)', function(obj){
|
||||
console.log(obj);
|
||||
});
|
||||
|
||||
// 单元格编辑事件
|
||||
table.on('edit(test)', function(obj){
|
||||
var field = obj.field //得到字段
|
||||
,value = obj.value //得到修改后的值
|
||||
|
|
@ -310,11 +423,6 @@ layui.use(['table', 'dropdown'], function(){
|
|||
update[field] = value;
|
||||
obj.update(update);
|
||||
});
|
||||
|
||||
table.on('row(test)', function(obj){
|
||||
//console.log(obj);
|
||||
//layer.closeAll('tips');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
@ -10,14 +8,14 @@
|
|||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
body{padding: 32px; /*overflow-y: scroll;*/}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="layui-btn-container">
|
||||
<a href="table.html" class="layui-btn layui-btn-primary">表格综合</a>
|
||||
<a href="table-test.html" class="layui-btn">表格测试</a>
|
||||
<a href="table.html" class="layui-btn layui-btn-primary layui-border-green">表格综合</a>
|
||||
<a href="table-test.html" class="layui-btn">表格操作</a>
|
||||
<a href="table-static.html" class="layui-btn">静态表格</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -182,26 +180,12 @@
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.0.1/layui.js" charset="utf-8"></script>
|
||||
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.13/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['table', 'dropdown'], function(){
|
||||
var table = layui.table
|
||||
,$ = layui.$
|
||||
,laytpl = layui.laytpl
|
||||
,dropdown = layui.dropdown;
|
||||
|
||||
//全局设定某参数
|
||||
table.set({
|
||||
where: {
|
||||
token: '全局的 token'
|
||||
,access: '全局的 access'
|
||||
}
|
||||
//,defaultToolbar: ['filter']
|
||||
,limit: 30
|
||||
//,url: 'list'
|
||||
//,height: 300
|
||||
});
|
||||
|
||||
layui.use('table', function(){
|
||||
var $ = layui.$;
|
||||
var table = layui.table;
|
||||
|
||||
|
||||
table.render({
|
||||
elem: '#test2'
|
||||
|
|
@ -234,61 +218,10 @@ layui.use(['table', 'dropdown'], function(){
|
|||
*/
|
||||
]]
|
||||
});
|
||||
|
||||
//触发表格行点击
|
||||
table.on('tr', function(obj){
|
||||
console.log(obj)
|
||||
});
|
||||
|
||||
//触发表格复选框选择
|
||||
table.on('checkbox(test)', function(obj){
|
||||
console.log(obj)
|
||||
});
|
||||
|
||||
//触发表格单选框选择
|
||||
table.on('radio(test)', function(obj){
|
||||
console.log(obj)
|
||||
});
|
||||
|
||||
//触发表格单选框选择
|
||||
table.on('rowDouble(test)', function(obj){
|
||||
console.log(obj);
|
||||
});
|
||||
|
||||
//触发单元格编辑
|
||||
table.on('edit(test)', function(obj){
|
||||
var value = obj.value //得到修改后的值
|
||||
,data = obj.data //得到所在行所有键值
|
||||
,field = obj.field; //得到字段
|
||||
|
||||
console.log(obj)
|
||||
});
|
||||
|
||||
//触发行工具事件
|
||||
table.on('tool(test)', function(obj){
|
||||
var data = obj.data;
|
||||
//console.log(obj)
|
||||
if(obj.event === 'del'){
|
||||
layer.confirm('真的删除行么', function(index){
|
||||
obj.del();
|
||||
layer.close(index);
|
||||
});
|
||||
} else if(obj.event === 'edit'){
|
||||
layer.prompt({
|
||||
formType: 2
|
||||
,value: data.email
|
||||
}, function(value, index){
|
||||
obj.update({
|
||||
email: value
|
||||
});
|
||||
layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//return;
|
||||
|
||||
//直接赋值数据
|
||||
// 直接赋值数据
|
||||
table.render({
|
||||
elem: '#demo'
|
||||
//,width: 900
|
||||
|
|
@ -302,7 +235,8 @@ layui.use(['table', 'dropdown'], function(){
|
|||
,{field: 'sign', title: '签名', width: 150}
|
||||
,{field: 'sex', title: '性别', width: 80}
|
||||
,{field: 'city', title: '城市', width: 100}
|
||||
,{field: 'experience', title: '积分', width: 80, sort: true}
|
||||
// ,{field: 'experience', title: '积分', width: 80, sort: true}
|
||||
,{field: 'experience', title: '积分', width: 80, sort: true, totalRow: true, totalRowDecimals: 3}
|
||||
]]
|
||||
,data: [{
|
||||
"id": "10001"
|
||||
|
|
@ -402,6 +336,7 @@ layui.use(['table', 'dropdown'], function(){
|
|||
,page: true //是否显示分页
|
||||
,limits: [3,5,10]
|
||||
,limit: 3 //每页默认显示的数量
|
||||
,totalRow: true
|
||||
//,loading: false //请求数据时，是否显示loading
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@ const js = () => {
|
|||
return gulp.src(src).pipe(uglify({
|
||||
output: {
|
||||
ascii_only: true //escape Unicode characters in strings and regexps
|
||||
}
|
||||
},
|
||||
ie: true
|
||||
})).pipe(concat('layui.js', {newLine: ''}))
|
||||
.pipe(header.apply(null, config.comment))
|
||||
.pipe(gulp.dest(dest));
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "layui",
|
||||
"realname": "layui",
|
||||
"version": "2.6.13",
|
||||
"version": "2.7.0",
|
||||
"description": "Classic modular Front-End UI library",
|
||||
"main": "dist/layui.js",
|
||||
"license": "MIT",
|
||||
|
|
|
|||
|
|
@ -673,12 +673,15 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
.layui-form-item .layui-input-inline{float: left; width: 190px; margin-right: 10px;}
|
||||
.layui-form-text .layui-input-inline{width: auto;}
|
||||
|
||||
/* 分割块 */.layui-form-mid{position: relative; float: left; display: block; padding: 9px 0 !important; line-height: 20px; margin-right: 10px;}
|
||||
/* 警告域 */.layui-form-danger:focus
|
||||
,.layui-form-danger+.layui-form-select .layui-input{border-color: #FF5722 !important;}
|
||||
/* 分割块 */
|
||||
.layui-form-mid{position: relative; float: left; display: block; padding: 9px 0 !important; line-height: 20px; margin-right: 10px;}
|
||||
|
||||
/* 警告条 */
|
||||
.layui-form-danger:focus,
|
||||
.layui-form-danger+.layui-form-select .layui-input{border-color: #FF5722 !important;}
|
||||
|
||||
/* 下拉选择 */.layui-form-select{position: relative;}
|
||||
/* 下拉选择 */
|
||||
.layui-form-select{position: relative;}
|
||||
.layui-form-select .layui-input{padding-right: 30px; cursor: pointer;}
|
||||
.layui-form-select .layui-edge{position: absolute; right: 10px; top: 50%; margin-top: -3px; cursor: pointer; border-width: 6px; border-top-color: #c2c2c2; border-top-style: solid; transition: all .3s; -webkit-transition: all .3s;}
|
||||
.layui-form-select dl{display: none; position: absolute; left: 0; top: 42px; padding: 5px 0; z-index: 899; min-width: 100%; border: 1px solid #eee; max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); box-sizing: border-box;}
|
||||
|
|
@ -860,11 +863,12 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
.layui-table-total tr,
|
||||
.layui-table-patch,
|
||||
.layui-table-mend,
|
||||
.layui-table[lay-even] tr:nth-child(even),
|
||||
.layui-table tbody tr:hover,
|
||||
.layui-table-hover,
|
||||
.layui-table-click{background-color: #FAFAFA;}
|
||||
|
||||
.layui-table[lay-even] tr:nth-child(even){background-color: #f2f2f2;}
|
||||
|
||||
.layui-table th,
|
||||
.layui-table td,
|
||||
.layui-table[lay-skin="line"],
|
||||
|
|
@ -902,7 +906,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
.layui-table-view .layui-table[lay-skin="line"]{border-width: 0; border-right-width: 1px;}
|
||||
.layui-table-view .layui-table[lay-skin="row"]{border-width: 0; border-bottom-width: 1px;}
|
||||
.layui-table-view .layui-table th,
|
||||
.layui-table-view .layui-table td{padding: 5px 0; border-top: none; border-left: none;}
|
||||
.layui-table-view .layui-table td{padding: 0; border-top: none; border-left: none;}
|
||||
.layui-table-view .layui-table th.layui-unselect .layui-table-cell span{cursor: pointer;}
|
||||
.layui-table-view .layui-table td{cursor: default;}
|
||||
.layui-table-view .layui-table td[data-edit="text"]{cursor: text;}
|
||||
|
|
@ -914,6 +918,10 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
.layui-table-header{border-width: 0; border-bottom-width: 1px; overflow: hidden;}
|
||||
.layui-table-header .layui-table{margin-bottom: -1px;}
|
||||
|
||||
.layui-table-column{position: relative; width: 100%; min-height: 41px; padding: 8px 16px; border-width: 0; border-bottom-width: 1px;}
|
||||
.layui-table-column .layui-btn-container{margin-bottom: -8px;}
|
||||
.layui-table-column .layui-btn-container .layui-btn{margin-right: 8px; margin-bottom: 8px;}
|
||||
|
||||
.layui-table-tool .layui-inline[lay-event]{position: relative; width: 26px; height: 26px; padding: 5px; line-height: 16px; margin-right: 10px; text-align: center; color: #333; border: 1px solid #ccc; cursor: pointer; -webkit-transition: .5s all; transition: .5s all;}
|
||||
.layui-table-tool .layui-inline[lay-event]:hover{border: 1px solid #999;}
|
||||
.layui-table-tool-temp{padding-right: 120px;}
|
||||
|
|
@ -939,14 +947,14 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc{border-bottom-color: #000;}
|
||||
.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc{border-top-color: #000;}
|
||||
|
||||
.layui-table-cell{height: 28px; line-height: 28px; padding: 0 15px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
|
||||
.layui-table-cell{height: 38px; line-height: 28px; padding: 6px 15px; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
|
||||
.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{top: -1px; padding: 0;}
|
||||
.layui-table-cell .layui-table-link{color: #01AAED;}
|
||||
|
||||
.laytable-cell-checkbox,
|
||||
.laytable-cell-radio,
|
||||
.laytable-cell-space,
|
||||
.laytable-cell-numbers{padding: 0; text-align: center;}
|
||||
.laytable-cell-numbers{text-align: center; -webkit-box-pack: center;}
|
||||
|
||||
.layui-table-body{position: relative; overflow: auto; margin-right: -1px; margin-bottom: -1px;}
|
||||
.layui-table-body .layui-none{line-height: 26px; padding: 30px 15px; text-align: center; color: #999;}
|
||||
|
|
@ -963,7 +971,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
.layui-table-total{margin-bottom: -1px; border-width: 0; border-top-width: 1px; overflow: hidden;}
|
||||
|
||||
|
||||
.layui-table-page{position: relative; width: 100%; padding: 7px 7px 0; border-width: 0; border-top-width: 1px; height: 41px; margin-bottom: -1px; font-size: 12px; white-space: nowrap; overflow: hidden;}
|
||||
.layui-table-page{z-index: 880; border-width: 0; border-top-width: 1px; margin-bottom: -1px; white-space: nowrap; overflow: hidden;}
|
||||
.layui-table-page>div{height: 26px;}
|
||||
.layui-table-page .layui-laypage{margin: 0;}
|
||||
.layui-table-page .layui-laypage a,
|
||||
|
|
@ -971,18 +979,19 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
.layui-table-page .layui-laypage a,
|
||||
.layui-table-page .layui-laypage span.layui-laypage-curr{padding: 0 12px;}
|
||||
.layui-table-page .layui-laypage span{margin-left: 0; padding: 0;}
|
||||
.layui-table-page .layui-laypage .layui-laypage-prev{margin-left: -7px!important;}
|
||||
.layui-table-page .layui-laypage .layui-laypage-prev{margin-left: -11px!important;}
|
||||
.layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em{left: 0; top: 0; padding: 0;}
|
||||
.layui-table-page .layui-laypage input,
|
||||
.layui-table-page .layui-laypage button{height: 26px; line-height: 26px; }
|
||||
.layui-table-page .layui-laypage input{width: 40px;}
|
||||
.layui-table-page .layui-laypage button{padding: 0 10px;}
|
||||
.layui-table-page select{height: 18px;}
|
||||
.layui-table-view select[lay-ignore]{display: inline-block;}
|
||||
.layui-table-pagebar{float: right; line-height: 32px;}
|
||||
|
||||
.layui-table-view select[lay-ignore]{display: inline-block;}
|
||||
.layui-table-patch .layui-table-cell{padding: 0; width: 30px;}
|
||||
|
||||
.layui-table-edit{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 14px 1px; border-radius: 0; box-shadow: 1px 1px 20px rgba(0,0,0,.15)}
|
||||
.layui-table-edit{position: absolute; left: 0; top: 0; z-index: 900; min-width: 100%; min-height: 100%; padding: 0 14px 1px; border-radius: 0; box-shadow: 1px 1px 20px rgba(0,0,0,.15); background-color: #fff;}
|
||||
.layui-table-edit:focus{border-color: #5FB878!important;}
|
||||
select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
|
||||
.layui-table-view .layui-form-switch,
|
||||
|
|
@ -998,7 +1007,7 @@ select.layui-table-edit{padding: 0 0 0 10px; border-color: #d2d2d2;}
|
|||
.layui-table-grid-down:hover{background-color: #fbfbfb;}
|
||||
|
||||
body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-shadow: 0 1px 6px rgba(0,0,0,.12);}
|
||||
.layui-table-tips-main{margin: -44px 0 0 -1px; max-height: 150px; padding: 8px 15px; font-size: 14px; overflow-y: scroll; background-color: #fff; color: #5F5F5F;}
|
||||
.layui-table-tips-main{margin: -49px 0 0 -1px; max-height: 150px; padding: 8px 15px; font-size: 14px; overflow-y: scroll; background-color: #fff; color: #5F5F5F;}
|
||||
.layui-table-tips-c{position: absolute; right: -3px; top: -13px; width: 20px; height: 20px; padding: 3px; cursor: pointer; background-color: #5F5F5F; border-radius: 50%; color: #fff;}
|
||||
.layui-table-tips-c:hover{background-color: #777;}
|
||||
.layui-table-tips-c:before{position: relative; right: -2px;}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
|
||||
|
||||
/* 默认风格 */
|
||||
.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 12px;}
|
||||
.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 13px;}
|
||||
.layui-code-h3{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;}
|
||||
.layui-code-h3 a{position: absolute; right: 10px; top: 0; color: #999;}
|
||||
.layui-code-view .layui-code-ol{position: relative; overflow: auto;}
|
||||
|
|
@ -19,7 +19,7 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
|
|||
.layui-code-view .layui-code-ol li:last-child{padding-bottom: 10px;}
|
||||
.layui-code-view pre{margin: 0;}
|
||||
|
||||
/* notepadd++风格 */
|
||||
/* notepadd++ 风格 */
|
||||
.layui-code-notepad{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E}
|
||||
.layui-code-notepad .layui-code-h3{border-bottom: none;}
|
||||
.layui-code-notepad .layui-code-ol li{background-color: #3F3F3F; border-left: none;}
|
||||
|
|
|
|||
18
src/layui.js
18
src/layui.js
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
,Layui = function(){
|
||||
this.v = '2.6.13'; // layui 版本号
|
||||
this.v = '2.7.0'; // layui 版本号
|
||||
}
|
||||
|
||||
//识别预先可能定义的指定全局对象
|
||||
|
|
@ -232,6 +232,22 @@
|
|||
return that;
|
||||
};
|
||||
|
||||
// 弃用原有的指定模块，以便重新扩展新的同名模块
|
||||
Layui.prototype.disuse = function(apps){
|
||||
var that = this;
|
||||
apps = that.isArray(apps) ? apps : [apps];
|
||||
that.each(apps, function (index, item) {
|
||||
if (!config.status[item]) {
|
||||
return error('module ' + item + ' is not exist');
|
||||
}
|
||||
delete that[item];
|
||||
delete modules[item];
|
||||
delete that.modules[item];
|
||||
delete config.status[item];
|
||||
delete config.modules[item];
|
||||
});
|
||||
};
|
||||
|
||||
//获取节点的 style 属性值
|
||||
Layui.prototype.getStyle = function(node, name){
|
||||
var style = node.currentStyle ? node.currentStyle : win.getComputedStyle(node, null);
|
||||
|
|
|
|||
|
|
@ -276,11 +276,15 @@ layui.define('jquery', function(exports){
|
|||
|
||||
that.haveSlide = true;
|
||||
|
||||
layui.event.call(this, MOD_NAME, 'change('+ filter +')', {
|
||||
// 回调返回的参数
|
||||
var params = {
|
||||
index: options.index
|
||||
,prevIndex: thisIndex
|
||||
,item: elemItem.eq(options.index)
|
||||
});
|
||||
};
|
||||
|
||||
typeof options.change === 'function' && options.change(params);
|
||||
layui.event.call(this, MOD_NAME, 'change('+ filter +')', params);
|
||||
};
|
||||
|
||||
//事件处理
|
||||
|
|
@ -292,8 +296,10 @@ layui.define('jquery', function(exports){
|
|||
|
||||
//移入移出容器
|
||||
options.elem.on('mouseenter', function(){
|
||||
if (that.config.autoplay === 'always') return;
|
||||
clearInterval(that.timer);
|
||||
}).on('mouseleave', function(){
|
||||
if (that.config.autoplay === 'always') return;
|
||||
that.autoplay();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
/**
|
||||
* code 代码修饰器
|
||||
* MIT Licensed
|
||||
* code
|
||||
* 代码区简易修饰
|
||||
*/
|
||||
|
||||
layui.define('jquery', function(exports){
|
||||
layui.define(['util'], function(exports){
|
||||
"use strict";
|
||||
|
||||
var $ = layui.$;
|
||||
var util = layui.util;
|
||||
|
||||
exports('code', function(options){
|
||||
var elems = [];
|
||||
var trim = function(str){
|
||||
return $.trim(str).replace(/^\n|\n$/, '');
|
||||
}
|
||||
|
||||
options = options || {};
|
||||
options.elem = $(options.elem||'.layui-code');
|
||||
options.lang = 'lang' in options ? options.lang : 'code';
|
||||
|
|
@ -19,12 +24,12 @@ layui.define('jquery', function(exports){
|
|||
});
|
||||
|
||||
layui.each(elems.reverse(), function(index, item){
|
||||
var othis = $(item), html = othis.html();
|
||||
var othis = $(item);
|
||||
var html = trim(othis.html());
|
||||
|
||||
//转义HTML标签
|
||||
// 转义 HTML 标签
|
||||
if(othis.attr('lay-encode') || options.encode){
|
||||
html = html.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&')
|
||||
.replace(/</g, '<').replace(/>/g, '>').replace(/'/g, ''').replace(/"/g, '"')
|
||||
html = util.escape(html);
|
||||
}
|
||||
|
||||
othis.html('<ol class="layui-code-ol"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></ol>')
|
||||
|
|
|
|||
|
|
@ -62,6 +62,13 @@ layui.define('layer', function(exports){
|
|||
$.extend(true, that.config.verify, settings);
|
||||
return that;
|
||||
};
|
||||
|
||||
//获取指定表单对象
|
||||
Form.prototype.getFormElem = function(filter){
|
||||
return $(ELEM + function(){
|
||||
return filter ? ('[lay-filter="' + filter +'"]') : '';
|
||||
}());
|
||||
};
|
||||
|
||||
//表单事件
|
||||
Form.prototype.on = function(events, callback){
|
||||
|
|
@ -71,7 +78,7 @@ layui.define('layer', function(exports){
|
|||
//赋值/取值
|
||||
Form.prototype.val = function(filter, object){
|
||||
var that = this
|
||||
,formElem = $(ELEM + '[lay-filter="' + filter +'"]');
|
||||
,formElem = that.getFormElem(filter);
|
||||
|
||||
//遍历
|
||||
formElem.each(function(index, item){
|
||||
|
|
@ -109,7 +116,7 @@ layui.define('layer', function(exports){
|
|||
|
||||
//取值
|
||||
Form.prototype.getValue = function(filter, itemForm){
|
||||
itemForm = itemForm || $(ELEM + '[lay-filter="' + filter +'"]').eq(0);
|
||||
itemForm = itemForm || this.getFormElem(filter);
|
||||
|
||||
var nameIndex = {} //数组 name 索引
|
||||
,field = {}
|
||||
|
|
@ -145,19 +152,19 @@ layui.define('layer', function(exports){
|
|||
}())
|
||||
,items = {
|
||||
//输入框
|
||||
input: function(){
|
||||
var inputs = elemForm.find('input,textarea');
|
||||
|
||||
input: function(elem){
|
||||
var inputs = elem || elemForm.find('input,textarea');
|
||||
|
||||
//初始化全局的 autocomplete
|
||||
options.autocomplete && inputs.attr('autocomplete', options.autocomplete);
|
||||
}
|
||||
|
||||
//下拉选择框
|
||||
,select: function(){
|
||||
,select: function(elem){
|
||||
var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title'
|
||||
,NONE = 'layui-select-none', initValue = '', thatInput
|
||||
,selects = elemForm.find('select')
|
||||
|
||||
,selects = elem || elemForm.find('select')
|
||||
|
||||
//隐藏 select
|
||||
,hide = function(e, clear){
|
||||
if(!$(e.target).parent().hasClass(TITLE) || clear){
|
||||
|
|
@ -174,10 +181,14 @@ layui.define('layer', function(exports){
|
|||
,input = title.find('input')
|
||||
,dl = reElem.find('dl')
|
||||
,dds = dl.children('dd')
|
||||
,dts = dl.children('dt') // select分组dt元素
|
||||
,index = this.selectedIndex //当前选中的索引
|
||||
,nearElem; //select 组件当前选中的附近元素，用于辅助快捷键功能
|
||||
|
||||
if(disabled) return;
|
||||
|
||||
// 搜索项
|
||||
var laySearch = select.attr('lay-search');
|
||||
|
||||
//展开下拉
|
||||
var showDown = function(){
|
||||
|
|
@ -187,6 +198,7 @@ layui.define('layer', function(exports){
|
|||
index = select[0].selectedIndex; //获取最新的 selectedIndex
|
||||
reElem.addClass(CLASS+'ed');
|
||||
dds.removeClass(HIDE);
|
||||
dts.removeClass(HIDE);
|
||||
nearElem = null;
|
||||
|
||||
//初始选中样式
|
||||
|
|
@ -337,16 +349,32 @@ layui.define('layer', function(exports){
|
|||
}
|
||||
});
|
||||
|
||||
//检测值是否不属于 select 项
|
||||
// 检测值是否不属于 select 项
|
||||
var notOption = function(value, callback, origin){
|
||||
var num = 0;
|
||||
layui.each(dds, function(){
|
||||
var othis = $(this)
|
||||
,text = othis.text()
|
||||
,not = text.indexOf(value) === -1;
|
||||
var othis = $(this);
|
||||
var text = othis.text();
|
||||
|
||||
// 是否区分大小写
|
||||
if(laySearch !== 'exact'){
|
||||
text = text.toLowerCase();
|
||||
value = value.toLowerCase();
|
||||
}
|
||||
|
||||
// 匹配
|
||||
var not = text.indexOf(value) === -1;
|
||||
|
||||
if(value === '' || (origin === 'blur') ? value !== text : not) num++;
|
||||
origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE);
|
||||
});
|
||||
// 处理select分组元素
|
||||
origin === 'keyup' && layui.each(dts, function(){
|
||||
var othis = $(this)
|
||||
,thisDds = othis.nextUntil('dt').filter('dd') // 当前分组下的dd元素
|
||||
,allHide = thisDds.length == thisDds.filter('.' + HIDE).length; // 当前分组下所有dd元素都隐藏了
|
||||
othis[allHide ? 'addClass' : 'removeClass'](HIDE);
|
||||
});
|
||||
var none = num === dds.length;
|
||||
return callback(none), none;
|
||||
};
|
||||
|
|
@ -480,13 +508,13 @@ layui.define('layer', function(exports){
|
|||
}
|
||||
|
||||
//复选框/开关
|
||||
,checkbox: function(){
|
||||
,checkbox: function(elem){
|
||||
var CLASS = {
|
||||
checkbox: ['layui-form-checkbox', 'layui-form-checked', 'checkbox']
|
||||
,_switch: ['layui-form-switch', 'layui-form-onswitch', 'switch']
|
||||
}
|
||||
,checks = elemForm.find('input[type=checkbox]')
|
||||
|
||||
,checks = elem || elemForm.find('input[type=checkbox]')
|
||||
|
||||
,events = function(reElem, RE_CLASS){
|
||||
var check = $(this);
|
||||
|
||||
|
|
@ -552,10 +580,10 @@ layui.define('layer', function(exports){
|
|||
}
|
||||
|
||||
//单选框
|
||||
,radio: function(){
|
||||
,radio: function(elem){
|
||||
var CLASS = 'layui-form-radio', ICON = ['', '']
|
||||
,radios = elemForm.find('input[type=radio]')
|
||||
|
||||
,radios = elem || elemForm.find('input[type=radio]')
|
||||
|
||||
,events = function(reElem){
|
||||
var radio = $(this), ANIM = 'layui-anim-scaleSpring';
|
||||
|
||||
|
|
@ -611,34 +639,59 @@ layui.define('layer', function(exports){
|
|||
});
|
||||
}
|
||||
};
|
||||
type ? (
|
||||
items[type] ? items[type]() : hint.error('不支持的 "'+ type + '" 表单渲染')
|
||||
) : layui.each(items, function(index, item){
|
||||
item();
|
||||
});
|
||||
if (layui.type(type) === 'object') {
|
||||
// jquery 对象
|
||||
type.each(function (index, item) {
|
||||
var elem = $(item);
|
||||
if (!elem.closest(ELEM).length) {
|
||||
// 如果不是存在layui-form中的直接跳过
|
||||
return;
|
||||
}
|
||||
if (item.tagName === 'SELECT') {
|
||||
items['select'](elem);
|
||||
} else if (item.tagName === 'INPUT') {
|
||||
var itemType = item.type;
|
||||
if (itemType === 'checkbox' || itemType === 'radio') {
|
||||
items[itemType](elem);
|
||||
} else {
|
||||
items['input'](elem);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
type ? (
|
||||
items[type] ? items[type]() : hint.error('不支持的 "'+ type + '" 表单渲染')
|
||||
) : layui.each(items, function(index, item){
|
||||
item();
|
||||
});
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
//表单提交校验
|
||||
var submit = function(){
|
||||
var stop = null //验证不通过状态
|
||||
,verify = form.config.verify //验证规则
|
||||
,DANGER = 'layui-form-danger' //警示样式
|
||||
,field = {} //字段集合
|
||||
,button = $(this) //当前触发的按钮
|
||||
,elem = button.parents(ELEM).eq(0) //当前所在表单域
|
||||
,verifyElem = elem.find('*[lay-verify]') //获取需要校验的元素
|
||||
,formElem = button.parents('form')[0] //获取当前所在的 form 元素，如果存在的话
|
||||
,filter = button.attr('lay-filter'); //获取过滤器
|
||||
|
||||
|
||||
|
||||
// elem 即要验证的区域表单选择器 - return true or false
|
||||
Form.prototype.validate = function(elem){
|
||||
var stop = null; //验证不通过状态
|
||||
var verify = form.config.verify; //验证规则
|
||||
var DANGER = 'layui-form-danger'; //警示样式
|
||||
|
||||
elem = $(elem);
|
||||
|
||||
// 节点不存在可视为 true
|
||||
if(!elem[0]) return !0;
|
||||
|
||||
// 若节点不存在特定属性，则查找容器内有待验证的子节点
|
||||
if(!elem.attr('lay-verify')){
|
||||
elem = elem.find('*[lay-verify]');
|
||||
}
|
||||
|
||||
//开始校验
|
||||
layui.each(verifyElem, function(_, item){
|
||||
var othis = $(this)
|
||||
,vers = othis.attr('lay-verify').split('|')
|
||||
,verType = othis.attr('lay-verType') //提示方式
|
||||
,value = othis.val();
|
||||
|
||||
layui.each(elem, function(_, item){
|
||||
var othis = $(this);
|
||||
var verifyStr = othis.attr('lay-verify') || '';
|
||||
var vers = verifyStr.split('|');
|
||||
var verType = othis.attr('lay-verType'); //提示方式
|
||||
var value = othis.val();
|
||||
|
||||
othis.removeClass(DANGER); //移除警示样式
|
||||
|
||||
//遍历元素绑定的验证规则
|
||||
|
|
@ -678,21 +731,27 @@ layui.define('layer', function(exports){
|
|||
else if(/\bstring|number\b/.test(typeof errorText)){
|
||||
layer.msg(errorText, {icon: 5, shift: 6});
|
||||
}
|
||||
|
||||
setTimeout(function(){
|
||||
(isForm2Elem ? othis.next().find('input') : item).focus();
|
||||
}, 7);
|
||||
|
||||
//非移动设备自动定位焦点
|
||||
/*
|
||||
// 非移动设备自动定位焦点
|
||||
if(!device.mobile){
|
||||
setTimeout(function(){
|
||||
(isForm2Elem ? othis.next().find('input') : item).focus();
|
||||
}, 7);
|
||||
} else { //移动设备定位
|
||||
} else { // 移动设备定位
|
||||
$dom.scrollTop(function(){
|
||||
try {
|
||||
return (isForm2Elem ? othis.next() : othis).offset().top - 15
|
||||
return (isForm2Elem ? othis.next() : othis).focus().offset().top - 15
|
||||
} catch(e){
|
||||
return 0;
|
||||
}
|
||||
}());
|
||||
}
|
||||
*/
|
||||
|
||||
othis.addClass(DANGER);
|
||||
return stop = true;
|
||||
|
|
@ -701,18 +760,46 @@ layui.define('layer', function(exports){
|
|||
});
|
||||
if(stop) return stop;
|
||||
});
|
||||
|
||||
if(stop) return false;
|
||||
|
||||
|
||||
return !stop;
|
||||
}
|
||||
|
||||
// 提交表单并校验
|
||||
var submit = Form.prototype.submit = function(filter, callback){
|
||||
var field = {}; //字段集合
|
||||
var button = $(this); //当前触发的按钮
|
||||
|
||||
// 表单域 lay-filter 属性值
|
||||
var layFilter = typeof filter === 'string'
|
||||
? filter
|
||||
: button.attr('lay-filter');
|
||||
|
||||
// 当前所在表单域
|
||||
var elem = this.getFormElem
|
||||
? this.getFormElem(layFilter)
|
||||
: button.parents(ELEM).eq(0);
|
||||
|
||||
// 获取需要校验的元素
|
||||
var verifyElem = elem.find('*[lay-verify]');
|
||||
|
||||
//开始校验
|
||||
if(!form.validate(verifyElem)) return false;
|
||||
|
||||
//获取当前表单值
|
||||
field = form.getValue(null, elem);
|
||||
|
||||
//返回的参数
|
||||
var params = {
|
||||
elem: this.getFormElem ? (window.event && window.event.target) : this //触发事件的对象
|
||||
,form: this.getFormElem ? elem[0] : button.parents('form')[0] //当前所在的 form 元素，如果存在的话
|
||||
,field: field //当前表单数据
|
||||
};
|
||||
|
||||
//回调
|
||||
typeof callback === 'function' && callback(params);
|
||||
|
||||
//返回字段
|
||||
return layui.event.call(this, MOD_NAME, 'submit('+ filter +')', {
|
||||
elem: this
|
||||
,form: formElem
|
||||
,field: field
|
||||
});
|
||||
//事件
|
||||
return layui.event.call(this, MOD_NAME, 'submit('+ layFilter +')', params);
|
||||
};
|
||||
|
||||
//自动完成渲染
|
||||
|
|
|
|||
|
|
@ -175,6 +175,8 @@
|
|||
if(obj.clickType === 'right'){
|
||||
top = winArea() - elemHeight - margin*2;
|
||||
if(top < 0) top = 0; //不能溢出窗口顶部
|
||||
} else {
|
||||
top = margin; // 位置计算逻辑完备性处理
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -419,5 +421,4 @@
|
|||
});
|
||||
}
|
||||
|
||||
}(window, window.document);
|
||||
|
||||
}(window, window.document);
|
||||
|
|
@ -25,7 +25,9 @@
|
|||
//外部调用
|
||||
,laydate = {
|
||||
v: '5.3.1' //layDate 版本号
|
||||
,config: {} //全局配置项
|
||||
,config: {
|
||||
weekStart: 0, // 默认周日一周的开始
|
||||
} //全局配置项
|
||||
,index: (window.laydate && window.laydate.v) ? 100000 : 0
|
||||
,path: GLOBAL.laydate_dir || ready.getPath
|
||||
|
||||
|
|
@ -213,7 +215,16 @@
|
|||
|
||||
//将日期格式转化成数组
|
||||
that.format = thisModule.formatArr(options.format);
|
||||
|
||||
|
||||
// 设置了一周的开始是周几，此处做一个控制
|
||||
if (options.weekStart) {
|
||||
if (!/^[0-6]$/.test(options.weekStart)) {
|
||||
var lang = that.lang();
|
||||
options.weekStart = lang.weeks.indexOf(options.weekStart);
|
||||
if (options.weekStart === -1) options.weekStart = 0;
|
||||
}
|
||||
}
|
||||
|
||||
//生成正则表达式
|
||||
that.EXP_IF = '';
|
||||
that.EXP_SPLIT = '';
|
||||
|
|
@ -330,7 +341,7 @@
|
|||
//主面板
|
||||
,elem = that.elem = lay.elem('div', {
|
||||
id: that.elemID
|
||||
,'class': [
|
||||
,"class": [
|
||||
'layui-laydate'
|
||||
,options.range ? ' layui-laydate-range' : ''
|
||||
,isStatic ? (' '+ ELEM_STATIC) : ''
|
||||
|
|
@ -346,7 +357,7 @@
|
|||
|
||||
//底部区域
|
||||
,divFooter = that.footer = lay.elem('div', {
|
||||
'class': ELEM_FOOTER
|
||||
"class": ELEM_FOOTER
|
||||
});
|
||||
|
||||
if(options.zIndex) elem.style.zIndex = options.zIndex;
|
||||
|
|
@ -359,38 +370,38 @@
|
|||
|
||||
//头部区域
|
||||
var divHeader = lay.elem('div', {
|
||||
'class': 'layui-laydate-header'
|
||||
"class": 'layui-laydate-header'
|
||||
})
|
||||
|
||||
//左右切换
|
||||
,headerChild = [function(){ //上一年
|
||||
var elem = lay.elem('i', {
|
||||
'class': 'layui-icon laydate-icon laydate-prev-y'
|
||||
"class": 'layui-icon laydate-icon laydate-prev-y'
|
||||
});
|
||||
elem.innerHTML = '';
|
||||
return elem;
|
||||
}(), function(){ //上一月
|
||||
var elem = lay.elem('i', {
|
||||
'class': 'layui-icon laydate-icon laydate-prev-m'
|
||||
"class": 'layui-icon laydate-icon laydate-prev-m'
|
||||
});
|
||||
elem.innerHTML = '';
|
||||
return elem;
|
||||
}(), function(){ //年月选择
|
||||
var elem = lay.elem('div', {
|
||||
'class': 'laydate-set-ym'
|
||||
"class": 'laydate-set-ym'
|
||||
}), spanY = lay.elem('span'), spanM = lay.elem('span');
|
||||
elem.appendChild(spanY);
|
||||
elem.appendChild(spanM);
|
||||
return elem;
|
||||
}(), function(){ //下一月
|
||||
var elem = lay.elem('i', {
|
||||
'class': 'layui-icon laydate-icon laydate-next-m'
|
||||
"class": 'layui-icon laydate-icon laydate-next-m'
|
||||
});
|
||||
elem.innerHTML = '';
|
||||
return elem;
|
||||
}(), function(){ //下一年
|
||||
var elem = lay.elem('i', {
|
||||
'class': 'layui-icon laydate-icon laydate-next-y'
|
||||
"class": 'layui-icon laydate-icon laydate-next-y'
|
||||
});
|
||||
elem.innerHTML = '';
|
||||
return elem;
|
||||
|
|
@ -398,7 +409,7 @@
|
|||
|
||||
//日历内容区域
|
||||
,divContent = lay.elem('div', {
|
||||
'class': 'layui-laydate-content'
|
||||
"class": 'layui-laydate-content'
|
||||
})
|
||||
,table = lay.elem('table')
|
||||
,thead = lay.elem('thead'), theadTr = lay.elem('tr');
|
||||
|
|
@ -415,7 +426,7 @@
|
|||
lay.each(new Array(7), function(j){
|
||||
if(i === 0){
|
||||
var th = lay.elem('th');
|
||||
th.innerHTML = lang.weeks[j];
|
||||
th.innerHTML = lang.weeks[(j + options.weekStart) % 7];
|
||||
theadTr.appendChild(th);
|
||||
}
|
||||
tr.insertCell(j);
|
||||
|
|
@ -425,7 +436,7 @@
|
|||
divContent.appendChild(table);
|
||||
|
||||
elemMain[i] = lay.elem('div', {
|
||||
'class': 'layui-laydate-main laydate-main-list-'+ i
|
||||
"class": 'layui-laydate-main laydate-main-list-'+ i
|
||||
});
|
||||
|
||||
elemMain[i].appendChild(divHeader);
|
||||
|
|
@ -538,7 +549,7 @@
|
|||
var that = this
|
||||
,options = that.config
|
||||
,div = lay.elem('div', {
|
||||
'class': ELEM_HINT
|
||||
"class": ELEM_HINT
|
||||
});
|
||||
|
||||
if(!that.elem) return;
|
||||
|
|
@ -845,8 +856,8 @@
|
|||
|
||||
//计算当前月第一天的星期
|
||||
thisDate.setFullYear(dateTime.year, dateTime.month, 1);
|
||||
startWeek = thisDate.getDay();
|
||||
|
||||
startWeek = (thisDate.getDay() + (7 - options.weekStart)) % 7;
|
||||
|
||||
prevMaxDate = laydate.getEndDate(dateTime.month || 12, dateTime.year); //计算上个月的最后一天
|
||||
thisMaxDate = laydate.getEndDate(dateTime.month + 1, dateTime.year); //计算当前月的最后一天
|
||||
|
||||
|
|
@ -854,7 +865,7 @@
|
|||
lay.each(tds, function(index_, item){
|
||||
var YMD = [dateTime.year, dateTime.month], st = 0;
|
||||
item = lay(item);
|
||||
item.removeAttr('class');
|
||||
item.removeAttr("class");
|
||||
if(index_ < startWeek){
|
||||
st = prevMaxDate - startWeek + index_;
|
||||
item.addClass('laydate-day-prev');
|
||||
|
|
@ -937,7 +948,7 @@
|
|||
,isAlone = options.range && options.type !== 'date' && options.type !== 'datetime' //独立范围选择器
|
||||
|
||||
,ul = lay.elem('ul', {
|
||||
'class': ELEM_LIST + ' ' + ({
|
||||
"class": ELEM_LIST + ' ' + ({
|
||||
year: 'laydate-year-list'
|
||||
,month: 'laydate-month-list'
|
||||
,time: 'laydate-time-list'
|
||||
|
|
@ -1120,7 +1131,7 @@
|
|||
});
|
||||
} else { //时间选择面板 - 选择事件
|
||||
var span = lay.elem('span', {
|
||||
'class': ELEM_TIME_TEXT
|
||||
"class": ELEM_TIME_TEXT
|
||||
})
|
||||
|
||||
//滚动条定位
|
||||
|
|
@ -1572,7 +1583,7 @@
|
|||
|
||||
//是否输入框
|
||||
Class.prototype.isInput = function(elem){
|
||||
return /input|textarea/.test(elem.tagName.toLocaleLowerCase());
|
||||
return /input|textarea/.test(elem.tagName.toLocaleLowerCase()) || /INPUT|TEXTAREA/.test(elem.tagName);
|
||||
};
|
||||
|
||||
//绑定的元素事件处理
|
||||
|
|
|
|||
|
|
@ -28,35 +28,43 @@ layui.define(function(exports){
|
|||
}
|
||||
};
|
||||
|
||||
//分页视图
|
||||
// 分页视图
|
||||
Class.prototype.view = function(){
|
||||
var that = this
|
||||
,config = that.config
|
||||
,groups = config.groups = 'groups' in config ? (config.groups|0) : 5; //连续页码个数
|
||||
var that = this;
|
||||
var config = that.config;
|
||||
|
||||
// 连续页码个数
|
||||
var groups = config.groups = 'groups' in config
|
||||
? (Number(config.groups) || 0)
|
||||
: 5;
|
||||
|
||||
//排版
|
||||
// 排版
|
||||
config.layout = typeof config.layout === 'object'
|
||||
? config.layout
|
||||
: ['prev', 'page', 'next'];
|
||||
|
||||
config.count = config.count|0; //数据总数
|
||||
config.curr = (config.curr|0) || 1; //当前页
|
||||
config.count = Number(config.count) || 0; // 数据总数
|
||||
config.curr = Number(config.curr) || 1; // 当前页
|
||||
|
||||
//每页条数的选择项
|
||||
// 每页条数的选择项
|
||||
config.limits = typeof config.limits === 'object'
|
||||
? config.limits
|
||||
: [10, 20, 30, 40, 50];
|
||||
config.limit = (config.limit|0) || 10; //默认条数
|
||||
|
||||
// 默认条数
|
||||
config.limit = Number(config.limit) || 10;
|
||||
|
||||
//总页数
|
||||
config.pages = Math.ceil(config.count/config.limit) || 1;
|
||||
|
||||
//当前页不能超过总页数
|
||||
// 当前页不能超过总页数
|
||||
if(config.curr > config.pages){
|
||||
config.curr = config.pages;
|
||||
} else if(config.curr < 1) { // 当前分页不能小于 1
|
||||
config.curr = 1;
|
||||
}
|
||||
|
||||
//连续分页个数不能低于0且不能大于总页数
|
||||
//连续分页个数不能低于 0 且不能大于总页数
|
||||
if(groups < 0){
|
||||
groups = 1;
|
||||
} else if (groups > config.pages){
|
||||
|
|
@ -197,7 +205,7 @@ layui.define(function(exports){
|
|||
,input = elem[tag]('input')[0]
|
||||
,select = elem[tag]('select')[0]
|
||||
,skip = function(){
|
||||
var curr = input.value.replace(/\s|\D/g, '')|0;
|
||||
var curr = Number(input.value.replace(/\s|\D/g, ''));
|
||||
if(curr){
|
||||
config.curr = curr;
|
||||
that.render();
|
||||
|
|
@ -210,7 +218,7 @@ layui.define(function(exports){
|
|||
for(var i = 0, len = childs.length; i < len; i++){
|
||||
if(childs[i].nodeName.toLowerCase() === 'a'){
|
||||
laypage.on(childs[i], 'click', function(){
|
||||
var curr = this.getAttribute('data-page')|0;
|
||||
var curr = Number(this.getAttribute('data-page'));
|
||||
if(curr < 1 || curr > config.pages) return;
|
||||
config.curr = curr;
|
||||
that.render();
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
layui.define('jquery', function(exports){
|
||||
"use strict";
|
||||
var $ = layui.jquery
|
||||
var $ = layui.$
|
||||
|
||||
//外部接口
|
||||
,slider = {
|
||||
|
|
@ -111,7 +111,7 @@ layui.define('jquery', function(exports){
|
|||
var theme = options.disabled ? '#c2c2c2' : options.theme;
|
||||
|
||||
//滑块
|
||||
var temp = '<div class="layui-slider '+ (options.type === 'vertical' ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="layui-slider-tips"></div>' : '') +
|
||||
var temp = '<div class="layui-slider '+ (options.type === 'vertical' ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="'+ SLIDER_TIPS +'"></div>' : '') +
|
||||
'<div class="layui-slider-bar" style="background:'+ theme +'; '+ (options.type === 'vertical' ? 'height' : 'width') +':'+ scale +';'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || 0) +';"></div><div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || scale) +';">' +
|
||||
'<div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>'+ (options.range ? '<div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ scaleSec +';"><div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>' : '') +'</div>';
|
||||
|
||||
|
|
@ -174,6 +174,7 @@ layui.define('jquery', function(exports){
|
|||
};
|
||||
|
||||
//划过滑块显示数值
|
||||
var timer;
|
||||
that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
|
||||
var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth
|
||||
,sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP)
|
||||
|
|
@ -182,12 +183,24 @@ layui.define('jquery', function(exports){
|
|||
,value = $(this).parent().data('value')
|
||||
,tipsTxt = options.setTips ? options.setTips(value) : value;
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt);
|
||||
if(options.type === 'vertical'){
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css({"bottom":left + '%', "margin-bottom":"20px", "display":"inline-block"});
|
||||
}else{
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css({"left":left + '%', "display":"inline-block"});
|
||||
};
|
||||
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function(){
|
||||
if(options.type === 'vertical'){
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css({
|
||||
"bottom": left + '%',
|
||||
"margin-bottom": "20px",
|
||||
"display": "inline-block"
|
||||
});
|
||||
} else {
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css({
|
||||
"left": left + '%',
|
||||
"display": "inline-block"
|
||||
});
|
||||
};
|
||||
}, 300);
|
||||
}).on('mouseout', function(){
|
||||
clearTimeout(timer);
|
||||
that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none");
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,17 +6,17 @@
|
|||
layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
||||
"use strict";
|
||||
|
||||
var $ = layui.$
|
||||
,laytpl = layui.laytpl
|
||||
,laypage = layui.laypage
|
||||
,layer = layui.layer
|
||||
,form = layui.form
|
||||
,util = layui.util
|
||||
,hint = layui.hint()
|
||||
,device = layui.device()
|
||||
var $ = layui.$;
|
||||
var laytpl = layui.laytpl;
|
||||
var laypage = layui.laypage;
|
||||
var layer = layui.layer;
|
||||
var form = layui.form;
|
||||
var util = layui.util;
|
||||
var hint = layui.hint();
|
||||
var device = layui.device();
|
||||
|
||||
//外部接口
|
||||
,table = {
|
||||
var table = {
|
||||
config: {
|
||||
checkName: 'LAY_CHECKED' //是否选中状态的字段名
|
||||
,indexName: 'LAY_TABLE_INDEX' //初始下标索引名，用于恢复排序
|
||||
|
|
@ -53,6 +53,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
,reload: function(options, deep){
|
||||
that.reload.call(that, options, deep);
|
||||
}
|
||||
,reloadData: function(options, deep){
|
||||
table.reloadData(id, options, deep);
|
||||
}
|
||||
,setColsWidth: function(){
|
||||
that.setColsWidth.call(that);
|
||||
}
|
||||
|
|
@ -95,7 +98,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
}
|
||||
|
||||
//字符常量
|
||||
,MOD_NAME = 'table', ELEM = '.layui-table', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled', NONE = 'layui-none'
|
||||
,MOD_NAME = 'table', ELEM = '.layui-table', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', HIDE_V = 'layui-hide-v', DISABLED = 'layui-disabled', NONE = 'layui-none'
|
||||
|
||||
,ELEM_VIEW = 'layui-table-view', ELEM_TOOL = '.layui-table-tool', ELEM_BOX = '.layui-table-box', ELEM_INIT = '.layui-table-init', ELEM_HEADER = '.layui-table-header', ELEM_BODY = '.layui-table-body', ELEM_MAIN = '.layui-table-main', ELEM_FIXED = '.layui-table-fixed', ELEM_FIXL = '.layui-table-fixed-l', ELEM_FIXR = '.layui-table-fixed-r', ELEM_TOTAL = '.layui-table-total', ELEM_PAGE = '.layui-table-page', ELEM_SORT = '.layui-table-sort', ELEM_EDIT = 'layui-table-edit', ELEM_HOVER = 'layui-table-hover'
|
||||
|
||||
|
|
@ -158,8 +161,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
,'</table>'].join('')
|
||||
|
||||
//主模板
|
||||
,TPL_MAIN = ['<div class="layui-form layui-border-box {{=d.VIEW_CLASS}}{{# if(d.data.className){ }} {{= d.data.className }}{{# } }}" lay-filter="LAY-table-{{=d.index}}" lay-id="{{= d.data.id }}" style="{{# if(d.data.width){ }}width:{{=d.data.width}}px;{{# } }} {{# if(d.data.height){ }}height:{{=d.data.height}}px;{{# } }}">'
|
||||
|
||||
,TPL_MAIN = [
|
||||
,'{{# if(d.data.toolbar){ }}'
|
||||
,'<div class="layui-table-tool">'
|
||||
,'<div class="layui-table-tool-temp"></div>'
|
||||
|
|
@ -215,9 +217,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
,'</div>'
|
||||
,'{{# } }}'
|
||||
|
||||
,'{{# if(d.data.page){ }}'
|
||||
,'<div class="layui-table-page">'
|
||||
,'<div id="layui-table-page{{=d.index}}"></div>'
|
||||
,'{{# if(d.data.page || d.data.pagebar){ }}'
|
||||
,'<div class="layui-table-column layui-table-page">'
|
||||
,'<div class="layui-inline layui-table-pageview" id="layui-table-page{{=d.index}}"></div>'
|
||||
,'</div>'
|
||||
,'{{# } }}'
|
||||
|
||||
|
|
@ -231,8 +233,17 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
,' }'
|
||||
,'{{# });'
|
||||
,'}); }}'
|
||||
,'{{# if(d.data.lineStyle){ }}'
|
||||
,'.layui-table-view-{{= d.index }} .layui-table-body .layui-table .layui-table-cell{'
|
||||
,' display: -webkit-box; -webkit-box-align: center; display: -moz-box; -moz-box-align: center; white-space: normal; {{- d.data.lineStyle }} '
|
||||
,'}'
|
||||
,'.layui-table-view-{{= d.index }} .layui-table-body .layui-table .layui-table-cell:hover{overflow: auto;}'
|
||||
,'{{# } }}'
|
||||
,'{{# if(d.data.css){ }}'
|
||||
,'{{- d.data.css }}'
|
||||
,'{{# } }}'
|
||||
,'</style>'
|
||||
,'</div>'].join('')
|
||||
].join('')
|
||||
|
||||
,_WIN = $(window)
|
||||
,_DOC = $(document)
|
||||
|
|
@ -251,6 +262,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
,loading: true //请求数据时，是否显示 loading
|
||||
,escape: true // 是否开启 HTML 编码功能，即转义 html 原文
|
||||
,cellMinWidth: 60 //所有单元格默认最小宽度
|
||||
,editTrigger: 'click' //单元格编辑的事件触发方式
|
||||
,defaultToolbar: ['filter', 'exports', 'print'] //工具栏右侧图标
|
||||
,autoSort: true //是否前端自动排序。如果否，则需自主排序（通常为服务端处理好排序）
|
||||
,text: {
|
||||
|
|
@ -259,7 +271,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
};
|
||||
|
||||
//表格渲染
|
||||
Class.prototype.render = function(){
|
||||
Class.prototype.render = function(type){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
|
||||
|
|
@ -293,6 +305,11 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
}
|
||||
|
||||
if(!options.elem[0]) return that;
|
||||
|
||||
// 仅重载数据
|
||||
if(type === 'reloadData'){
|
||||
return that.pullData(that.page); //请求数据
|
||||
}
|
||||
|
||||
//高度铺满：full-差距值
|
||||
if(options.height && /^full-\d+$/.test(options.height)){
|
||||
|
|
@ -308,9 +325,23 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
,hasRender = othis.next('.' + ELEM_VIEW)
|
||||
|
||||
//主容器
|
||||
,reElem = that.elem = $(laytpl(TPL_MAIN).render({
|
||||
VIEW_CLASS: ELEM_VIEW
|
||||
,data: options
|
||||
,reElem = that.elem = $('<div class="layui-form layui-border-box"></div>');
|
||||
|
||||
reElem.addClass(function(){
|
||||
var arr = [ELEM_VIEW, ELEM_VIEW +'-'+ that.index];
|
||||
if(options.className) arr.push(options.className);
|
||||
return arr.join(' ');
|
||||
}()).attr({
|
||||
'lay-filter': 'LAY-TABLE-FORM-DF-'+ that.index
|
||||
,'lay-id': options.id
|
||||
,'style': function(){
|
||||
var arr = [];
|
||||
if(options.width) arr.push('width:'+ options.width + 'px;');
|
||||
if(options.height) arr.push('height:'+ options.height + 'px;');
|
||||
return arr.join('')
|
||||
}()
|
||||
}).html(laytpl(TPL_MAIN).render({
|
||||
data: options
|
||||
,index: that.index //索引
|
||||
}));
|
||||
|
||||
|
|
@ -333,15 +364,18 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
that.layTotal = reElem.find(ELEM_TOTAL);
|
||||
that.layPage = reElem.find(ELEM_PAGE);
|
||||
|
||||
//初始化工具栏
|
||||
// 初始化头部工具栏
|
||||
that.renderToolbar();
|
||||
|
||||
//让表格平铺
|
||||
// 初始化底部分页栏
|
||||
that.renderPagebar();
|
||||
|
||||
// 让表格平铺
|
||||
that.fullSize();
|
||||
|
||||
//如果多级表头，则填补表头高度
|
||||
// 如果多级表头，则填补表头高度
|
||||
if(options.cols.length > 1){
|
||||
//补全高度
|
||||
// 补全高度
|
||||
var th = that.layFixed.find(ELEM_HEADER).find('th');
|
||||
th.height(that.layHeader.height() - 1 - parseFloat(th.css('padding-top')) - parseFloat(th.css('padding-bottom')));
|
||||
}
|
||||
|
|
@ -355,8 +389,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
var that = this
|
||||
,options = that.config
|
||||
,initWidth = {
|
||||
checkbox: 48
|
||||
,radio: 48
|
||||
checkbox: 50
|
||||
,radio: 50
|
||||
,space: 15
|
||||
,numbers: 40
|
||||
};
|
||||
|
|
@ -394,39 +428,58 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
|
||||
if(type === 'width') return options.clientWidth;
|
||||
|
||||
// 初始化 css 参数
|
||||
if(options.css){
|
||||
var css = options.css.split('}');
|
||||
layui.each(css, function(index, value){
|
||||
if(value){
|
||||
css[index] = '.'+ ELEM_VIEW + '-'+ that.index + ' ' + value;
|
||||
}
|
||||
});
|
||||
options.css = css.join('}');
|
||||
}
|
||||
|
||||
// 封装对col的配置处理
|
||||
var initChildCols = function (i1, item1, i2, item2) {
|
||||
//如果列参数为空，则移除
|
||||
if (!item2) {
|
||||
item1.splice(i2, 1);
|
||||
return;
|
||||
}
|
||||
|
||||
item2.key = i1 + '-' + i2;
|
||||
item2.hide = item2.hide || false;
|
||||
item2.colspan = item2.colspan || 1;
|
||||
item2.rowspan = item2.rowspan || 1;
|
||||
|
||||
//根据列类型，定制化参数
|
||||
that.initOpts(item2);
|
||||
|
||||
//设置列的父列索引
|
||||
//如果是组合列，则捕获对应的子列
|
||||
var indexChild = i1 + (parseInt(item2.rowspan) || 1);
|
||||
if (indexChild < options.cols.length) { // 只要不是最后一层都会有子列
|
||||
item2.colGroup = true;
|
||||
var childIndex = 0;
|
||||
layui.each(options.cols[indexChild], function (i22, item22) {
|
||||
//如果子列已经被标注为{HAS_PARENT}，或者子列累计 colspan 数等于父列定义的 colspan，则跳出当前子列循环
|
||||
if (item22.HAS_PARENT || (childIndex >= 1 && childIndex == (item2.colspan || 1))) return;
|
||||
|
||||
item22.HAS_PARENT = true;
|
||||
item22.parentKey = i1 + '-' + i2;
|
||||
childIndex = childIndex + parseInt(item22.colspan > 1 ? item22.colspan : 1);
|
||||
initChildCols(indexChild, options.cols[indexChild], i22, item22);
|
||||
});
|
||||
} else {
|
||||
item2.colGroup = false;
|
||||
}
|
||||
};
|
||||
|
||||
//初始化列参数
|
||||
layui.each(options.cols, function(i1, item1){
|
||||
if (i1) return true;
|
||||
layui.each(item1, function(i2, item2){
|
||||
item2.colspan = item2.colspan || 1;
|
||||
item2.rowspan = item2.rowspan || 1;
|
||||
|
||||
//如果列参数为空，则移除
|
||||
if(!item2){
|
||||
item1.splice(i2, 1);
|
||||
return;
|
||||
}
|
||||
|
||||
item2.key = i1 + '-' + i2;
|
||||
item2.hide = item2.hide || false;
|
||||
|
||||
//设置列的父列索引
|
||||
//如果是组合列，则捕获对应的子列
|
||||
if(item2.colGroup || item2.colspan > 1){
|
||||
var childIndex = 0;
|
||||
layui.each(options.cols[i1 + item2.rowspan], function(i22, item22){
|
||||
//如果子列已经被标注为{HAS_PARENT}，或者子列累计 colspan 数等于父列定义的 colspan，则跳出当前子列循环
|
||||
if(item22.HAS_PARENT || (childIndex >= 1 && childIndex == item2.colspan)) return;
|
||||
|
||||
item22.HAS_PARENT = true;
|
||||
item22.parentKey = i1 + '-' + i2;
|
||||
|
||||
childIndex = childIndex + parseInt(item22.colspan > 1 ? item22.colspan : 1);
|
||||
});
|
||||
item2.colGroup = true; //标注是组合列
|
||||
}
|
||||
|
||||
//根据列类型，定制化参数
|
||||
that.initOpts(item2);
|
||||
initChildCols(i1, item1, i2, item2);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -484,7 +537,22 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
});
|
||||
}
|
||||
that.layTool.find('.layui-table-tool-self').html(iconElem.join(''));
|
||||
}
|
||||
};
|
||||
|
||||
// 分页栏
|
||||
Class.prototype.renderPagebar = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
|
||||
,layPagebar = that.layPagebar = $('<div class="layui-inline layui-table-pagebar"></div>')
|
||||
|
||||
//开启分页栏自定义模板
|
||||
if(options.pagebar){
|
||||
var pagebarHtml = $(options.pagebar).html() || '';
|
||||
pagebarHtml && layPagebar.append(laytpl(pagebarHtml).render(options));
|
||||
that.layPage.append(layPagebar);
|
||||
}
|
||||
};
|
||||
|
||||
//同步表头父列的相关值
|
||||
Class.prototype.setParentCol = function(hide, parentKey){
|
||||
|
|
@ -653,7 +721,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
};
|
||||
|
||||
//表格重载
|
||||
Class.prototype.reload = function(options, deep){
|
||||
Class.prototype.reload = function(options, deep, type){
|
||||
var that = this;
|
||||
|
||||
options = options || {};
|
||||
|
|
@ -668,7 +736,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
that.config = $.extend(deep, {}, that.config, options);
|
||||
|
||||
//执行渲染
|
||||
that.render();
|
||||
that.render(type);
|
||||
};
|
||||
|
||||
//异常提示
|
||||
|
|
@ -686,7 +754,11 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
that.layMain.find('tbody').html('');
|
||||
|
||||
that.layMain.append(that.layNone = layNone);
|
||||
|
||||
|
||||
// 异常情况下对page和total的内容处理
|
||||
that.layPage && that.layPage.addClass(HIDE).find('>div').html('');
|
||||
that.layTotal && that.layTotal.addClass(HIDE).find('tbody').html('');
|
||||
|
||||
table.cache[that.key] = []; //格式化缓存数据
|
||||
};
|
||||
|
||||
|
|
@ -915,7 +987,19 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
table.cache[that.key] = data; //记录数据
|
||||
|
||||
//显示隐藏分页栏
|
||||
that.layPage[(count == 0 || (data.length === 0 && curr == 1)) ? 'addClass' : 'removeClass'](HIDE);
|
||||
//that.layPage[(count == 0 || (data.length === 0 && curr == 1)) ? 'addClass' : 'removeClass'](HIDE);
|
||||
|
||||
//显示隐藏合计栏
|
||||
that.layTotal[data.length == 0 ? 'addClass' : 'removeClass'](HIDE_V);;
|
||||
|
||||
//显示隐藏分页栏
|
||||
if(!options.pagebar){
|
||||
that.layPage[
|
||||
(count == 0 || (data.length === 0 && curr == 1))
|
||||
? 'addClass'
|
||||
: 'removeClass'
|
||||
](HIDE_V);
|
||||
}
|
||||
|
||||
//如果无数据
|
||||
if(data.length === 0){
|
||||
|
|
@ -933,6 +1017,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
//正常初始化数据渲染
|
||||
render(); //渲染数据
|
||||
that.renderTotal(data, totalRowData); //数据合计
|
||||
that.layTotal && that.layTotal.removeClass(HIDE);
|
||||
|
||||
//同步分页状态
|
||||
if(options.page){
|
||||
|
|
@ -992,7 +1077,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
//td 内容
|
||||
var content = function(){
|
||||
var text = item3.totalRowText || ''
|
||||
,thisTotalNum = parseFloat(totalNums[field]).toFixed(2)
|
||||
,decimals = item3.totalRowDecimals || 2
|
||||
,thisTotalNum = parseFloat(totalNums[field]).toFixed(decimals)
|
||||
,tplData = {}
|
||||
,getContent;
|
||||
|
||||
|
|
@ -1052,7 +1138,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
|
||||
//渲染表单
|
||||
Class.prototype.renderForm = function(type){
|
||||
form.render(type, 'LAY-table-'+ this.index);
|
||||
var that = this
|
||||
,options = that.config
|
||||
,filter = that.elem.attr('lay-filter');
|
||||
form.render(type, filter);
|
||||
};
|
||||
|
||||
//标记当前行选中状态
|
||||
|
|
@ -1409,12 +1498,12 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
}
|
||||
break;
|
||||
case 'LAYTABLE_PRINT': //打印
|
||||
var printWin = window.open('打印窗口', '_blank')
|
||||
var printWin = window.open('about:blank', '_blank')
|
||||
,style = ['<style>'
|
||||
,'body{font-size: 12px; color: #666;}'
|
||||
,'body{font-size: 12px; color: #5F5F5F;}'
|
||||
,'table{width: 100%; border-collapse: collapse; border-spacing: 0;}'
|
||||
,'th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}'
|
||||
,'a{color: #666; text-decoration:none;}'
|
||||
,'th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #5F5F5F;}'
|
||||
,'a{color: #5F5F5F; text-decoration:none;}'
|
||||
,'*.layui-hide{display: none}'
|
||||
,'</style>'].join('')
|
||||
,html = $(that.layHeader.html()); //输出表头
|
||||
|
|
@ -1437,6 +1526,17 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
,config: options
|
||||
},{}));
|
||||
});
|
||||
|
||||
//分页栏操作事件
|
||||
that.layPagebar.on('click', '*[lay-event]', function(e){
|
||||
var othis = $(this)
|
||||
,events = othis.attr('lay-event');
|
||||
|
||||
layui.event.call(this, MOD_NAME, 'pagebar('+ filter +')', $.extend({
|
||||
event: events
|
||||
,config: options
|
||||
},{}));
|
||||
});
|
||||
|
||||
//拖拽调整宽度
|
||||
th.on('mousemove', function(e){
|
||||
|
|
@ -1624,7 +1724,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
}));
|
||||
});
|
||||
|
||||
//行事件
|
||||
// 行事件
|
||||
that.layBody.on('mouseenter', 'tr', function(){ //鼠标移入行
|
||||
var othis = $(this)
|
||||
,index = othis.index();
|
||||
|
|
@ -1651,7 +1751,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
);
|
||||
};
|
||||
|
||||
//单元格编辑
|
||||
// 单元格编辑
|
||||
that.layBody.on('change', '.'+ELEM_EDIT, function(){
|
||||
var othis = $(this)
|
||||
,value = this.value
|
||||
|
|
@ -1688,8 +1788,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
othis.remove();
|
||||
});
|
||||
|
||||
//单元格单击事件
|
||||
that.layBody.on('click', 'td', function(e){
|
||||
// 单元格事件
|
||||
that.layBody.on(options.editTrigger, 'td', function(e){
|
||||
var othis = $(this)
|
||||
,field = othis.data('field')
|
||||
,editType = othis.data('edit')
|
||||
|
|
@ -1699,7 +1799,14 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
|
||||
//显示编辑表单
|
||||
if(editType){
|
||||
var input = $('<input class="layui-input '+ ELEM_EDIT +'">');
|
||||
var input = $(function(){
|
||||
var inputElem = '<input class="layui-input '+ ELEM_EDIT +'">';
|
||||
if(editType === 'textarea') {
|
||||
inputElem = '<textarea class="layui-input ' + ELEM_EDIT + '"></textarea>';
|
||||
}
|
||||
return inputElem;
|
||||
}());
|
||||
|
||||
input[0].value = othis.data('content') || elemCell.text();
|
||||
othis.find('.'+ELEM_EDIT)[0] || othis.append(input);
|
||||
input.focus();
|
||||
|
|
@ -1722,7 +1829,10 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
|
||||
if(hide){
|
||||
othis.find('.layui-table-grid-down').remove();
|
||||
} else if(elemCell.prop('scrollWidth') > elemCell.outerWidth()){
|
||||
} else if((
|
||||
elemCell.prop('scrollWidth') > elemCell.outerWidth() ||
|
||||
elemCell.find("br").length > 0
|
||||
) && !options.lineStyle){
|
||||
if(elemCell.find('.'+ ELEM_GRID_DOWN)[0]) return;
|
||||
othis.append('<div class="'+ ELEM_GRID_DOWN +'"><i class="layui-icon layui-icon-down"></i></div>');
|
||||
}
|
||||
|
|
@ -1735,7 +1845,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
,elemCell = td.children(ELEM_CELL);
|
||||
|
||||
that.tipsIndex = layer.tips([
|
||||
'<div class="layui-table-tips-main" style="margin-top: -'+ (elemCell.height() + 16) +'px;'+ function(){
|
||||
'<div class="layui-table-tips-main" style="margin-top: -'+ (elemCell.height() + 23) +'px;'+ function(){
|
||||
if(options.size === 'sm'){
|
||||
return 'padding: 4px 15px; font-size: 12px;';
|
||||
}
|
||||
|
|
@ -1764,14 +1874,29 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
layui.stope(e);
|
||||
});
|
||||
|
||||
//行工具条操作事件
|
||||
that.layBody.on('click', '*[lay-event]', function(){
|
||||
var othis = $(this)
|
||||
,index = othis.parents('tr').eq(0).data('index');
|
||||
layui.event.call(this, MOD_NAME, 'tool('+ filter +')', commonMember.call(this, {
|
||||
event: othis.attr('lay-event')
|
||||
}));
|
||||
// 行工具条操作事件
|
||||
var toolFn = function(type){
|
||||
var othis = $(this);
|
||||
var index = othis.parents('tr').eq(0).data('index');
|
||||
|
||||
layui.event.call(
|
||||
this,
|
||||
MOD_NAME,
|
||||
(type || 'tool') + '('+ filter +')',
|
||||
commonMember.call(this, {
|
||||
event: othis.attr('lay-event')
|
||||
})
|
||||
);
|
||||
that.setThisRowChecked(index);
|
||||
};
|
||||
|
||||
// 行工具条单击事件
|
||||
that.layBody.on('click', '*[lay-event]', function(){
|
||||
toolFn.call(this);
|
||||
return false;
|
||||
}).on('dblclick', '*[lay-event]', function(){ //行工具条双击事件
|
||||
toolFn.call(this, 'toolDouble');
|
||||
return false;
|
||||
});
|
||||
|
||||
//同步滚动条
|
||||
|
|
@ -1887,8 +2012,28 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
//记录所有实例
|
||||
thisTable.that = {}; //记录所有实例对象
|
||||
thisTable.config = {}; //记录所有实例配置项
|
||||
|
||||
//遍历表头
|
||||
|
||||
var eachChildCols = function (index, cols, i1, item2) {
|
||||
//如果是组合列，则捕获对应的子列
|
||||
if (item2.colGroup) {
|
||||
var childIndex = 0;
|
||||
index++;
|
||||
item2.CHILD_COLS = [];
|
||||
// 找到它的子列所在cols的下标
|
||||
var i2 = i1 + (parseInt(item2.rowspan) || 1);
|
||||
layui.each(cols[i2], function (i22, item22) {
|
||||
//如果子列已经被标注为{PARENT_COL_INDEX}，或者子列累计 colspan 数等于父列定义的 colspan，则跳出当前子列循环
|
||||
if (item22.PARENT_COL_INDEX || (childIndex >= 1 && childIndex == (item2.colspan || 1))) return;
|
||||
item22.PARENT_COL_INDEX = index;
|
||||
|
||||
item2.CHILD_COLS.push(item22);
|
||||
childIndex = childIndex + (item22.hide ? 0 : parseInt(item22.colspan > 1 ? item22.colspan : 1));
|
||||
eachChildCols(index, cols, i2, item22);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 遍历表头
|
||||
table.eachCols = function(id, callback, cols){
|
||||
var config = thisTable.config[id] || {}
|
||||
,arrs = [], index = 0;
|
||||
|
|
@ -1897,25 +2042,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
|
||||
//重新整理表头结构
|
||||
layui.each(cols, function(i1, item1){
|
||||
if (i1) return true; // 只需遍历第一层
|
||||
layui.each(item1, function(i2, item2){
|
||||
|
||||
//如果是组合列，则捕获对应的子列
|
||||
if(item2.colGroup){
|
||||
var childIndex = 0;
|
||||
index++
|
||||
item2.CHILD_COLS = [];
|
||||
|
||||
layui.each(cols[i1 + item2.rowspan], function(i22, item22){
|
||||
//如果子列已经被标注为{PARENT_COL_INDEX}，或者子列累计 colspan 数等于父列定义的 colspan，则跳出当前子列循环
|
||||
if(item22.PARENT_COL_INDEX || (childIndex >= 1 && childIndex == item2.colspan)) return;
|
||||
|
||||
item22.PARENT_COL_INDEX = index;
|
||||
|
||||
item2.CHILD_COLS.push(item22);
|
||||
childIndex = childIndex + parseInt(item22.colspan > 1 ? item22.colspan : 1);
|
||||
});
|
||||
}
|
||||
|
||||
eachChildCols(index, cols, i1, item2);
|
||||
if(item2.PARENT_COL_INDEX) return; //如果是子列，则不进行追加，因为已经存储在父列中
|
||||
arrs.push(item2)
|
||||
});
|
||||
|
|
@ -1932,7 +2061,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
eachArrs();
|
||||
};
|
||||
|
||||
//表格选中状态
|
||||
// 表格选中状态
|
||||
table.checkStatus = function(id){
|
||||
var nums = 0
|
||||
,invalidNum = 0
|
||||
|
|
@ -1955,7 +2084,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
};
|
||||
};
|
||||
|
||||
//获取表格当前页的所有行数据
|
||||
// 获取表格当前页的所有行数据
|
||||
table.getData = function(id){
|
||||
var arr = []
|
||||
,data = table.cache[id] || [];
|
||||
|
|
@ -1968,20 +2097,23 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
return arr;
|
||||
};
|
||||
|
||||
//表格导出
|
||||
table.exportFile = function(id, data, type){
|
||||
var that = this;
|
||||
|
||||
// 表格导出
|
||||
table.exportFile = function(id, data, options){
|
||||
data = data || table.clearCacheKey(table.cache[id]);
|
||||
type = type || 'csv';
|
||||
|
||||
var thatTable = thisTable.that[id]
|
||||
,config = thisTable.config[id] || {}
|
||||
,textType = ({
|
||||
options = typeof options === 'object' ? options : function(){
|
||||
var obj = {};
|
||||
options && (obj.type = options);
|
||||
return obj;
|
||||
}();
|
||||
|
||||
var type = options.type || 'csv';
|
||||
var thatTable = thisTable.that[id];
|
||||
var config = thisTable.config[id] || {};
|
||||
var textType = ({
|
||||
csv: 'text/csv'
|
||||
,xls: 'application/vnd.ms-excel'
|
||||
})[type]
|
||||
,alink = document.createElement("a");
|
||||
})[type];
|
||||
var alink = document.createElement("a");
|
||||
|
||||
if(device.ie) return hint.error('IE_NOT_SUPPORT_EXPORTS');
|
||||
|
||||
|
|
@ -2011,8 +2143,8 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
}
|
||||
|
||||
var content = item1[item3.field]
|
||||
,td = that.layBody.find('tr[data-index="'+ i1 +'"]>td');
|
||||
|
||||
,td = thatTable.layBody.find('tr[data-index="'+ i1 +'"]>td');
|
||||
|
||||
if(content === undefined || content === null) content = '';
|
||||
|
||||
i1 == 0 && dataTitle.push(item3.title || '');
|
||||
|
|
@ -2034,20 +2166,20 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
});
|
||||
|
||||
//表合计
|
||||
layui.each(that.dataTotal, function(key, value){
|
||||
thatTable && layui.each(thatTable.dataTotal, function(key, value){
|
||||
fieldsIsHide[key] || dataTotal.push(value);
|
||||
});
|
||||
|
||||
return dataTitle.join(',') + '\r\n' + dataMain.join('\r\n') + '\r\n' + dataTotal.join(',');
|
||||
}());
|
||||
|
||||
alink.download = (config.title || 'table_'+ (config.index || '')) + '.' + type;
|
||||
|
||||
alink.download = (options.title || config.title || 'table_'+ (config.index || '')) + '.' + type;
|
||||
document.body.appendChild(alink);
|
||||
alink.click();
|
||||
document.body.removeChild(alink);
|
||||
};
|
||||
|
||||
//重置表格尺寸结构
|
||||
// 重置表格尺寸结构
|
||||
table.resize = function(id){
|
||||
//如果指定表格唯一 id，则只执行该 id 对应的表格实例
|
||||
if(id){
|
||||
|
|
@ -2063,24 +2195,43 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
}
|
||||
};
|
||||
|
||||
//表格重载
|
||||
table.reload = function(id, options, deep){
|
||||
// 重载
|
||||
table.reload = function(id, options, deep, type){
|
||||
var config = getThisTableConfig(id); //获取当前实例配置项
|
||||
if(!config) return;
|
||||
|
||||
var that = thisTable.that[id];
|
||||
that.reload(options, deep);
|
||||
that.reload(options, deep, type);
|
||||
|
||||
return thisTable.call(that);
|
||||
};
|
||||
|
||||
//核心入口
|
||||
|
||||
// 仅重载数据
|
||||
table.reloadData = function(){
|
||||
var args = $.extend([], arguments);
|
||||
args[3] = 'reloadData';
|
||||
|
||||
// 过滤与数据无关的参数
|
||||
var dataParams = [
|
||||
'data', 'url', 'where', 'page', 'limit',
|
||||
'request', 'response', 'parseData'
|
||||
];
|
||||
layui.each(args[1], function (key, value) {
|
||||
if(dataParams.indexOf(key) === -1){
|
||||
delete args[1][key];
|
||||
}
|
||||
});
|
||||
|
||||
return table.reload.apply(null, args);
|
||||
};
|
||||
|
||||
// 核心入口
|
||||
table.render = function(options){
|
||||
var inst = new Class(options);
|
||||
return thisTable.call(inst);
|
||||
};
|
||||
|
||||
//清除临时Key
|
||||
// 清除临时 Key
|
||||
table.clearCacheKey = function(data){
|
||||
data = $.extend({}, data);
|
||||
delete data[table.config.checkName];
|
||||
|
|
@ -2088,7 +2239,7 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
return data;
|
||||
};
|
||||
|
||||
//自动完成渲染
|
||||
// 自动完成渲染
|
||||
$(function(){
|
||||
table.init();
|
||||
});
|
||||
|
|
@ -2096,4 +2247,4 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
|
|||
exports(MOD_NAME, table);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -322,7 +322,62 @@ layui.define(['laytpl', 'form'], function(exports){
|
|||
});
|
||||
return selectedData;
|
||||
};
|
||||
|
||||
|
||||
//执行穿梭
|
||||
Class.prototype.transfer = function (_index, elem) {
|
||||
var that = this
|
||||
,options = that.config
|
||||
,thisBoxElem = that.layBox.eq(_index)
|
||||
,arr = []
|
||||
|
||||
if (!elem) {
|
||||
//通过按钮触发找到选中的进行移动
|
||||
thisBoxElem.each(function(_index){
|
||||
var othis = $(this)
|
||||
,thisDataElem = othis.find('.'+ ELEM_DATA);
|
||||
|
||||
thisDataElem.children('li').each(function(){
|
||||
var thisList = $(this)
|
||||
,thisElemCheckbox = thisList.find('input[type="checkbox"]')
|
||||
,isHide = thisElemCheckbox.data('hide');
|
||||
|
||||
if(thisElemCheckbox[0].checked && !isHide){
|
||||
thisElemCheckbox[0].checked = false;
|
||||
thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_DATA).append(thisList.clone());
|
||||
thisList.remove();
|
||||
|
||||
//记录当前穿梭的数据
|
||||
arr.push(thisElemCheckbox[0].value);
|
||||
}
|
||||
|
||||
that.setValue();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
//双击单条记录移动
|
||||
var thisList = elem
|
||||
,thisElemCheckbox = thisList.find('input[type="checkbox"]')
|
||||
|
||||
thisElemCheckbox[0].checked = false;
|
||||
thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_DATA).append(thisList.clone());
|
||||
thisList.remove();
|
||||
|
||||
//记录当前穿梭的数据
|
||||
arr.push(thisElemCheckbox[0].value);
|
||||
|
||||
that.setValue();
|
||||
}
|
||||
|
||||
that.renderCheckBtn();
|
||||
|
||||
//穿梭时，如果另外一个框正在搜索，则触发匹配
|
||||
var siblingInput = thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_SEARCH +' input')
|
||||
siblingInput.val() === '' || siblingInput.trigger('keyup');
|
||||
|
||||
//穿梭时的回调
|
||||
options.onchange && options.onchange(that.getData(arr), _index);
|
||||
}
|
||||
|
||||
//事件
|
||||
Class.prototype.events = function(){
|
||||
var that = this
|
||||
|
|
@ -343,48 +398,31 @@ layui.define(['laytpl', 'form'], function(exports){
|
|||
this.checked = checked;
|
||||
});
|
||||
}
|
||||
|
||||
that.renderCheckBtn({stopNone: true});
|
||||
|
||||
setTimeout(function () {
|
||||
that.renderCheckBtn({stopNone: true});
|
||||
}, 0)
|
||||
});
|
||||
|
||||
//按钮事件
|
||||
|
||||
// 双击穿梭
|
||||
that.elem.on('dblclick', '.' + ELEM_DATA + '>li', function(event){
|
||||
var elemThis = $(this)
|
||||
,thisElemCheckbox = elemThis.children('input[type="checkbox"]')
|
||||
,thisDataElem = elemThis.parent()
|
||||
,thisBoxElem = thisDataElem.parent()
|
||||
|
||||
if(thisElemCheckbox[0].disabled) return;
|
||||
|
||||
that.transfer(thisBoxElem.data('index'), elemThis);
|
||||
})
|
||||
|
||||
// 穿梭按钮事件
|
||||
that.layBtn.on('click', function(){
|
||||
var othis = $(this)
|
||||
,_index = othis.data('index')
|
||||
,thisBoxElem = that.layBox.eq(_index)
|
||||
,arr = [];
|
||||
if(othis.hasClass(DISABLED)) return;
|
||||
|
||||
that.layBox.eq(_index).each(function(_index){
|
||||
var othis = $(this)
|
||||
,thisDataElem = othis.find('.'+ ELEM_DATA);
|
||||
|
||||
thisDataElem.children('li').each(function(){
|
||||
var thisList = $(this)
|
||||
,thisElemCheckbox = thisList.find('input[type="checkbox"]')
|
||||
,isHide = thisElemCheckbox.data('hide');
|
||||
|
||||
if(thisElemCheckbox[0].checked && !isHide){
|
||||
thisElemCheckbox[0].checked = false;
|
||||
thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_DATA).append(thisList.clone());
|
||||
thisList.remove();
|
||||
|
||||
//记录当前穿梭的数据
|
||||
arr.push(thisElemCheckbox[0].value);
|
||||
}
|
||||
|
||||
that.setValue();
|
||||
});
|
||||
});
|
||||
|
||||
that.renderCheckBtn();
|
||||
|
||||
//穿梭时，如果另外一个框正在搜索，则触发匹配
|
||||
var siblingInput = thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_SEARCH +' input')
|
||||
siblingInput.val() === '' || siblingInput.trigger('keyup');
|
||||
|
||||
//穿梭时的回调
|
||||
options.onchange && options.onchange(that.getData(arr), _index);
|
||||
|
||||
that.transfer(_index);
|
||||
});
|
||||
|
||||
//搜索
|
||||
|
|
|
|||
Loading…
Reference in New Issue