使用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 相关文章推荐
JS 继承实例分析
Nov 04 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
基于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
php5数字型字符串加解密代码
2008/04/24 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
php链式操作的实现方式分析
2019/08/12 PHP
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
angular多语言配置详解
2019/05/16 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python 26进制计算实现方法
2015/05/28 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
自荐信格式
2013/12/01 职场文书
半年思想汇报
2013/12/30 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
生物工程专业求职信
2014/09/03 职场文书
银行自荐信怎么写
2015/03/05 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB