layui 基础使用一

Posted 2023-06-01 playforkeeps

table 中单元格可点击，数据样式渲染： table.render 的配置项 cols 所在列配置如下：

 field: \'name\', title: \'姓名\', width: 120, templet: function (d) 
            var nameDom = \'<a class="table-inner-handle">\' + d.name + \'</a>\'
            return nameDom;
          , event: \'check-student\'
        ,

table 中单元格日期数据格式化，数据样式渲染： table.render 的配置项 cols 所在列配置如下：

 field: \'liveTime\', title: \'购房日期\', width: 150, minWidth: 50, hide: true,  templet: function (d) 
        if(d.liveTime)
          var date = new Date(d.liveTime),
            formate = util.toDateString(date, \'yyyy-MM-dd\')
          return formate;
        elsereturn \'\';
      ,

table 中 数据格式化，数据样式渲染： table.render 的配置项 cols 所在列配置如下：

 field: \'twins\', title: \'是否双(多)胞胎\', width: 140, hide: true,templet: function(d)return Object.is(null, d.twins) ? "" : (d.twins ? "是":"否") ,

　　获取 下拉 数据渲染：

function getClass(clazz) 
      $.ajax(
        method: \'get\',
        url: AjaxUrl + \'/xxx/xxx/getClassInfo\',
        success: function (res) 
          let option = "";
          for (let key in res.classes) 
            option += \'<option value="\' + key + \'">\' + res.classes[key] + \'</option>\';
          
          $(\'#clazz\').append(option);
          form.render(\'select\');
        
      );
    ;
    getClass()

tab 页签的设置及切换监听：

<div class="layui-tab" lay-filter="student-type-tab">
            <ul class="layui-tab-title">
              <li class="layui-this" lay-id="1">小学</li>
              <li lay-id="0">中学</li>
            </ul>
            <div class="layui-tab-content" >
            </div>
</div>

// 切换头部tab
element.on(\'tab(student-type-tab)\', function (data) 
    //....
        

 

layui 底层基础

全局配置

方法：layui.config(options)

你可以在使用模块之前，全局化配置一些参数，尽管大部分时候它不是必须的。所以我们目前提供的全局配置项非常少，这也是为了减少一些不必要的工作，尽可能让使用变得更简单。目前支持的全局配置项如下：

codelayui.code

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

定义模块

方法：layui.define([mods], callback)

通过该方法可定义一个 Layui模块。参数mods是可选的，用于声明该模块所依赖的模块。callback即为模块加载完毕的回调函数，它返回一个exports参数，用于输出该模块的接口。

codelayui.code

1. layui.define(function(exports){
2. //do something
4. exports(‘demo‘, function(){
5. alert(‘Hello World!‘);
6. });
7. });

跟Requirejs最大不同的地方在于接口输出，exports是一个函数，它接受两个参数，第一个参数为模块名，第二个参数为模块接口，当你声明了上述的一个模块后，你就可以在外部使用了，demo就会注册到layui对象下，即可通过 layui.demo() 去执行该模块的接口。

你也可以在定义一个模块的时候，声明该模块所需的依赖，如：

codelayui.code

1. layui.define([‘layer‘, ‘laypage‘], function(exports){
2. //do something
4. exports(‘demo‘, function(){
5. alert(‘Hello World!‘);
6. });
7. });

上述的[‘layer‘, ‘laypage‘]即为本模块所依赖的模块，它并非只能是一个数组，你也可以直接传一个字符型的模块名，但是这样只能依赖一个模块。

 

 

加载所需模块

 

方法：layui.use([mods], callback)

Layui的内置模块并非默认就加载的，他必须在你执行该方法后才会加载。它的参数跟上述的 define方法完全一样。 
另外请注意，mods里面必须是一个合法的模块名，不能包含目录。如果需要加载目录，建议采用extend建立别名（详见模块规范）

codelayui.code

1. layui.use([‘laypage‘, ‘layedit‘], function(){
2. var laypage = layui.laypage
3. ,layedit = layui.layedit;
5. //do something
6. });

该方法的函数其实返回了所加载的模块接口，所以你其实也可以不通过layui对象赋值获得接口（这一点跟Sea.js很像哈）：

codelayui.code

1. layui.use([‘laypage‘, ‘layedit‘], function(laypage, layedit){
3. //使用分页
4. laypage();
6. //建立编辑器
7. layedit.build();
8. });

动态加载CSS

方法：layui.link(href)

href即为css路径。注意：该方法并非是你使用Layui所必须的，它一般只是用于动态加载你的外部CSS文件。

 

本地储存

 

方法：layui.data(table, settings)

参数table为表名，settings是一个对象，用于设置key、value。 
该方法对localStorage进行了良好的封装，在Layui的多个内置模块（比如layim）中发挥了重要的作用，因此你可以使用它存储一些本地数据。

codelayui.code

1. //【增】：向test表插入一个nickname字段，如果该表不存在，则自动建立。
2. layui.data(‘test‘, {
3. key: ‘nickname‘
4. ,value: ‘贤心‘
5. });
6. //【删】：删除test表的nickname字段
7. layui.data(‘test‘, {
8. key: ‘nickname‘
9. ,remove: true
10. });
11. layui.data(‘test‘, null); //删除test表
13. //【改】：同【增】，会覆盖已经存储的数据
15. //【查】：向test表读取全部的数据
16. var localTest = layui.data(‘test‘);
17. console.log(localTest.nickname); //获得“贤心”

其他

 

其实除此之外，layui.js内部还提供了许多底层引擎，他们同样是整个Layui框架体系的有力支撑，所以有必要露个脸，尽管你可能并不会用到：

方法/属性	描述
layui.cache	静态属性。获得一些配置及临时的缓存信息
layui.extend(options)	拓展一个模块别名，如：layui.extend({test: ‘/res/js/test‘})
layui.each(obj, fn)	对象（Array、Object、DOM对象等）遍历，可用于取代for语句
layui.getStyle(node, name)	获得一个原始DOM节点的style属性值，如：layui.getStyle(document.body, ‘font-size‘)
layui.img(url, callback, error)	图片预加载
layui.sort(obj, key, desc)	将数组中的对象按某个成员重新对该数组排序，如：layui.sort([{a: 3},{a: 1},{a: 5}], ‘a‘)
layui.router()	获得location.hash路由，目前在Layui中没发挥作用。对做单页应用会派上用场。
layui.hint()	向控制台打印一些异常信息，目前只返回了error方法：layui.hint().error(‘出错啦‘)
layui.stope(e)	阻止事件冒泡
layui.onevent(modName, events, callback)	自定义模块事件，属于比较高级的应用。有兴趣的同学可以阅读layui.js源码以及form模块
layui.event(modName, events, params)	执行自定义模块事件，搭配onevent使用