精华内容
下载资源
问答
  • 最近做项目遇到这样的需求使用layer在弹窗内完成新增,成功后提示并刷新页面,下面小编给大家带来了使用layer弹窗和layui表单做新增功能,具体实现代码,参考下本
  • 使用layer弹窗和layui表单实现新增功能2019-01-08编程之家收集整理的这篇文章主要介绍了使用layer弹窗和layui表单实现新增功能,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。1.需求:使用layer在...

    使用layer弹窗和layui表单实现新增功能

    2019-01-08

    编程之家收集整理的这篇文章主要介绍了使用layer弹窗和layui表单实现新增功能,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

    1.需求:使用layer在弹窗内完成新增,成功后提示并刷新页面(父页面,list页面)

    2.实现

    --构建from表单

    配置名称

    required value="" style="width: 240px" lay-verify="required" placeholder="请输入配置名称" autocomplete="off" class="layui-input">

    required style="width: 240px" lay-verify="required" placeholder="请输入配置类型" autocomplete="off" class="layui-input">

    required style="width: 240px" lay-verify="required" placeholder="请输入配置值" autocomplete="off" class="layui-input">

    立即提交

    重置

    c*js代码

    -创建layer弹窗

    页面层-自定义

    layer.open({

    type: 1,title:"新建配置",closeBtn: false,shift: 2,area: ['400px','300px'],shadeClose: true,// btn: ['新增','取消'],// btnAlign: 'c',content: $("#add-main"),success: function(layero,index){},yes:function(){

    }

    });

    }

    -核心提交方法

    页面刷新

    return false

    })

    }

    },'json');

    }

    debugger;

    //关闭页面

    function CloseWin(){

    parent.location.reload(); // 父页面刷新

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

    parent.layer.close(index); //再执行关闭

    }

    -

    总结

    以上所述是小编给大家介绍的使用layer弹窗和layui表单做新增功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

    总结

    如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

    如您喜欢交流学习经验,点击链接加入交流1群:1065694478(已满)交流2群:163560250

    展开全文
  • 要使用layui.layer弹出新增模态框,首先准备好模态框要显示的内容: <div id="modStaff" style="display: none;"> <div class="layui-col-lg9 layui-col-md9 layui-col-sm9 layui-col-md-offset1"> ...

    要使用layui.layer弹出新增模态框,首先准备好模态框要显示的内容:

    <div id="modStaff" style="display: none;">

            <div class="layui-col-lg9 layui-col-md9 layui-col-sm9 layui-col-md-offset1">

                <form id="formStaff" class="layui-form" action="${ctx}/servlet/StaffServlet">

                    <div class="layui-form-item">

                        <label class="layui-form-label">编号</label>

                        <div class="layui-input-block">

                            <input type="text" name="staffNum" required lay-verify="required"

                                    autocomplete="off" class="layui-input" readonly="readonly">

                        </div>

                    </div>

                    <div class="layui-form-item">

                        <label class="layui-form-label">姓名</label>

                        <div class="layui-input-block">

                            <input type="text" name="staffMC" required lay-verify="required"

                                    autocomplete="off" class="layui-input">

                        </div>

                    </div>

                    <div class="layui-form-item" style="text-align: center;margin-left: 18%;">

                        <div class="layui-btn-container">

                            <button type="button" class="layui-btn" lay-submit

    id="btn" onclick="formSubmit();"> 保存</button>

                        </div>

                    </div>

                </form>            

            </div>

    </div>

    然后加载Layui监听头部工具栏事件,当点击加号事件时,弹出新增模态框并自动生成编号:

    table.on('toolbar(test)', function(obj){

            var checkStatus = table.checkStatus(obj.config.id),

                data = checkStatus.data; //获取选中的数据

               switch(obj.event){

                    case 'add':

                    $("#formStaff").resetForm();//重置表单

                  var rowIndex = table.cache.test.length;//获取表格数据条数

                    rowIndex = Number(rowIndex - 1);//获取最后一条数据索引

                    if (rowIndex > -1) {

                        var num = table.cache.test[rowIndex].staffNum;//根据索引获取最后一条数据编号

                        var len = 4;           

                        num = Number(num) + Number(1);

                        num = num.toString();

                        while(num.length < len){

                            num = "0" + num;

                        }

                        $("#formStaff [name='staffNum']").val(num);                                              layer.open({

                                type: 1,//类型

                                title: '<i class="layui-icon layui-icon-add-1"> 新增员工信息</i>',

                                offset: ['5%','30%'],

                                area:['660px','560px'],//定义宽和高

                                shadeClose:false,//点击遮罩层关闭

                                content: $("#modStaff")//打开的内容

                              });

                          }                   

                    break;

                }

        });

    代码运行效果如图:

        填入员工姓名,点击保存按钮调用下面方法,提交form表单保存数据到数据库,完成新增功能。

        function formSubmit(){

            $("#formStaff").ajaxSubmit(function(jsonObject){

                data = JSON.parse(jsonObject);

                if (data.state) {

                    modHide();

                    layer.alert(data.msg, { icon : 1, title : '提示' },function(layerIndex){

                        layer.close(layerIndex);

                        table.reload();

                    });

                } else {

                    layer.msg(data.msg);

                }

            }

        }

    展开全文
  • 本文实例讲述了layui实现显示数据表格、搜索和修改功能。分享给大家供大家参考,具体如下:搜索layui.use('table', function(){var table = layui.table;table.render({elem: '#test',url:'/getdata.php',...

    本文实例讲述了layui实现显示数据表格、搜索和修改功能。分享给大家供大家参考,具体如下:

    搜索

    layui.use('table', function(){

    var table = layui.table;

    table.render({

    elem: '#test'

    ,url:'/getdata.php'

    ,cellminwidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增

    ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档

    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局

    //,curr: 5 //设定初始在第 5 页

    ,groups: 1 //只显示 1 个连续页码

    ,first: false //不显示首页

    ,last: false //不显示尾页

    }

    ,cols: [[

    {field:'id', width:80, title: 'id', sort: true}

    ,{field:'columnname', width:80, title: '字段名'}

    ,{field:'descriptioncn', width:80, title: '中文描述', sort: true}

    ,{field:'name', width:80, title: '名称'}

    ,{field:'description_table', title: '表描述', width: '30%', minwidth: 100} //minwidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增

    ,{field:'description', title: '字段类型', sort: true}

    ,{field:'primarykey', title: '主键', sort: true}

    ,{field:'class', width:137, title: '分类', sort: true}

    ]]

    });

    var $ = layui.$, active = {

    reload: function(){

    var demoreload = $('#demoreload');

    //执行重载

    table.reload('test', {

    page: {

    curr: 1 //重新从第 1 页开始

    }

    ,where: {

    keyword: demoreload.val()

    }

    });

    }

    };

    $('#btn .layui-btn').on('click', function(){

    var type = $(this).data('type');

    active[type] ? active[type].call(this) : '';

    });

    });

    引用样式和js,这是必须的。

    后台返回数据格式

    {

    "code": 0,

    "msg": "",

    "count": 4,

    "data:{}

    }

    数据表格单元格数据修改

    layui.use('table', function(){

    var table = layui.table;

    table.render({

    elem: '#test'

    ,url:'/classdata.php'

    ,cellminwidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增

    ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档

    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局

    //,curr: 5 //设定初始在第 5 页

    ,groups: 1 //只显示 1 个连续页码

    ,first: false //不显示首页

    ,last: false //不显示尾页

    }

    ,cols: [[

    {field:'id', width:80, title: 'id', sort: true}

    ,{field:'columnname', width:80, title: '字段名'}

    ,{field:'descriptioncn', width:80, title: '中文描述', sort: true}

    ,{field:'name', width:80, title: '名称'}

    ,{field:'description_table', title: '表描述', minwidth: 100} //minwidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增

    ,{field:'description', title: '字段类型'}

    ,{field:'primarykey', title: '主键'}

    ,{field:'class', title: '分类'}

    ,{field:'checkclass', title: '用户标注','edit':'text'}

    ,{field:'reason', title: '标注理由','edit':'text'}

    ]]

    });

    //监听单元格编辑

    table.on('edit(test)', function(obj){

    var value = obj.value //得到修改后的值

    ,data = obj.data //得到所在行所有键值

    ,field = obj.field; //得到字段

    if(value){

    $.post('doclass.php',{'id':data.id,'field':field,'value':value},function(data){

    console.log(data)

    data = $.parsejson(data);

    if(data.status == 1){

    layer.msg('修改成功,请等待管理员的审核');

    location.href=location.href;

    }else{

    layer.msg(data.msg);

    }

    })

    }

    });

    });

    在表格初始化的时候加上 'edit':'text' 就可以编辑

    然后再添加一个监听的单元格事件

    希望本文所述对大家基于layui框架的程序设计有所帮助。

    如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

    展开全文
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼要使用layui.layer弹出新增模态框,首先准备好模态框要显示的内容:编号autocomplete="off" class="layui-input"readonly="readonly">姓名autocomplete="off" class=...

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

    要使用layui.layer弹出新增模态框,首先准备好模态框要显示的内容:

    编号

    autocomplete="off" class="layui-input"readonly="readonly">

    姓名

    autocomplete="off" class="layui-input">

    id="btn" οnclick="formSubmit();">保存

    然后加载Layui监听头部工具栏事件,当点击加号事件时,弹出新增模态框并自动生成编号:

    table.on('toolbar(test)', function(obj){

    var checkStatus =table.checkStatus(obj.config.id),

    data = checkStatus.data; //获取选中的数据

    switch(obj.event){

    case 'add':

    $("#formStaff").resetForm();//重置表单

    var rowIndex =table.cache.test.length;//获取表格数据条数

    rowIndex = Number(rowIndex - 1);//获取最后一条数据索引

    if (rowIndex > -1) {

    var num =table.cache.test[rowIndex].staffNum;//根据索引获取最后一条数据编号

    var len = 4;

    num = Number(num) +Number(1);

    num = num.toString();

    while(num.length

    num = "0" + num;

    }

    $("#formStaff[name='staffNum']").val(num); layer.open({

    type:1,//类型

    title:' 新增员工信息',

    offset:['5%','30%'],

    area:['660px','560px'],//定义宽和高

    shadeClose:false,//点击遮罩层关闭

    content:$("#modStaff")//打开的内容

    });

    }

    break;

    }

    });

    代码运行效果如图:

    b77b6018718e7638a0671fc0237cb53a.png

    填入员工姓名,点击保存按钮调用下面方法,提交form表单保存数据到数据库,完成新增功能。

    function formSubmit(){

    $("#formStaff").ajaxSubmit(function(jsonObject){

    data = JSON.parse(jsonObject);

    if (data.state) {

    modHide();

    layer.alert(data.msg, { icon :1, title: '提示' },function(layerIndex){

    layer.close(layerIndex);

    table.reload();

    });

    } else {

    layer.msg(data.msg);

    }

    }

    }

    展开全文
  • layui table实现新增、排序等功能(获取分页所有数据&解决在非首页新增时数据获取失败问题) 刚接触layui,要实现前台新增文本插入表格功能,主要讲下我遇到的问题和解决方法,应该都是笨方法哈哈,记录下来也是...
  • 新增数据 1.设置添加按钮 <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-sm" id="add" lay-event="add">...
  • 集合网上的一些资料后整理出较为实用的layui数据表格新增的办法! layui数据表格用的是方法渲染的方法 layui数据表格有三种渲染方式,具体的请看官网介绍。我这里用的是方法渲染的方法。 下面请看具体操作 1.如何...
  • 想问一下,我现在的tab选项卡在父页面,里面嵌套了一个iframe子页面,我现在希望在子页面点击事件后父页面的选项卡增加一个,要怎么实现layui.use(‘element’, function () { var element = layui.element; $(’...
  • layui table动态新增

    2020-08-24 09:26:03
    button class="layui-btn layui-btn-sm" data-type="reload" onclick="addFunctionModule()" lay-event="addFunctionModule">新增行</button> /** * 新增行 */ addFunctionModule = function ...
  • 基于之前几篇博客优化layui的tab鼠标右键功能(参考博客https://blog.csdn.net/nb7474/article/details/79413460/),使用layui实现的水平导航动态操作tab项,本篇博客主要讲的是:新增基于鼠标焦点(mouseover事件...
  • 场景:某供应商模块,有新增、编辑操作,对数据进行更改后,关闭新增或编辑页面,原页面数据刷新思路:1、如果能在供应商页面监听到新增或编辑页面的tab页关闭,那么在供应商页面通过事件监听后执行:window.location....
  • 1、开启layui的表格编辑功能 只需要在表格的行后面添加:edit: ‘text’,等字段即可以实现表格的编辑功能,并且可以开启表格编辑的监听功能。 table.on('edit(test)', function(obj){ //注:edit是固定事件名,...
  • layui数据表格新增一行

    万次阅读 热门讨论 2018-06-12 13:31:35
    layui的数据表格集成了查看编辑删除等功能,但新增功能官方文档却没有提及,当业务需求需要点击新增一行时,可用如下方式实现实现的思路是:当点击新增一行时,把之前的数据保存下来,并在数据尾部增加一行空数据 ...
  • 方案一layui的数据表格集成了查看编辑删除等功能,但新增功能官方文档却没有提及,当业务需求需要点击新增一行时,可用如下方式实现实现的思路是:当点击新增一行时,把之前的数据保存下来,并在数据尾部增加一行空...
  • 因为layui 的tree 是无限级,所以增删改都是所有层级都有的,但是因为,我这边要实现如下图所示功能,就加以改造了 增删改的点击功能是从网上找的,修改的源码 具体的tree.js 可以通过以下链接下载 链接:...
  • 需求点:1、要求可实现多文件上传;2、可以动态新增、删除文件列表中的文件;3、使用文件ID下载;4、支持跨域; 提示:SpringMVC在4.2版本中有快捷的跨域处理方式@CrossOrigin 第一步:使用La...
  • if (obj.event === 'addRow') { debugger; var oldData = $tableLayui.table.cache['currentTableId']; var tr = obj.tr;... //将元素放到首位,即可实现新增首行的效果 $tableLayui.table.rende...
  • layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a> </script> </div> </div&...
  • 运用的知识点:layui中的模板知识,常规的正则表达式应用,时间格式的处理和获取 三元表达式的应用; ,{field: 'submitTime', title: '提交时间', width:164} ,{field: '', title: '等待时间', w...
  • Layui表格-新增一行空的表格

    千次阅读 2019-07-17 21:39:54
    layui的数据表格功能十分强大,集成了非常 多的功能;最近项目遇到一个问题,就是需要点击 新增一行空的表格,但是这个这个功能在官方文档 并没有介绍;如果你需要用到以上功能的话,可以 使用下面的方法; 当项目...

空空如也

空空如也

1 2 3 4 5 6
收藏数 113
精华内容 45
关键字:

layui实现新增