使用layui定义一个模块并使用的例子


Posted in Javascript onSeptember 14, 2019

在使用layui的过程,有几个方法需要被多个js引用,所以我按照文档,自定义了一个layui的模块,下面实现过程

先定义一个模块

//定义模块
layui.define(['form'], function(exports){

  var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
  var $ = layui.$;

  var obj = {
    changeParentPlace: function (parentId,tagId,levelPlace) {
      $.ajax({
        url:ctx + '/base/place/changeParentPlace',
        type:'get',
        data:{
          parentId:parentId
        },
        dataType:'json',
        success:function (data) {
          $("#" + tagId).empty();
          $("#" + tagId).append('<option value="">请选择</option>');
          if(data.result != null && data.result.length != 0) {
            $.each(data.result,function(i,place) {
              if(levelPlace == place.name) {
                $("#" + tagId).append('<option selected value="'+place.id+'">'+place.name+'</option>')
              }else {
                $("#" + tagId).append('<option value="'+place.id+'">'+place.name+'</option>')
              }
            })
          }
          form.render('select'); //刷新select选择框渲染
        }
      })
    }
  }

  //输出模块
  exports('common', obj);
});

定义方法使用layui.define

define中的第一个参数可以加载一些layui中内置的模块来使用,第二个回调方法中定义一些公共的方法

exports的第一参数是这个模块起的名字,第二个参数是一个对象该对象中定义了这三个方法

设置模块

//设置模块
layui.config({
  base: ctx + '/js/app/modules/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  common:'common'
});

定义模块使用layui.config

base定义的是定义模块的js所在目录

common是设置的别名,'common'是目录中的文件名(.js自动加)

//调用模块

layui.use(['common'], function(){
  var common = layui.common;

  common.changeParentPlace($("#firstLevelId").val(),'secondLevelId');

});

先将common模块use出来,调用代码如上common.changeParentPlace($("#firstLevelId").val(),'secondLevelId');和使用内置模块是一样的

以上这篇使用layui定义一个模块并使用的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
js中replace的用法总结
Dec 27 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
如何重置vue打印变量的显示方式
Dec 06 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
微信小程序实现简单的select下拉框
Nov 23 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
基于Layui自定义模块的使用方法详解
Sep 14 #Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 #Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 #Javascript
Layui Form 自定义验证的实例代码
Sep 14 #Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 #Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 #Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 #Javascript
You might like
PHP 魔术函数使用说明
2010/05/14 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python语言描述最大连续子序列和
2017/12/05 Python
Python实现两款计算器功能示例
2017/12/19 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
国税会议欢迎词
2014/01/16 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
环保建议书100字
2014/05/14 职场文书
搞笑婚前保证书
2015/02/28 职场文书
转学证明范本
2015/06/19 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
详解python的异常捕获
2022/03/03 Python
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
进行数据处理的6个 Python 代码块分享
2022/04/06 Python