theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'layui:main' into master

Browse Source
This commit is contained in:
Lawrence Peng
2022-06-17 14:24:21 +08:00
committed by GitHub
parent 2c9625db4f ff70a461fb
commit 89bc721fe9
55 changed files with 1249 additions and 1090 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
examples/base.html
View File

@@ -1,97 +1,127 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>基础方法测试用例 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
<link href="../src/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-container" style="padding: 30px 0;">
<div class="" style="padding: 30px 0;">
<blockquote class="layui-elem-quote" style="color: #666;">
调试结果查看浏览器控制台
点击按钮开始测试，测试结果打开浏览器控制台查看
</blockquote>
<div class="layui-btn-container">
<button class="layui-btn" lay-on="sort">layui.sort</button>
<button class="layui-btn" lay-on="type">layui.type</button>
<button class="layui-btn" lay-on="isArray">layui.isArray</button>
<button class="layui-btn" lay-on="extend">lay.extend</button>
</div>
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('lay', function(){
var lay = layui.lay;
layui.use(['lay', 'util'], function(){
var lay = layui.lay
,util = layui.util;
//sort
console.log(
'layui.sort: 数字',
layui.sort([{a: 3},{a: 0},{a: 0},{a: -1},{a: -5},{a: 6},{a: 9},{a: -333333}], 'a')
);
console.log(
'layui.sort: 中文',
layui.sort([{a: '男'},{a: '女'},{a: '男'},{a: '女'},{a: '男'}], 'a')
);
console.log(
'layui.sort: 英文',
layui.sort([{a: 'E'},{a: 'B'},{a: 'D'},{a: 'C'},{a: 'A'}], 'a')
);
console.log(
'layui.sort: 混合'
,layui.sort([
{a: 3}
,{a: '男'}
,{a: 0}
,{a: 66}
,{a: 99}
,{a: 'C'}
,{a: '女'}
,{a: 0}
,{a: -1}
,{a: 'B'}
,{a: '男'}
,{a: 'A'}
,{a: -5}
,{a: '男'}
,{a: 6}
,{a: 9}
], 'a')
);
//事件
var style = 'color: orange; font-size: 16px;';
util.event('lay-on', {
sort: function(){
//sort
console.log('%c> layui.sort: ', style);
console.log(
'数字-整数型',
layui.sort([{a: 3},{a: 0},{a: 0},{a: -1},{a: -5},{a: 6},{a: 9},{a: -333333}], 'a')
);
console.log(
'数字-浮点型',
layui.sort([{a: 3.5},{a: 0.5},{a: 0.5},{a: -1.5},{a: -5.5},{a: 6.5},{a: 9.5},{a: -333333.5}], 'a')
);
console.log(
'数字-混合型',
layui.sort([{a: 1},{a: 20.5},{a: 20.3},{a: 3},{a: 52},{a: 4.3}], 'a')
);
console.log(
'中文',
layui.sort([{a: '男'},{a: '女'},{a: '男'},{a: '女'},{a: '男'}], 'a')
);
console.log(
'英文',
layui.sort([{a: 'E'},{a: 'B'},{a: 'D'},{a: 'C'},{a: 'A'}], 'a')
);
console.log(
'混合'
,layui.sort([
{a: 3}
,{a: '男'}
,{a: 0}
,{a: 66}
,{a: 99}
,{a: 'C'}
,{a: '女'}
,{a: 3.5}
,{a: 0}
,{a: -1}
,{a: 'B'}
,{a: 5.5}
,{a: '男'}
,{a: 'A'}
,{a: -5}
,{a: '男'}
,{a: 6}
,{a: 9}
], 'a')
);
console.log(
'数组成员全为数字',
layui.sort([1, 20.5, 19.5, 52, 4.5])
);
console.log(
'数组成员为混合型',
layui.sort([1, {a: 32}, 20.5, {a: 6}, 52, 5.5], 'a') //按成员对象的 key 为 a 进行比较
);
}
,type: function(){
console.log('%c> layui.type: ', style);
console.log(
'new RegExp()：', layui.type(new RegExp()),
'\nnew Date()：', layui.type(new Date()),
'\n[]：', layui.type([])
);
}
,isArray: function(){
console.log('%c> layui.isArray: ', style);
console.log(
'[1,6]：', layui.isArray([1,6]),
'\nlay("div")：', layui.isArray(lay('div')),
'\ndocument.querySelectorAll("div")：', layui.isArray(document.querySelectorAll('div')),
'\n{"key": "value"}：', layui.isArray({key: 'value'})
);
}
,extend: function(){
console.log('%c> lay.extend: ', style);
console.log(
lay.extend(
{},
{a: 123, c: {ccc: 'ccc'}, arr: [1,3]},
{a: 111, b: 1, c: {bbb: 'bbb'}},
{a: 222222, arr: [5]}
)
);
console.log(
lay.extend([], [1,3,5])
);
}
})
console.log(
'layui._typeof: ',
layui._typeof(new RegExp()),
layui._typeof(new Date()),
layui._typeof([])
);
console.log(
'layui._isArray ',
layui._isArray([1,6]),
layui._isArray(lay('div')),
layui._isArray(document.querySelectorAll('div')),
layui._isArray({key: 'value'})
);
console.log(
'lay.extend {}: ',
lay.extend(
{},
{a: 123, c: {ccc: 'ccc'}, arr: [1,3]},
{a: 111, b: 1, c: {bbb: 'bbb'}},
{a: 222222, arr: [5]}
)
);
console.log(
'lay.extend []: ',
lay.extend([], [1,3,5])
);
});
</script>
</body>

13
examples/element.html
View File

@@ -131,8 +131,17 @@ body{padding:20px;}
<br><br>
<blockquote class="layui-elem-quote"> Layui 正是你苦苦寻找的前端UI框架</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm"> Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架 Layui 正是你苦苦寻找的前端UI框架</blockquote>
<blockquote class="layui-elem-quote layui-text">
<p>Layui - 原生态模块化前端 UI 组件库</p>
<p>Layui - 原生态模块化前端 UI 组件库</p>
</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">
Layui - 原生态模块化前端 UI 组件库
Layui - 原生态模块化前端 UI 组件库
Layui - 原生态模块化前端 UI 组件库
Layui - 原生态模块化前端 UI 组件库
Layui - 原生态模块化前端 UI 组件库
</blockquote>
<fieldset class="layui-elem-field">
<legend>字段集区块 - 默认风格</legend>

20
examples/json/table/demo1.json
View File

@@ -8,8 +8,8 @@
,"data": [{
"id": "10001"
,"username": "杜甫"
,"email": "test@email.com"
,"sex": "男"
,"email": "test1@email.com"
,"sex": "<strong>男</strong>"
,"city": "浙江杭州"
,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。"
,"experience": 7
@@ -19,7 +19,7 @@
}, {
"id": "10002"
,"username": "李白"
,"email": "test@email.com"
,"email": "test2@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
@@ -30,8 +30,8 @@
,"LAY_CHECKED": true
}, {
"id": "10003"
,"username": "王勃"
,"email": "test@email.com"
,"username": "苏轼"
,"email": "test3@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
@@ -42,7 +42,7 @@
}, {
"id": "10004"
,"username": "李清照"
,"email": "test@email.com"
,"email": "test4@email.com"
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
@@ -53,7 +53,7 @@
}, {
"id": "10005"
,"username": "冰心"
,"email": "test@email.com"
,"email": "test5@email.com"
,"sex": "女"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
@@ -64,7 +64,7 @@
}, {
"id": "10006"
,"username": "贤心"
,"email": "test@email.com"
,"email": "test6@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
@@ -75,7 +75,7 @@
}, {
"id": "10007"
,"username": "贤心"
,"email": "test@email.com"
,"email": "test7@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"
@@ -86,7 +86,7 @@
}, {
"id": "10008"
,"username": "贤心"
,"email": "test@email.com"
,"email": "test8@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "人生恰似一场修行"

49
examples/laydate.html
View File

@@ -1,5 +1,3 @@
<!DOCTYPE html>
<html>
<head>
@@ -18,12 +16,31 @@ body{padding: 50px 100px;}
</head>
<body>
日期时间范围选择：
范围选择1：
<div class="layui-inline">
<input type="text" class="layui-input" id="test1">
</div>
<br><br><hr><br>
<br><hr>
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围选择2</label>
<div class="layui-inline" id="test1-2">
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="test-startDate-1" class="layui-input" placeholder="开始日期">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="test-endDate-1" class="layui-input" placeholder="结束日期">
</div>
</div>
</div>
</div>
</div>
<br><hr>
日期选择器：
<div class="layui-inline">
@@ -97,7 +114,7 @@ body{padding: 50px 100px;}
<div class="layui-inline">
<input type="text" class="layui-input" id="test6">
</div>
<textarea></textarea>
<button class="layui-btn" id="test9">外部事件触发</button>
<div class="layui-inline">
<input type="text" class="layui-input" id="test8">
@@ -118,7 +135,7 @@ layui.use('laydate', function(laydate){
//trigger: 'focus'
})
//双控件
//范围选择1
laydate.render({
elem: '#test1' //指定元素
,type: 'datetime'
@@ -126,12 +143,14 @@ layui.use('laydate', function(laydate){
//,lang: 'en'
//,theme: 'grid'
,range: true //开启日期范围，默认使用“-”分割
//,min: '1949-10-1'
//,min: '1970-1-1'
//,max: '2021-5-9'
//,value: '2021-05-09 12:06:09'
//,value: '2021-05-08 - 2021-03-27'
,done: function(value, date, endDate){
console.log(value, date, endDate);
//this.elem.val(123);
}
,change: function(value, date, endDate){
console.log(value, date, endDate);
@@ -139,6 +158,16 @@ layui.use('laydate', function(laydate){
});
//return;
//范围选择2
laydate.render({
elem: '#test1-2'
,type: 'date'
,range: ['#test-startDate-1', '#test-endDate-1']
//,value: ['2022-05-01', '2022-06-01']
//,value: '2022-05-01 - 2022-06-01'
});
//单控件
laydate.render({
@@ -157,6 +186,7 @@ layui.use('laydate', function(laydate){
}
,done: function(value, date, endDate){
console.log(value, date, endDate);
//this.elem.val(111111);
}
,change: function(value){
console.log(value);
@@ -169,6 +199,8 @@ layui.use('laydate', function(laydate){
,type: 'year'
//,range: true
//,trigger: 'click'
//,min:'2021-01-01'
//,max:'2022-12-31'
,done: function(value, date, endDate){
console.log(value, date, endDate);
}
@@ -183,7 +215,8 @@ layui.use('laydate', function(laydate){
,type: 'month'
,range: true
,trigger: 'click'
//,max: -30
,min:'2022-03-01'
,max:'2022-05-31'
,done: function(value, date, endDate){
console.log(value, date, endDate);
}

2
examples/layedit.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>富文本编辑器 - layui</title>
<title>简单富文本编辑器 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">

6
examples/layer.html
View File

@@ -89,8 +89,8 @@ var runTest = function(run, $, layer){
};
window.jQuery && runTest(1, window.jQuery, window.layer);
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer;
layui.use(['layer', 'util'], function(layer, util){
var $ = layui.jquery;
//return
var index = layer.msg('hello');
@@ -166,7 +166,7 @@ layui.use('layer', function(){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
layer.msg('演示完毕！您的口令：'+ util.escape(pass) +'<br>您最后写下了：'+ util.escape(text));
});
});
}

226
examples/laytpl.html Normal file
View File

@@ -0,0 +1,226 @@
<!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="../src/css/layui.css">
<style>
.laytpl-demo{border: 1px solid #EBEBEB;}
.laytpl-demo>textarea{position: relative; display: block; width:100%; height: 300px; padding: 11px; border: 0; box-sizing: border-box; resize: none; background-color: #fff; font-family: Courier New; font-size: 13px;}
.laytpl-demo>div:first-child{height: 32px; line-height: 32px; padding: 6px 11px; border-bottom: 1px solid #EBEBEB; background-color: #F8F9FA;}
</style>
</head>
<body>
<div>
<div class="layui-row">
<div class="layui-col-xs6 laytpl-demo">
<div>模板</div>
<textarea id="demoTPL1"><h1>{{ d.title }}</h1>
<p>转义输出(HTML)：{{ d.desc }}</p>
<p>转义输出(HTML)：{{= d.desc }}</p>
<p>原始输出(HTML)：{{- d.desc }}</p>
{{#}}
<div class="layui-section">
<hr>
<ul>
{{# var str = "a b c";
layui.each(d.items, function(index, item){ }}
<li class="{{ index > 0 ? 'list' : '' }}">
<strong>{{ item.title }}</strong>
{{# if(item.content){ }}
<span>{{ item.content }}</span>
{{# } }}
<span>{{ item.time || '' }}</span>
{{ str }}
</li>
{{# }); if(d.items.length === 0){ }}
无数据
{{# } }}
</ul>
<hr>
</div>
<div>
{{ d.content || '' }}
{{ }} {{}}
{{ }}
\a
'12'"""""
"哈''哈"
</div>
<p>渲染时间：{{ layui.util.toDateString(new Date()) }}</p></textarea>
</div>
<div class="layui-col-xs6 laytpl-demo">
<div class="layui-row">
<div class="layui-col-xs3">数据</div>
<div class="layui-col-xs9" style="text-align: right">
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-on="createData">生成数据</button>
</div>
</div>
<textarea id="demoData1">
{
"title": "标题",
"desc": "<a href=\"\" style=\"color:blue;\">一段描述</a>",
"items": [
{
"title": "list 1",
"child": [{
"title": "list 1-1",
"child": [{
"title": "list 1-1-1"
}]
}]
},
{
"title": "list 2",
"child": [{
"title": "list 2-1"
}]
},
{"title": "list 3"}
]
}</textarea>
</div>
<div class="layui-col-xs12 laytpl-demo">
<div class="layui-row">
<div class="layui-col-xs4">视图</div>
<div class="layui-col-xs4" style="text-align: center">
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-on="test1">性能测试</button>
</div>
<div class="layui-col-xs4" style="text-align: right">
<span id="demoViewTime"></span>
</div>
</div>
<div class="layui-padding-sm" id="demoView1"></div>
</div>
</div>
<script type="type/html" template id="demoTplCommon">
公共模板 - {{ d.title }}
</script>
<script type="type/html" template id="demoTplList">
{{# if(d.items && d.items.length > 0){ }}
<ul>
{{# layui.each(d.items, function(index, item){ }}
<li><strong>{{ item.title }}</strong>{{ laytpl.include('demoTplList', {items: item.child}) }}</li>
{{# }); }}
</ul>
{{# } }}
</script>
<script type="type/html" template id="laytplTestTpl">
{{# for(var i = 0; i < d.items.length; i++){ }}
第{{= d.items[i].index }}个，Name: {{- d.items[i].name }} Number: {{= d.items[i].number }}
{{# } }}
</script>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use(['laytpl', 'util'], function(){
var laytpl = layui.laytpl
,util = layui.util
,$ = layui.$;
//获取模板和数据
var get = function(type){
return {
template: $('#demoTPL1').val() //获取模板
,data: function(){ //获取数据
try {
return JSON.parse($('#demoData1').val());
} catch(e){
$('#demoView1').html(e);
}
}()
};
};
var data = get();
//耗时计算
var startTime = new Date().getTime(), timer = function(startTime, title){
var endTime = new Date().getTime();
$('#demoViewTime').html((title || '模板解析耗时：')+ (endTime - startTime) + 'ms');
};
//渲染模板
var thisTpl = laytpl(data.template);
//执行渲染
thisTpl.render(data.data, function(view){
timer(startTime);
$('#demoView1').html(view);
});
//编辑
$('.laytpl-demo textarea').on('input', function(){
var data = get();
if(!data.data) return;
//计算模板渲染耗时
var startTime = new Date().getTime();
//若模板有变化，则重新解析模板；若模板没变，数据有变化，则从模板缓存中直接渲染（效率大增）
if(this.id === 'demoTPL1'){
thisTpl.parse(data.template, data.data); //解析模板
}
//执行渲染
thisTpl.render(data.data, function(view){
timer(startTime);
$('#demoView1').html(view);
});
});
//事件
util.event('lay-on', {
//性能测试
test1: function(){
var dataLen = 1000 //数据量
,renderTimes = 1000; //渲染次数
//初始化数据
var data = {
title: '性能测试'
,items: function(items){
for(var i = 0; i < dataLen; i++){
items.push({
index: i
,name: '<strong style="color: red;">张三</strong>'
,number: 100+i
});
}
return items;
}([])
};
//模板
var startTime = new Date();
for(var j = 0; j < renderTimes; j++){
var template = document.getElementById('laytplTestTpl').innerHTML;
var html = laytpl(template).render(data);
}
timer(startTime, '本次测试耗时：');
$('#demoView1').html(html);
}
});
});
</script>
</body>
</html>

85
examples/table-test.html
View File

@@ -15,6 +15,12 @@
</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-static.html" class="layui-btn">静态表格</a>
</div>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
@@ -32,7 +38,10 @@
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
{{# if(d.email.trim()){ }}
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
{{# } }}
<input type="checkbox" name="demoTableSwitch" lay-skin="switch" {{ d.demoTableSwitch }}>
</script>
<script type="text/html" id="usernameTpl">
@@ -44,7 +53,7 @@
</script>
<script type="text/html" id="cityTpl">
<select lay-ignore>
<select id="demoCity1" lay-ignore>
<option value="浙江杭州">浙江杭州</option>
<option value="江西南昌">江西南昌</option>
<option value="湖北武汉">湖北武汉</option>
@@ -67,7 +76,8 @@ layui.use(['table', 'dropdown'], function(){
var table = layui.table
,$ = layui.$
,laytpl = layui.laytpl
,dropdown = layui.dropdown;;
,dropdown = layui.dropdown
,form = layui.form;
//全局设定某参数
table.set({
@@ -91,7 +101,7 @@ layui.use(['table', 'dropdown'], function(){
,title: '用户数据表'
,url: 'json/table/demo1.json'
//,size: 'lg'
//,skin: 'line'
//,autoSort: false //是否自动排序。如果否，则由服务端排序
//,loading: false
,totalRow: true
@@ -102,22 +112,36 @@ layui.use(['table', 'dropdown'], function(){
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,cols: [[
//,escape: false
,cols: !1 ? [[ //仅用于测试
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'username', title:'用户名', width:120, edit: 'text'}
,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text'}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:120}
,{field:'sign', title:'签名'}
,{field: 'experience', title: '积分', width:80, sort: true, align:'center', totalRow: '{{ d.TOTAL_NUMS }} 😊'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]] : [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
,{field:'email', title:'邮箱', hide: 0, width:150, edit: 'text', templet: function(d){
console.log(d)
return '<em>'+ d.email +'</em>'
,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text', templet: function(d){
return '<em>'+ layui.util.escape(d.email) +'</em>'
}}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:120, templet: '#cityTpl'}
,{field:'city', title:'城市', width:120, templet: '#cityTpl', exportTemplet: function(d, obj){
//console.log(obj)
var td = obj.td(this.field); //获取当前 td
return td.find('select').val();
}}
,{field:'sign', title:'签名'}
,{field: 'experience', title: '积分', width:80, sort: true, totalRow: '{{ d.TOTAL_NUMS }} 😊', templet: '<div>{{ d.experience }} 分</div>'}
,{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) }} 次'}
,{field:'joinTime', title:'加入时间', width: 120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width: 180}
]]
,initSort1: {
@@ -200,7 +224,7 @@ layui.use(['table', 'dropdown'], function(){
break;
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
layer.alert(layui.util.escape(JSON.stringify(data)));
break;
case 'getCheckLength':
var data = checkStatus.data;
@@ -209,7 +233,7 @@ layui.use(['table', 'dropdown'], function(){
case 'getData':
var getData = table.getData(obj.config.id);
console.log(getData);
layer.alert(JSON.stringify(getData));
layer.alert(layui.util.escape(JSON.stringify(getData)));
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选')
@@ -254,12 +278,43 @@ layui.use(['table', 'dropdown'], function(){
};
});
//触发行工具事件
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);
});
}
});
//触发单元格编辑
table.on('edit(test)', function(obj){
var field = obj.field //得到字段
,value = obj.value //得到修改后的值
,data = obj.data; //得到所在行所有键值
var update = {};
update[field] = value;
obj.update(update);
});
table.on('row(test)', function(obj){
console.log(obj);
//console.log(obj);
//layer.closeAll('tips');
});
});
</script>
</body>

239
examples/table.html
View File

@@ -15,37 +15,21 @@
</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-static.html" class="layui-btn">静态表格</a>
</div>
<script type="text/html" id="toolbarDemo">
<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">
更多菜单
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
</div>
</script>
<table id="test" lay-filter="test"></table>
<div id="appendtest"></div>
<script type="text/html" id="TPL_appendtest">
<table class="layui-table" lay-data="{url:'json/table/demo2.json', page: true, limit: 6}" lay-filter="appendtest">
<thead>
<tr>
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
<th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
</tr>
</thead>
</table>
</script>
<table class="layui-table" lay-data="{url:'json/table/demo2.json', page: true, limit: 6}" lay-filter="appendtest">
<thead>
<tr>
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
<th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
</tr>
</thead>
</table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
@@ -218,189 +202,6 @@ layui.use(['table', 'dropdown'], function(){
//,height: 300
});
$('#appendtest').append($('#TPL_appendtest').html())
table.init('appendtest');
//渲染
window.ins1 = table.render({
elem: '#test'
,height: 400
//,width: 600
,title: '用户数据表'
,url: 'json/table/demo1.json'
//,size: 'lg'
,page: {
}
//,autoSort: false //是否自动排序。如果否，则由服务端排序
//,loading: false
,totalRow: true
,limit: 30
,toolbar: '#toolbarDemo'
,defaultToolbar: ['filter', 'exports', 'print', {
title: '帮助'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,escape: true
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
,{field:'email', title:'邮箱', hide: 0, width:150, edit: 'text', templet: function(d){
return '<em>'+ d.email +'</em>'
}}
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
,{field:'city', title:'城市', width:120}
,{field:'sign', title:'签名'}
,{field:'experience', title:'积分', width:80, sort: true, totalRow: '{{ d.TOTAL_NUMS }} 分', templet: '<div>{{ d.experience }} 分</div>'}
,{field:'ip', title:'IP', width:120}
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
,{field:'joinTime', title:'加入时间', width:120}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,initSort1: {
field: 'experience' //排序字段，对应 cols 设定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
}
,headers: {headers_token: 'sasasas'}
,where: $.extend({}, table.config.where, {
test: '渲染的 test'
,token: '渲染的 token'
,key: 'experience'
,order: 'asc'
})
,done: function(){
//下拉菜单
dropdown.render({
elem: '#dropdown' //可绑定在任意元素中，此处以上述按钮为例
,data: [{
id: 0,
title: '刷新'
}]
//菜单被点击的事件
,click: function(obj){
table.reload('test');
}
});
}
,error: function(res, msg){
console.log(res, msg)
}
/*
,response: {
statusName: 'status'
,statusCode: 200
}
,parseData: function(res){
return {
"status": res.status
,"msg": res.message
,"count": res.total
,"data": res.data.list
};
}
*/
});
//排序事件
table.on('sort(test)', function(obj){
console.log(obj);
return;
layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
//服务端排序
table.reload('test', {
initSort: obj
//,page: {curr: 1} //重新从第一页开始
,where: { //重新请求服务端
key: obj.field //排序字段
,order: obj.type //排序方式
}
}, true);
});
//工具栏事件
table.on('toolbar(test)', function(obj){
var config = obj.config;
var checkStatus = table.checkStatus(config.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(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'getData':
var getData = table.getData(obj.config.id);
console.log(getData);
layer.alert(JSON.stringify(getData));
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选')
break;
case 'LAYTABLE_TIPS':
layer.alert(config.title || 'Table for layui-v'+ layui.v);
break;
case 'reload':
//深度重载
var instReload = table.reload('test', {
where: {
abc: 123
,test: '重载的 test'
}
,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('row(test)', function(obj){
console.log(obj);
//layer.closeAll('tips');
});
table.render({
elem: '#test2'
@@ -434,27 +235,27 @@ 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 //得到所在行所有键值
@@ -463,7 +264,7 @@ layui.use(['table', 'dropdown'], function(){
console.log(obj)
});
//监听行工具事件
//触发行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)

31
examples/temp.html
View File

@@ -1,31 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>组件示例模板 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div class="layui-container" style="padding: 30px 0;">
<div class="" style="padding: 30px 0;">
123
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('lay', function(){
});
</script>
</body>
</html>

50
examples/text.md.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>text for markdown - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div class="layui-container layui-row">
<div class="layui-col-md4 layui-text">
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<p>段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1段落1 <sup class="footnote-ref"><a href="#ref-1">[1]</a></sup></p>
<p>段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2段落2</p>
<p>段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3段落3 <a href="">链接</a></p>
<ul>
<li>无序1</li>
<li>无序2</li>
<li>无序3</li>
</ul>
<ol>
<li>有序1</li>
<li>有序2</li>
<li>有序3</li>
</ol>
<br>
<blockquote>
<p>引用</p>
<blockquote>内嵌引用<blockquote>内嵌引用</blockquote></blockquote>
</blockquote>
<br>
<pre>
var cp = function(){
return gulp.src('./dist/**/*')
.pipe(gulp.dest(dest));
};</pre>
<p id="ref-1">REF-1</p>
</div>
</div>
</body>
</html>

39
examples/upload.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>文件上传模块 - layui</title>
<title>上传组件 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
@@ -89,7 +89,7 @@ hr{margin: 30px 0;}
绑定原始文件域：<input type="file" name="file" id="test9">
<script src="../src/layui.js"></script>
<script src="../src/layui.js" src1="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script>
<script>
layui.use(['upload', 'element'], function(){
var $ = layui.jquery
@@ -98,7 +98,7 @@ layui.use(['upload', 'element'], function(){
var uploadInst = upload.render({
elem: '#test1'
,url: 'http://httpbin.org/post'
,url: 'https://httpbin.org/post'
//,size: 2000 //限制文件大小，单位 KB
//,accept: 'file'
,method: 'get'
@@ -110,8 +110,8 @@ layui.use(['upload', 'element'], function(){
return 2
}
}
,choose: function(){
,choose: function(obj){
console.log('choose', obj);
}
,before: function(obj){
//预读本地文件示例，不支持ie8
@@ -123,16 +123,16 @@ layui.use(['upload', 'element'], function(){
layer.msg('不允许上传')
return false;
}
,done: function(res){
,done: function(res, index){
//如果上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
//上传成功
console.log(res);
console.log(res, index);
}
,error: function(){
,error: function(index, upload){
this.item.html('重选上传');
//演示失败状态，并实现重传
@@ -145,7 +145,7 @@ layui.use(['upload', 'element'], function(){
element.progress('demo', '0%');
}
,progress: function(n, elem, res, index){
console.log(n + '%', elem, res); //获取进度百分比
console.log(n + '%', elem, res, index); //获取进度百分比
element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
}
});
@@ -158,19 +158,25 @@ layui.use(['upload', 'element'], function(){
//,size: 2
});
// 演示多图片上传
upload.render({
elem: '#test2'
,url: 'https://httpbin.org/post'
,multiple: true
,number: 3
,accept: 'images'
,number: 3 //同时上传的数量
,size: 1024
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
});
//this.files = obj.pushFile();
}
,done: function(res){
,done: function(res, index){
//上传完毕
//console.log(this.files)
}
,allDone: function(obj){
console.log(obj)
@@ -181,7 +187,7 @@ layui.use(['upload', 'element'], function(){
var demoListView = $('#demoList');
var uploadListIns = upload.render({
elem: '#testList'
,url: 'http://httpbin.org/post'
,url: 'https://httpbin.org/post'
,accept: 'file'
,multiple: true
,number: 3
@@ -189,9 +195,8 @@ layui.use(['upload', 'element'], function(){
,bindAction: '#testListAction'
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
@@ -300,11 +305,11 @@ layui.use(['upload', 'element'], function(){
,auto: false
//,multiple: true
,bindAction: '#test7'
,choose1: function(obj){
,choose: function(obj){
var that = this;
obj.preview(function(index, file){
console.log(file.name);
obj.resetFile(index, file, '123.jpg');
//obj.resetFile(index, file, '123.jpg');
});
}
,before: function(){
@@ -317,7 +322,7 @@ layui.use(['upload', 'element'], function(){
upload.render({
elem: '#test8'
,url: 'http://httpbin.org/post'
,url: 'https://httpbin.org/post'
,done: function(res){
console.log(res);
}