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

update

Browse Source
This commit is contained in:
贤心
2022-05-18 22:35:13 +08:00
parent ce805ee6b3
commit 902aea37d9
49 changed files with 861 additions and 613 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>

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

@@ -8,7 +8,7 @@
,"data": [{
"id": "10001"
,"username": "杜甫"
,"email": "test@email.com"
,"email": "test1@email.com"
,"sex": "男"
,"city": "浙江杭州"
,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。"
@@ -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": "人生恰似一场修行"

5
examples/laydate.html
View File

@@ -126,12 +126,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);
@@ -157,6 +159,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);

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">

224
examples/laytpl.html Normal file
View File

@@ -0,0 +1,224 @@
<!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>
{{#}}
<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=\"\">一段描述</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>

61
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,9 @@
<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>
{{# } }}
</script>
<script type="text/html" id="usernameTpl">
@@ -44,7 +52,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 +75,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 +100,7 @@ layui.use(['table', 'dropdown'], function(){
,title: '用户数据表'
,url: 'json/table/demo1.json'
//,size: 'lg'
//,skin: 'line'
//,autoSort: false //是否自动排序。如果否，则由服务端排序
//,loading: false
,totalRow: true
@@ -107,13 +116,16 @@ layui.use(['table', 'dropdown'], function(){
,{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:'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}
@@ -254,12 +266,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>

18
examples/table.html
View File

@@ -15,7 +15,11 @@
</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">
@@ -434,27 +438,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 +467,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>