使用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 相关文章推荐
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
swiperjs实现导航与tab页的联动
Dec 13 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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
python学生管理系统代码实现
2020/04/05 Python
python线程池threadpool使用篇
2018/04/27 Python
python中嵌套函数的实操步骤
2019/02/27 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
实用求职信范文分享
2013/12/25 职场文书
高一政治教学反思
2014/01/28 职场文书
宣传工作经验材料
2014/06/02 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
家长会开场白和结束语
2015/05/29 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android