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

在使用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');和使用内置模块是一样的
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值