精华内容
下载资源
问答
  • layui页面打开弹窗页面:修改数据删除else if (obj.event === 'data') {admin.popup({title: '显示页面 - '+obj.data.页面编号, area: ['1100px', '700px'], id: '显示页面-popup-edit', success: function ...

    layui  主页面打开弹窗页面:

    修改

    数据

    删除

    else if (obj.event === 'data') {

    admin.popup({

    title: '显示页面 - '+obj.data.页面编号

    , area: ['1100px', '700px']

    , id: '显示页面-popup-edit'

    , success: function (layero, index) {

    view(this.id).render('screen/显示页面数据管理', data).done(function () {

    //render函数的参数data就是传入给子页面的数据

    form.render(null, '数据管理-编辑-form');

    //监听提交

    //form.on('submit(显示页面-edit-submit)', function (data) {

    // var field = data.field; //获取提交的字段

    // //提交 Ajax 成功后,关闭当前弹层并重载表格

    // $.ajax({

    // type: 'POST',

    // url: './json/Data.aspx?cmd=save_显示页面',

    // dataType: "JSON",

    // crossDomain: true,

    // data: { data_json: JSON.stringify(field), type: "edit" },

    // success: function (result) {

    // layer.msg(result.msg);

    // },

    // error: function (jqXHR, textStatus, errorThrown) {

    // layer.msg(result.msg);

    // }

    // });

    //layui.table.reload('显示页面数据管理-table'); //重载表格

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

    //});

    });

    }

    });

    }

    弹窗页面获取值:

    1、若是编辑修改页面,通过{{ d.params.数据编号 || '' }} 获取,参数对应即可

    数据编号:

    2、通过layui.data.sendParams(d.params)函数获取:

    在div中加入以下代码:

    然后在JS中赋值函数获取参数:

    layui.data.sendParams = function (params) {

    alert(JSON.stringify(params));

    table.render({

    elem: '#数据管理-table'

    , toolbar: '#数据管理-table-toolbar-toolbarDemo'

    , url: './json/Data.aspx?cmd=get_数据管理'

    , where: { '页面编号': params.页面编号 }

    , cols: [[

    { type: 'numbers', title: '序号', width: '80' }

    , { fixed: 'edit', title: '操作', toolbar: '#数据管理-table-toolbar', width: 220 }

    , { field: '数据编号', title: '数据编号', width: 140 }

    , { field: '数据名称', title: '数据名称', width: 250 }

    , { field: '页面编号', title: '编号', width: 250 }

    ]]

    , done: function () {

    $("[data-title='编号']").css('display', 'none');

    }

    , page: false

    , limits: [10, 20, 50] //一页选择显示

    , limit: 10 //一页显示10条数据

    , height: 'full-260'

    , text: '对不起,加载出现异常!'

    });

    };

    二、layui table请求添加参数和ajax的区别

    layui的参数是通过where传递(json格式的值),ajax是通过data的json格式传递。

    另外where直接使用JSON.stringify(params)生成的json数据,后台取不到值,得拼接生成。

    , where: { "页面编号": params.页面编号 }

    展开全文
  • 本文主要为大家分享一篇Layui前后台交互...Json数据格式交互前后台,并且也相当适用单页面开发。有兴趣的朋友可以看看layui官网。Layui前后台数据交互layui有自己的一套特定的数据格式交互(这很重要),必须参数code...

    本文主要为大家分享一篇Layui前后台交互数据获取java实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。

    Layui简介

    Layui是一款适用于后台程序员的UI框架,学习成本低。Json数据格式交互前后台,并且也相当适用单页面开发。有兴趣的朋友可以看看layui官网。

    Layui前后台数据交互

    layui有自己的一套特定的数据格式交互(这很重要),必须参数code:0,msg:“”,count:数据size(int),data:”数据List”。一般我们选择封装返回接收类。

    Layui前台js请求数据

    其中 html代码

    js代码

    layui.use(['form','layer','table'], function(){

    var table = layui.table

    ,form = layui.form,$=layui.$;

    table.render({

    elem: '#test' //绑定table id

    ,url:'sys/menu/list' //数据请求路径

    ,cellMinWidth: 80

    ,cols: [[

    {type:'numbers'}

    ,{field:'name', title:'菜单名称'}

    ,{field:'parentName', title:'父菜单名称',width:150}

    ,{field:'url', title: '菜单路径'}

    ,{field:'perms', title: '菜单权限'}

    ,{field:'type', title:'类型'}

    ,{field:'icon', title:'图标'}

    ,{field:'orderNum', title:'排序'}

    ,{fixed: 'right',title: '操作', width:180, align:'center', toolbar: '#toolBar'}//一个工具栏 具体请查看layui官网

    ]]

    ,page: true //开启分页

    ,limit:10 //默认十条数据一页

    ,limits:[10,20,30,50] //数据分页条

    ,id: 'testReload'

    });

    });

    java后台代码

    @RequestMapping("/list")

    @ResponseBody

    @RequiresPermissions("sys:menu:list")

    public Layui list(@RequestParam Map params){

    //查询列表数据

    Query query = new Query(params);

    List menuList = sysMenuService.queryList(query);

    int total = sysMenuService.queryTotal(query);

    PageUtils pageUtil = new PageUtils(menuList, total, query.getLimit(), query.getPage());

    return Layui.data(pageUtil.getTotalCount(), pageUtil.getList());

    }

    Layui工具类代码

    public class Layui extends HashMap {

    public static Layui data(Integer count,List> data){

    Layui r = new Layui();

    r.put("code", 0);

    r.put("msg", "");

    r.put("count", count);

    r.put("data", data);

    return r;

    }

    }

    PageUtils在这里可有可无,你们可以自行封装

    @Data

    public class PageUtils implements Serializable {

    private static final long serialVersionUID = -1202716581589799959L;

    //总记录数

    private int totalCount;

    //每页记录数

    private int pageSize;

    //总页数

    private int totalPage;

    //当前页数

    private int currPage;

    //列表数据

    private List> list;

    /**

    * 分页

    * @param list 列表数据

    * @param totalCount 总记录数

    * @param pageSize 每页记录数

    * @param currPage 当前页数

    */

    public PageUtils(List> list, int totalCount, int pageSize, int currPage) {

    this.list = list;

    this.totalCount = totalCount;

    this.pageSize = pageSize;

    this.currPage = currPage;

    this.totalPage = (int)Math.ceil((double)totalCount/pageSize);

    }

    }

    总之一句话,最后Layui接受到的数据格式要为。

    相关推荐:

    javascript - php js交互数据

    php和java进行交互数据

    extjs中form与grid交互数据(record)的方法_javascript技巧

    展开全文
  • 类型一:通过Layer打开的子页面在这种方式中,我们先获取到数据,随后才渲染页面,因此选择直接将参数带链接中;在子页面采用正则表达式解析链接,得到参数。父layer.open({title: '编辑',type: 2,area: ['1000px'...

    从对象的获取上看,通过父获取子需要在繁多的id当中找到自己需要的那个,而通过子获取父则只需一个parent。因此在数据传递时,由子页面来主导更为合适。

    类型一:

    通过Layer打开的子页面

    在这种方式中,我们先获取到数据,随后才渲染页面,因此选择直接将参数带到链接中;在子页面采用正则表达式解析链接,得到参数。

    layer.open({

    title: '编辑',

    type: 2,

    area: ['1000px', '500px'],

    content: 'edit.html?id=' + dataid,

    btn: ["保存", "取消"],

    });

    console.log(getQueryString("id"));

    function getQueryString(name) {

    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');

    var r = window.location.search.substr(1).match(reg);

    if (r != null) {

    return unescape(r[2]);

    }

    return null;

    }

    类型二:

    提前定义的iframe页面

    为了实现子页面在获取数据后更新,需要将更新子页面的代码包装成方法供父页面调用;虽然跳转链接已经固定,但我们可以在父页面元素的其他属性中临时保存数据。

    父:页面定义

    面板

    父:取得数据时

    const $editFrame = $("#editFrame");

    $editFrame.attr("data-id", dataid);

    $editFrame[0].contentWindow.refresh();

    function refresh() {

    const queryId = parent.$("#editFrame").attr("data-id");

    console.log(queryId);

    // ......

    }

    展开全文
  • 用途:把父页面数据表格中的指定行数据传递到页面,在子页面中把数据传递到页面。内有项目一个,说明文本一个。
  • 最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个问题我百度...

    最近做一个项目的需要多个弹层,每个弹层中还需要数据传递,

    经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法

    大概如图,看图自己应该明白

    1412138-20180703205141924-1408185467.png

    如何在在b页面选择好的值传给a页面的问题,这个问题我百度了好久都没有解决
    后来参考了文档

    http://fuxiao.io/practice/docs/#/layui/layer/iframes

    加上自己理会,终于解决问题了,这个文档看了好几次还是不太明白(个人理解能力差),后来加班自己边动手边理解,解决问题了

    上代码

    主页面(top.html)的代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>top</title>
        <style>
            .top{
                margin-left: 100px;
                margin-top: 100px;
            }
        </style>
    
    </head>
    
    <body>
    
        <div class="top">
            <h1>我是top页面</h1>
            <button class="new-add">点我弹出a页面</button>
        </div>
    
    <script src="../assets/scripts/jquery.min.js"></script>
    <script src="../js/plugins/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
    
    <script>
    
    </script>
    
    <script type="text/javascript">
        var layerFrameConfig = {};// 在主页面上定义变量,保存每个弹层的layero,和index
        $('.new-add').on('click',function () {
            var url = 'http://localhost:63342/test-webapp/test2/a.html?_ijt=788n4ijd8brnpou9iu6s365hom'
            parent.layer.open({
                type: 2,
                title: '我是a页面',
                isOutAnim:false,
                area: ['660px','480px'],
                content: [url],
                success: function(layero, index){
                    // 把a页面的layero和index保存到top页面中的layerFrameConfig变量中
                    // 在b页面就可以通过 top.layerFrameConfig 等获取a页面的windown对象
    
                    // 如果不是在主页面,要加top 才能获取layerFrameConfig , 如: top.layerFrameConfig 
                    layerFrameConfig.iframeA = {
                        layer_index: index,
                        layer_layero: layero
                    }
    
                }
            })
        })
    
    
    </script>
    
    
    </body>
    </html>
    

    a 页面的代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="author" content="">
    
        <title>a</title>
        <style>
            .a{
                padding: 20px;
            }
    
        </style>
    
    </head>
    
    <body>
    <div class="a">
        <button class="new-add">我是a页面</button>
        <h1>我是通过top页面打开的弹层a子页面</h1>
        <input id="inputa" type="text" value="a">
    </div>
    
    <script src="../assets/scripts/jquery.min.js"></script>
    <script src="../js/plugins/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
    <!-- 对应JS -->
    
    <script>
    
    </script>
    
    <script type="text/javascript">
    
        $('.new-add').on('click',function () {
            var url = 'http://localhost:63342/test-webapp/test2/b.html?_ijt=788n4ijd8brnpou9iu6s365hom'
            parent.layer.open({
                type: 2,
                isOutAnim:false,
                title: '我是b页面',
                area: ['660px','480px'],
                content: [url],
                success: function(layero, index){
                    // 把b页面的layero和index保存到top页面中的layerFrameConfig变量中
    //                top.layerFrameConfig.iframeB = {
    //                    layer_index: index,
    //                    layer_layero: layero
    //                }
                }
            })
        })
    
    </script>
    </body>
    </html>
    
    
    

    b页面的代码

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>b</title>
    
        <style>
            .b{
                padding: 20px;
            }
        </style>
    </head>
    
    <body>
    
    <div class="b">
        <h2>把值传给第a页面的input,也就是相对于来说b的父页面</h2>
        <button class="save">点我传值给父页面(a页面)的input框</button>
        <h4>我是通过弹层a子页面点击弹出来的页面</h4>
    </div>
    <script src="../assets/scripts/jquery.min.js"></script>
    <script src="../js/plugins/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
    
    <!-- 对应JS -->
    
    <script>
    
    </script>
    
    <script type="text/javascript">
    
    
        // 此段代码处于 iframeB 页面中
       var lfc = top.layerFrameConfig;
       var iframeAIndex = lfc.iframeA.layer_index;
       var iframeALayero = lfc.iframeA.layer_layero;
    //   console.log(iframeAIndex)
    //   console.log(iframeALayero)
    
       var iframeAWin = top[iframeALayero.find('iframe')[0]['name']];
       var index = parent.layer.getFrameIndex(window.name); // 获取当前的index
       $('.save').click(function () {
           iframeAWin.$('#inputa').val('我是B(子)页面传来的值');
           parent.layer.close(index);
       });
    
    </script>
    
    
    </body>
    </html>
    

    转载于:https://www.cnblogs.com/ybixian/p/9260579.html

    展开全文
  • 弹出子窗口(type:2),并在子窗口中进行关键字的输入,由ajax提交后台模糊搜索匹配对应的字段,ajax请求成功后并关闭当前打开的子窗口,关闭子窗口的同时将查询数据传递回去给父页面。 思路:(在父页面中...
  • 现在父页面页面加载方法中定义方法,专门用来获取从子页面的值$(document).ready(function() {//拿子窗口中传回的数据function getChildrenData(data){console.log('从子页面传递回到数据:');console.log(data);}...
  • layui页面 因为页面中的数据使用layui的form模块获取值,formData对象无法直接将多选框的值加入请求头,所以先将获取的多选按钮的值转为数组,然后使用formData.classId=arr_box;方法,将数组追加formData中,后台...
  • 背景 笔者之前一直使用 bootstrap table ,因为当前...有一个页面,左侧是一个 tree,右侧是一个 table,默认 table 加载全数据,当点击 tree 节点时,table 进行筛选,很简单的需求吧!   这里我们不谈 tree 的使用,
  • 出现的问题:1、使用 Layui 官方提供的 【转换静态表格】 方式初始化加载时报 id 找不的错误(自己的锅)2、传递参数问题(姑且算是 Layui 官方的锅)(自己的锅)笔者使用的 table 加载刷新方案有一个页面,左侧...
  • 页面中建立隐藏域 <input type="hidden" class="layui-input" id="test" name="test" >... // 子窗体传值父窗体 test是父页面的一个dom $("#test",window.parent.document).val(testValue ); ...
  • LayUI父窗口向弹出层传递数据可以解决页面中的编辑数据的操作。点击编辑按钮,父窗口传递当前选中行当数据至弹出层,弹出层获取父窗口传递的数据,接着在弹出层中展示出来。效果如下: 具体步骤 到LayUI官网寻找...
  • 关于layui的表格分页

    2020-12-20 13:30:25
    它在向后台发送请求的时候,会传递两个参数后台,一个是当前页面,一个是每页多少条数据 这样子后台会根据这两个参数,去像后台拿应有的数据,这样子,在数据量过大的时候,不用等待,它也减轻了负担 让客户的...
  • 使用layui数据表格时,在开发中后台可能传回的时间是一个时间戳,此时显示时间戳在页面上并不能看出年月日。这时需要对时间戳进行格式的转换: 将发布时间的时间戳转成对应的时间格式如下:(传递到数据表格的...
  • 后端list集合中的数据传递到前台HTML表格中显示

    千次阅读 热门讨论 2019-03-24 20:08:57
    将后端数据传送前端HTML表格中显示,主要利用了...要先实现后端list数据传递到前台HTML表格中显示,首先要做的是在后端查出数据,存放在list中。 这里只放核心代码,D层代码。 public List<Favoured_poli...
  • 大四找到工作之后就一直在寝室苟着,很多开发的技巧和tips都忘了,上周特地重新写了一个springboot的项目,很简单,增删查改,登陆注册,管理员权限,将数据传递到前端,对每特定的数据进行展示和评论等,总之就是一...
  • 现在,您可以在前端构建Web表单,同时将所有表单数据传递到FormBucket的后端- 无需编程 。 该网站提供了一个仪表板,用于存储和搜索所有表单提交的内容。 推荐读物: HTML5教程:使用HTML5表单的登录页面 创建...
  • 目录 写在前面 问题描述 解决方法 具体实现 ...前面我们已经搭建好了项目,这一小节我们使用...在做添加的时候很头疼需要从页面传递一组数据到后台,但同时又需要传递几个独立的参数。 以前的做法是在后...
  • 最近在用layui页面时碰到了一个问题,就是在使用页面框时如何传递参数。...为编辑按钮添加一个点击事件,并传递数据。然后在layer的回调函数(success方法)中,使用jquery为每个元素赋值。 function edit(.
  • 多条件查询方法练习

    2020-08-18 08:50:54
    多条件查询方法 多条件查询简单的来说就是用户在搜索指定的内容然后把结果搜索打印到页面...表格的渲染方式,首先要建立数据库查询数据多条件查询需要传递数据到控制器上所以要在控制器上设定好实体类传递数据,开始
  • MVC初始化表格

    2020-08-18 11:55:07
    首先定义两个全局的layui的模块 2.tabAirport用来存放表格初始化后的数据,初始化之后,将数据存放...(2)SystemMaintenance是区域名称,TCCMaintain是控制器名称,通过这个方式将表格数据传递到控制器中并接收。接.
  • Matrix物流管理系统前端...部分功能实现了前后端分离,比如系统的登录功能,系统报表等,前端通过Ajax Post将数据传递到后端,后端处理后返回json数据,前端处理得到的数据渲染到页面。 相比以前写的系统,这个系...
  • 用户登录

    2019-06-28 10:12:18
    (验证码的验证在博客中有讲) 当用户填写完输入框的信息后我们得在视图层获取输入框中的信息,并且提交控制器 ...PwUserinfo在这里是自定义用来接收页面传递数据的一个参数。 然后是通过页面传递的身份证...
  • 由于我的sql语句严格控制在ms级别,所以只需要几百ms,数据即可拿,此时渲染在页面上给用户的感觉很快) 3、sql语句的控制,本站的所有sql语句,均控制在1s以下。这块我花了很长时间进行sql优化,我举个例子:为了...

空空如也

空空如也

1 2
收藏数 25
精华内容 10
关键字:

layui传递数据到页面