# layui 前端 UI 组件库

- 说明：
  - layui是一个js的前端UI组件库
  - layui内嵌了jquery库
  - V2.9.X及以前版本支持IE8，比较常见的是使用：2.7.6
- 资源：
  - gitee： [https://gitee.com/layui/layui](https://gitee.com/layui/layui) 「gitee GVP项目、start： 16.4K」
  - 文档：[https://layui.dev/](https://layui.dev/) ， 2.7.6 文档： [https://layui.dev/2.7/](https://layui.dev/2.7/)
- 自定义扩展模块不被浏览器缓存：

```javascript
layui.config({
    dir: '/res/layui/' //layui.js 所在目录（如果是 script 单独引入 layui.js，无需设定该参数）一般可无视
    ,version: false //一般用于更新模块缓存，默认不开启。设为 true 即让浏览器不缓存。⚠️也可以设为一个固定的值，如：201610
    ,debug: false //用于开启调试模式，默认 false，如果设为 true，则JS模块的节点会保留在页面
    ,base: '' //设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
});
```

- select-input2「第三方组件」
  - 资料：
    - gitee： [https://gitee.com/JerryZst/select-input2.x/tree/master](https://gitee.com/JerryZst/select-input2.x/tree/master)
  - 功能：
    - selectInput2.x 是selectInput的升级版本 
    - 是将input框变成即可输入亦可选择的select下拉组件
    - 主要使用场景是用户可以输入关键词，匹配系统存在的联想词形成select下拉框以供用户选择
    - 当然用户也可以使用自行输入的信息，支持模糊匹配
    - 数据源可以本地赋值，也可以异步url请求加载，或者干脆点直接实时输入远程请求联想呈现
    - 支持翻页
    - selectInput2.x 借鉴 xm-select 的开发方式, 利用preact进行渲染, 大幅度提高渲染速度
    - 并且可以灵活拓展，感谢xm-select的作者
  - 例子：
- form.val 表单信息设置和获取

```xml
 <form id="form1" runat="server" class="layui-form" lay-filter="formSearch">
    <input type="text" name="dname"  autocomplete="off" class="layui-input">
    <input type="checkbox" name="delSign" title="删除" lay-skin="primary" value="1" lay-filter="delsign"> 
 </form>
<script>
//获取表单内容
//checkbox，选中了有内容，没有选上就不会有内容，就是连字段都没有。
var searchInfo = form.val('formSearch')
//此处没有收到内容”1“，设置 ”“「设置以后也是有内容」，这样才可以覆盖掉上一次设置的where.delSign
searchInfo.delSign = searchInfo.delSign ? "1" : ""
table.reload('list', { where: searchInfo, page: { curr : 1} }, true);

//设置表单内容
//checkbox 也必须设置，只要有内容checkbox就会被选中「不论是什么内容"0"也一样」
//此时要设置为"",就不会被选中了
searchInfo.delSign = searchInfo.delSign != "1" ? "1" : ""
form.val('formSearch', searchInfo)
</script>

```

- loading 显示

```javascript
//0. loading
 var index = layer.load(1, {
              shade: [0.8, '#fff'] //0.1透明度的白色背景
          });
//waiting
layer.close(index);
```

- 图标

```js
//图标
<i class="layui-icon layui-icon-face-smile"></i>   
<i class="layui-icon layui-icon-close"></i>   
```

- ajax

```javascript
//ajax
tool.ajax('AddAnswer', { id: lastId, content: ans, 
    answerUserName: answerUserName }, 						
    function (d) {
            if (d.isOk) {
                layer.msg("...成功！");
                return;
            } else {
                      layer.msg("...失败！");
                      return;
            }
         }
 );

```

- confirm

```javascript
//confirm
layer.confirm('...，确定要...吗？', function (index) {
        tool.ajax('Delete', { id: data.ID }, function (d) {
            if (d.isOk) {
                layer.msg('删除成功');
                obj.del();
            } else {
                layer.msg(d.errorMsg)
            }
        });
        layer.close(index);
    }
);
```

- form 显示

```xml
<!-- from class="layui-form" -->
<form id="form1" runat="server" class="layui-form">
<!-- 一个div块 class="layui-form-item" 里面内容多了会自动换行 -->
<div class="layui-form-item" style="margin: 15px;">
    <!-- 一个元素块，lable + input -->
    <div class="layui-inline" style="padding-right: 10px;">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-inline">
        <input type="text" name="TextBoxName"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <!-- 一个inline中包含多个lable和input -->
    <div class="layui-inline" style="padding-right: 10px;">
        <label class="layui-form-label">日期</label>
                
        <div class="layui-input-inline">
            <input type="text" id="fromDt" readonly name="fromDt" autocomplete="off" class="layui-input">
                    
        </div>
        <div class="layui-input-inline">
            <input type="text" id="toDt" readonly name="toDt" autocomplete="off" class="layui-input">
        </div>
    </div>
    
    <div class="layui-inline">
        <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-export-btn"><i class="layui-icon layui-icon-search"></i>数据生成并导出</button>
    </div>

</div>
</form>
```

- select 显示

```xml
<!-- 4. select 显示 需要在form上增加 class="layui-form" lay-filter="form-data"
		    select 的宽度 使用css调节 .layui-form-select { width: 220px;}
-->
<form id="form1" runat="server" class="layui-form" lay-filter="form-data" >

```

- 获取form 内容

```javascript
//获取form 内容 
var ser = form.val('formSearch');
```

- table.render

```javascript
//table.render
 //list
    table.render({
        elem: '#list',
        id: 'list',
        url: 'ajax.aspx?m=Search',
        method: 'post',
        where: form.val('formSearch'),
        contentType: 'application/json; charset=utf-8',
        page: { limit: 20, limits: [10, 20, 30, 50, 100] },
        cols: [[ //标题栏
            { field: 'ID', title: 'ID', width: 80 }
            , { field: 'AccountDT', title: '报账日期', width: 120, templet: function (d) { return util.toDateString(d.dt, 'yyyy-MM-dd'); } }
            , { field: 'Name', title: '姓名', width: 120 }
            , { field: 'Gender', title: '性别', width: 120 }
            , { field: 'Character', title: '特征', width: 80 }
            , { field: 'WorkAge', title: '工龄', width: 80 }
            , { field: 'Age', title: '年龄', width: 80 }
            , { title: '操作', minWidth: 80, toolbar: '#currentTableBar', align: "center" }
        ]],
        parseData: function (res) {
            if (res.isOk) {
                //console.log(res);
                return {
                    code: 0,
                    msg: '',
                    count: res.count,
                    data: res.value
                }
            } else {
                return { code: 1, msg: res.errorMsg };
            }
        }
    });
```

- 折叠面板

```javascript
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
	//动态增加折叠面板
  //注意：动态增加的还要加一句
  element.render();
});
```