# layui-update

**Repository Path**: forrever/layui-update

## Basic Information

- **Project Name**: layui-update
- **Description**: layui-update
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2018-12-04
- **Last Updated**: 2024-12-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layui-update

#### 项目介绍
##### 基于layui的实战优化,无侵入优化

###### [1. 表单元素优化](https://bable2000.gitee.io/layui-update/view-demo/imit-form.html)
1. 表单元素不用包裹在layui-form中
2. 动态添加表单元素不用form.render()渲染
3. 时间控件无JS设置,min max动态设置,开始结束时间分开输入
4. 添加input select date radio checkbox失焦校验
5. [独立form表单的校验(不必要触发提交,也不需要设置过滤器)](https://bable2000.gitee.io/layui-update/view-demo/verify-form.html)
6. 追加下拉按钮组、搜索选择框(自由型)
7. 追加表单组按钮组

###### 2. [简化固定表格](https://bable2000.gitee.io/layui-update/view-demo/fixed-table.html)（表头固定、第一列固定、最后一列固定、表尾固定）

###### 3. [数据表格](https://bable2000.gitee.io/layui-update/view-demo/data-table.html)
1. 表头固定、第一列固定、最后一列固定、表尾固定，但表单结构一点不发生变化
2. 自定义表单模板(可以自己修改)
3. 分页与表格独立开(便于数据请求后展示前的处理)
4. 因为自定义表单模板,所以允许checkbox的默认checked/disabled
5. 添加了表尾手动‘合计’的功能

[数据表格.png](http://oyh4crb8q.bkt.clouddn.com/data-table.png)

###### 4. [修改laytpl模板写法成vue模式](https://bable2000.gitee.io/layui-update/view-demo/laytpl.html)，laytpl复杂模板太难写了

###### 5. 优化layer(根据项目需求)
1. [添加layer的异步请求](https://bable2000.gitee.io/layui-update/view-demo/layer-open.html)，减少ajax->layer的嵌套
```
layer.open({
	type: 1,
	async: true, //异步请求,content为请求地址
	content: '../template/xx.tpl',
	data: { 
	/*静态tpl文件搭配动态数据,生成动态提示框.*/
	/*(好处:不用后端生成动态文件,不用前端拼接字符串,不用一次性把当前页面可能涉及的弹窗内容全部都提前加载完)*/
		v1: '李先生,你好!',
		v2: '没有开通权限/已开通权限'
	},
	btn: ['按钮一', '按钮二', '按钮三'],
	success: function(layero, index) {
		console.log(layero, index);
	}
})

```
2. [添加iframe弹窗的打开位置与溯原性](https://bable2000.gitee.io/layui-update/)
```
var open1 = function() {
	layer.open({
		type: 2,
		goal: top, //顶层窗口top,父级窗口parent,父级的父级窗口parent.parent
		content: './view-demo/iframe-source-2.html',
		area: ['50%', '50%'],
		success: function() {
			console.log('加载完')
		}
	})
};
parent.layer.close(layerIndex) //当前窗口信息
layerSource.parent.layer.close(layerSource.layerIndex) //关闭打开当前窗口的窗口
console.log('iframe弹窗发起方 layerSource:', layerSource.document);
console.log('iframe弹窗layer索引值 layerIndex:', layerIndex)
```
###### 6. [数据变化监控](https://bable2000.gitee.io/layui-update/view-demo/watchData.html) , [指定节点变化监控](https://bable2000.gitee.io/layui-update/view-demo/watchDom.html)
```
<div id="d1" class="box" attr-1=""></div>
<button type="button" onclick="$('.box').addClass('box-1')">改变1</button>
<button type="button" onclick="document.getElementById('d1').setAttribute('attr-1','x1')">改变2</button>
<button type="button" onclick="document.getElementById('d1').innerHTML='HTML'">改变3</button>
<script type="text/javascript">
var data = {
	a: 200,
	b: [1, 2, 3],
	c: {
		c1: 1,
		c2: 2
	}
};
$.watchData(data, function(x, y, z) {
	var c = 'data发生了改变↓' + '</br>' +
		'新值:' + JSON.stringify(x) + '</br>' +
		'旧值:' + JSON.stringify(y) + '</br>' +
		'key:' + JSON.stringify(z);
	layer.alert(c);
});

$.watchDom(document.getElementById('d1'), function() {
	layer.alert('box改变');
});
</script>
```
###### 7. [文件上传预览,上传进程条* 及各种前后端错误处理,文件全屏预览,旋转](https://bable2000.gitee.io/layui-update/view-demo/upload.html)

[文件上传.png](http://oyh4crb8q.bkt.clouddn.com/file-1.png)

[文件全屏预览.png](http://oyh4crb8q.bkt.clouddn.com/file-2.png)

1. reader.readAsDataURL(file)->window.URL.createObjectURL(file) =>异步文件预览改为 同步(浏览器支持性相同)

\* [引用Stream的代码,再'优化'](https://fly.layui.com/jie/31616/)

###### 8. 外部文件递归引用

```
<imports href="../template/imports-1.tpl">同步引入失败替换内容(引入片段中允许有script)</imports>
<imports href="../template/imports-1.tpl" async>异步引入失败替换内容</imports>
```
###### 9. js引入外部文件
> requires方法内部用promise实现缓存,如需重复请求一个动态文件,请加时间戳
```
"请求js"
requires(jsBase + 'imit.js'); //同步阻塞引入js
requires(jsBase + 'imit.js', true); //异步引入js
requires(jsBase + 'imit.js', function(){/*加载成功回调*/}); //异步引入js

var req1=requires(jsBase + "tpl.js", true);
req1.then(function(){/*promise式请求*/});

"请求css"
requires('css|style1.css') //异步请求style1.css

"请求html,html#,tpl,ftl"
requires('text|file.tpl', function(html) {/*以文本形式引入file.tpl,剔除了<html><head><body>标签,*/})
requires('text|file.tpl#x1', function(x1) {/*引入file.tpl,并获取x1锚点内容*/})
requires('text|file.tpl#y1', function(y1) {/*不再发起重复请求,直接从file.tpl文件缓存中,并获取y1锚点内容*/})

```

###### 10. [2018-8-23整理 : 分页 局部刷新方式pageAjax 刷新页面pageUrl hash模式pageHash](https://bable2000.gitee.io/layui-update/view-demo/laypage.html)

###### 11. [2018-8-23整理 : 带增删改单复选的tree + table-tree](https://bable2000.gitee.io/layui-update/view-demo/laytree.html)


#### 软件架构
基于layui架构 /** layui-v2.2.6 MIT License By https://www.layui.com */

#### 安装教程

基于layui架构

layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

你需要引入：

```
<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/layui/layui.js"></script>
<script src="../js/common.js"></script>
```

#### 码云特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 [http://git.mydoc.io/](http://git.mydoc.io/)
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)