使用layui的一点心得【更新中】

要使用layui的模块时,需先加载所需模块
layui.use(['form'], function(){
    var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
    var $ = layui.$;

    //但是,如果你的HTML是动态生成的,自动渲染就会失效
    //因此你需要在相应的地方,执行下述方法来手动渲染,跟这类似的还有 element.init();
    //form.render();


});
想要select值变更执行方法,不能用$('xxx').change(function)...的方式,要使用layui定义的事件监听,例如
form.on('select(filter)', function(data){
  console.log(data.elem); //得到select原始DOM对象
  console.log(data.value); //得到被选中的值
  console.log(data.othis); //得到美化后的DOM对象
});
执行一个方法,要更新表单中的数据时,要执行一步更新渲染,
  • form.render(); //更新全部
  • form.render(‘select’); //刷新select选择框渲染
form.on('select(level)',function (data) {
        var level = $("#level").val();
        $.ajax({
            url:'../../baseManage/place/changeLevel.action',
            type:'get',
            data:{
                level:level
            },
            dataType:'json',
            success:function(data) {
                //成功
                if(data.status == 'SUCCESS') {
                    if(data.result != null && data.result != '') {
                        $.each(data.result,function (i, place) {
                            if(level == '01') {

                            }else if(level == '02') {
                                alert(place.name)
                                $('#firstLevelId').append('<option value="'+place.id+'">'+place.name+'</option>');
                                alert('<option value="'+place.id+'">'+place.name+'</option>')
                            }else if('level == 02') {
                                $('#firstLevelId').append('<option value="'+place.id+'">'+place.name+'</option>');
                            }
                        })
                        form.render('select');//刷新select选择框渲染
                    }
                 }
            }
        })
    })
在使用layui的submit 异步提交监听时,一定要在最后加return false
//提交
    form.on('submit(submitButton)',function (data) {
        alert(JSON.stringify(data.field));
        var maintenancePlace = JSON.stringify(data.field);
        $.ajax({
            url : '../../baseManage/place/create.action',
            type : 'post',
            dataType : 'json',
            contentType :"application/json",
            data : maintenancePlace,
            success : function (data1) {
                alert(11111111)
            }
        })
        return false;
    })
在一个js中引公共js中的方法时,需按如下格式定义:
layui.use(['form'], function () {
    var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
    var $ = layui.$;

    //更改一级场所联动二级场所
    window.changeParentPlace = function (parentId,tagId) {
        $.ajax({
            url:'../../baseManage/place/changeParentPlace.action',
            type:'get',
            data:{
                parentId:parentId
            },
            dataType:'json',
            success:function (data) {
                if(data.result != null && data.result.length != 0) {

                    $.each(data.result,function(i,place) {
                        $("#" + tagId).empty();
                        $("#" + tagId).append('<option value="'+place.id+'">'+place.name+'</option>')
                    })
                }
                form.render('select'); //刷新select选择框渲染
            }
        })
    }
});
  • 在方法前加window,即window.changeParentPlace = function (parentId,tagId)....
如何给兄弟页面赋值:通过index索引找到兄弟页面的元素赋值
  • 父页面
//点击添加按钮
    $("#addButton").click(function() {

        layer.open({
            type: 2,
            area: ['420px', '400px'],
            fixed: false, //不固定
            maxmin: true,
            content: ctx + '/baseManage/worker/createpage',
            title:'<div class="bpms_tit"><img src="../../images/images/ico_7.png"/>&nbsp;&nbsp;&nbsp;维修工管理 >维修工增加</div>'
        });
    });
  • 子页面
$("#typeName").click(function () {
        parent.layer.open({
            id:'create',
            type: 2,
            area: ['900px', '600px'],
            fixed: false, //不固定
            maxmin: true,
            content: ctx + '/baseManage/worker/staffpage',
            title:''
        });
    })
  • 孙子页面(由子页面上的按钮点开,实际上是父页面下的子页面)

//监听工具条
    table.on('tool(dataTable)', function(obj){
        var data = obj.data;
        if(obj.event === 'choose'){
            alert(JSON.stringify(data));

            //关键:通过index给兄弟页面传递赋值
==parent.layer.getChildFrame(‘#typeName’, 1).val(data.name);==
==parent.layer.getChildFrame(‘#telephone’, 1).val(data.mobile);==


            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index);

        }
    });
子页面的index为1,找到该页面上的选择器,然后赋值
注意:方法前都要加parent,parent为js中的全局变量
  • 4
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
form表单元素包括:text 文本输入框,password密码输入框,checkbox复选框,radio单选框,file 文件域,submit表单提交action指向的文件,reset表单清空,image图片提交按钮,button按钮,hidden隐藏域。 select option select 实现下拉选 callback 是回调函数 layui.模块   模块可以是layui已经存在的模块,也可以通过layui.define([mods], callback) 来自己自定义模块。 如果想要使用模块首先要做的必然是加载模块,layui.use(['laypage', 'layedit'], function(){}); 接下来使用layui风格控件  其实感觉layui帮我们定义好了CSS和许多JS文本,我们需要做的只是按照layui的命名规范选好样式进而使用就可以了。  layu官方文档的命名规范为: CSS命名规范 class命名前缀:layui,连接符:-,如:class="layui-form" 命名格式一般分为两种: 一:layui-模块名-状态或类型 二:layui-状态或类型 因为有些类并非是某个模块所特有,他们通常会是一些公共类。如: 一(定义按钮的原始风格):class="layui-btnlayui-btn-primary" 二(定义内联块状元素):class="layui-inline" 1 2 3 4 5 6 7 8 9 当然还有前面提到的使用模块的js代码: layui.use(['form', 'layedit', 'laydate'], function(){   var form = layui.form   ,layer = layui.layer   ,layedit = layui.layedit   ,laydate = layui.laydate;   //日期   laydate.render({     elem: '#date'   });   laydate.render({     elem: '#date1'   });   //创建一个编辑器   var editIndex = layedit.build('LAY_demo_editor');   //自定义验证规则   form.verify({     title: function(value){       if(value.length < 5){         return '标题至少得5个字符啊';       }     }     ,pass: [/(.+){6,12}$/, '密码必须6到12位']     ,content: function(value){       layedit.sync(editIndex);     }   });   //监听指定开关   form.on('switch(switchTest)', function(data){     layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {       offset: '6px'     });     layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)   });   //监听提交   form.on('submit(demo1)', function(data){     layer.alert(JSON.stringify(data.field), {       title: '最终的提交信息'     })     return false;   }); }); 下面我们按照官方文档的开发规范使用一下form表单的例子       表单集合演示           单行输入框                       验证必填项                             验证手机                                   验证邮箱                                       多规则验证                                   验证日期                                   验证链接                                 验证身份证                       自定义验证                   请填写6到12位密码               范围                           -                                 单行选择框                   </opt
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值