精华内容
下载资源
问答
  • layui数据表格与后台交互进行渲染

    千次阅读 2020-06-29 02:30:19
    数据格式代码实现1.思路2.BookAction业务处理类3.LayuiResult类实现效果 准备工作 1.下载 先去官网把下载好软件包放入到项目中 https://www.layui.com/ 2.引入样式js 这里路径需要改成你自己路径 <link ...

    准备工作

    1.下载

    先去官网把下载好的软件包放入到项目中 https://www.layui.com/
    在这里插入图片描述

    2.引入样式和js

    这里路径需要改成你自己的路径

    <link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath }/static/js/layui/layui.js" charset="utf-8"></script>
    

    3.引入控件

    去官方文档找到table数据表格的控件 https://www.layui.com/doc/modules/table.html

    放置标签

    <table id="demo" lay-filter="test"></table>
    

    加载控件

    这里我们使用只需要改一下数据接口和指定表头就好了。

    <script src="/layui/layui.js"></script>
    <script>
    layui.use('table', function(){
      var table = layui.table;
      
      //第一个实例
      table.render({
        elem: '#demo'
        ,height: 312
        ,url: '/demo/table/user/' //数据接口
        ,page: true //开启分页
        ,cols: [[ //表头
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
          ,{field: 'username', title: '用户名', width:80}
          ,{field: 'sex', title: '性别', width:80, sort: true}
          ,{field: 'city', title: '城市', width:80} 
          ,{field: 'sign', title: '签名', width: 177}
          ,{field: 'experience', title: '积分', width: 80, sort: true}
          ,{field: 'score', title: '评分', width: 80, sort: true}
          ,{field: 'classify', title: '职业', width: 80}
          ,{field: 'wealth', title: '财富', width: 135, sort: true}
        ]]
      });
      
    });
    </script>
    

    4.数据格式

    这部分很重要,我们使用layui框架必须要去遵循它的数据格式。

    1. code:结果码
    2. msg:消息
    3. count:总记录数
    4. data:行数据对象
    {
    	"code": 0,
    	"msg": "ok",
    	"count": 17,
    	"data": [{
    		"id": 3,
    		"name": "测试",
    		"pinyin": "2",
    		"cid": 1,
    		"author": "2",
    		"price": 2.0,
    		"image": "/uploadImages/20200426090548.jpg",
    		"publishing": "2",
    		"description": "描述",
    		"state": 3,
    		"deployTime": 1587781624000,
    		"sales": 0
    	}, {
    		"id": 4,
    		"name": "测试",
    		"pinyin": "1",
    		"cid": 3,
    		"author": "3",
    		"price": 3.0,
    		"image": "/uploadImages/20200426085857.png",
    		"publishing": "1",
    		"description": "1",
    		"state": 0,
    		"deployTime": 1587783053000,
    		"sales": 0
    	}, {
    		"id": 5,
    		"name": "斗破苍穹",
    		"pinyin": "doupocangqiong",
    		"cid": 2,
    		"author": "天蚕土豆",
    		"price": 9.6,
    		"image": "/uploadImages/20200426092131.jpg",
    		"publishing": "纵横文学",
    		"description": "三天跟新一章,一章拆三章",
    		"state": 2,
    		"deployTime": 1587796008000,
    		"sales": 0
    	}, {
    		"id": 6,
    		"name": "爱的种子",
    		"pinyin": "aidezhongzi",
    		"cid": 1,
    		"author": "作者1",
    		"price": 12.0,
    		"image": "/uploadImages/20200426110858.png",
    		"publishing": "出版社1",
    		"description": "xxx",
    		"state": 2,
    		"deployTime": 1587869659000,
    		"sales": 0
    	}.........................]
    }
    

    代码实现

    1.思路

    我们只需要在后台把查询到的数据转为layui需要的格式就行了,这里我用的是自定义mvc框架配合一些工具类完成的。

    前端控件修改后

    <script src="${pageContext.request.contextPath }/static/js/layui/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --> 
    <script>
    layui.use('table', function(){
      var table = layui.table;
      table.render({
        elem: '#test'
         ,url:'Layui_01/book.action?methodName=datagrid'
        ,cols: [[
          {field:'id', width:80, title: 'ID', sort: true}
          ,{field:'name', width:80, title: '用户名'}
          ,{field:'pinyin', width:80, title: '拼音', sort: true}
          ,{field:'cid', width:80, title: '副id'}
          ,{field:'author', title: '作者', minWidth: 150}
          ,{field:'image', width:80, title: '路径', sort: true}
          ,{field:'publishing', width:80, title: '出版社', sort: true}
          ,{field:'state', width:80, title: '更新', sort: true}
          ,{field:'deployTime', width:80, title: '时间', sort: true}
          ,{field:'sales', width:80, title: '数量', sort: true}
        ]]
      ,page: true
      });
      
    });
    </script>
    
    

    2.BookAction业务处理类

    这一步就是把数据库查询到的值转换为需要的数据格式返回到浏览器中进行交互渲染。

    package com.liyingdong.web;
    import java.util.List;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import com.liyingdong.dao.BookDao;
    import com.liyingdong.entity.Book;
    import com.liyingdong.framework.ActionSupport;
    import com.liyingdong.framework.ModelDriver;
    import com.liyingdong.util.LayuiResult;
    import com.liyingdong.util.PageBean;
    import com.liyingdong.util.ResponseUtil;
    
    public class BookAction extends ActionSupport implements ModelDriver<Book> {
    
    	private Book book = new Book();
    	private BookDao bookdao = new BookDao();
    	@Override
    	public Book getModel() {
    		return book;
    	}
    	public String datagrid(HttpServletRequest req,HttpServletResponse resp) {
    		PageBean pageBean = new PageBean();
    		pageBean.setRequest(req);
    		try {
    			List<Book> list = this.bookdao.list(book, pageBean);
    			ResponseUtil.writeJson(resp,LayuiResult.ok(list, pageBean.getTotal()));
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    	
    }
    
    

    3.LayuiResult类

    之前我们用的一般是map来转换,但是现在我们可以自己创建一个工具类出来封装成前端需要返回的json数据格式!

    package com.liyingdong.util;
    
    public class LayuiResult<T> {
    	private int code=0;
    	private String msg="ok";
    	private int count;
    	private T data;
    	public T getData() {
    		return data;
    	}
    	public void setData(T data) {
    		this.data = data;
    	}
    	public int getCode() {
    		return code;
    	}
    	public void setCode(int code) {
    		this.code = code;
    	}
    	public int getCount() {
    		return count;
    	}
    	public void setCount(int count) {
    		this.count = count;
    	}
    	public String getMsg() {
    		return msg;
    	}
    	public void setMsg(String msg) {
    		this.msg = msg;
    	}
    	private LayuiResult() {
    		super();
    	}
    	public LayuiResult(T data, int count) {
    		super();
    		this.data = data;
    		this.count = count;
    	}
    	public static <T> LayuiResult ok(T data,int count){
    		return new LayuiResult<>(data,count);
    	}
    	
    	
    }
    
    

    实现效果

    前端
    在这里插入图片描述
    数据库
    在这里插入图片描述

    展开全文
  • 1.后台先定义一个前端 layui-tree 格式相同model,也可以加其他属性。 2.用递归生成菜单集合数据。 3.前台调用然后渲染。 感谢阳四爷哈!

    1.后台先定义一个和前端 layui-tree 格式相同的model,也可以加其他的属性。



    2.用递归生成菜单集合数据。


    3.前台调用然后渲染。


     

     

    感谢阳四爷哈!

    展开全文
  • Layui后台数据交互layui有自己一套特定数据格式交互(这很重要),必须参数code:0,msg:“”,count:数据size(int),data:”数据List”。一般我们选择封装返回接收类。Layui前台js请求数据其中html代码js...

    f88fc825314f2cd600707ef0d971ec05.png

    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的数据表单可以实现前台和后台的数据交互。本博客主要记录如何实现后端和前端的数据交互 采用php语言作为后端。 //方法渲染: table.render({ cols: [[ //标题栏 {checkbox: true} ,{field: 'id', title: '...

    layui的数据表单可以实现前台和后台的数据交互。本博客主要记录如何实现后端和前端的数据交互

    采用php语言作为后端。

    //方法渲染:
    table.render({
      cols:  [[ //标题栏
        {checkbox: true}
        ,{field: 'id', title: 'ID', width: 80}
        ,{field: 'username', title: '用户名', width: 120}
      ]]
    });
     
    它等价于自动渲染:
    <table class="layui-table" lay-data="{基础参数}" lay-filter="test">
      <thead>
        <tr>
          <th lay-data="{checkbox:true}"></th>
          <th lay-data="{field:'id', width:80}">ID</th>
          <th lay-data="{field:'username', width:180}">用户名</th>
        </tr>
      </thead>
    </table>
    

    如上的两种方式的效果是一样的。

    首先看前端的界面

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>table模块快速使用</title>
      <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    </head>
    <body>
    <table id="demo" lay-filter="test"></table>
    <link rel="stylesheet" href="layui-master/src/css/layui.css" />
    <script src="layui-master/src/layui.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
    <script src="layer/layer.js"></script>
    <script>
    layui.use('table', function(){
      var table = layui.table;
      //第一个实例
      table.render({
        elem: '#test'
        ,height:480//设置容器的高度
        ,limit:10
        ,url: 'function.php' //数据接口
        ,page: true //开启分页
        ,cols: [[ //表头
          {field: 'stunum', title: '学号', width:120, sort: true, fixed: 'left'}
          ,{field: 'stuname', title: '用户名', width:120}
          ,{field: 'birth', title: '生日', width:120}
          ,{field: 'phone', title: '手机', width:120}
          ,{field: 'email', title: '邮箱', width:120}
          ,{field: 'work', title: '工作', width:120}
          ,{field: 'hobby', title: '爱好', width:120}
          ,{field: 'signature', title: '个性签名', width:120}
          ,{field: 'address', title: '地址', width:120}
          ,{field: 'major', title: '专业', width:120}
        ]]
      });
    });
    </script>
    <body>
        <table class="layui-hide" id="test" lay-filter="test" style="height: 100%;">
      </table>
    </body>
    </html>
    

    这个html通过对function.php的请求获得数据

    界面效果如下:

    <table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
      <thead>
        <tr>
          <th lay-data="{field:'id', width:80, sort: true}">ID</th>
          <th lay-data="{field:'username', width:80}">用户名</th>
          <th lay-data="{field:'sex', width:80, sort: true}">性别</th>
          <th lay-data="{field:'city'}">城市</th>
          <th lay-data="{field:'sign'}">签名</th>
          <th lay-data="{field:'experience', sort: true}">积分</th>
          <th lay-data="{field:'score', sort: true}">评分</th>
          <th lay-data="{field:'classify'}">职业</th>
          <th lay-data="{field:'wealth', sort: true}">财富</th>
        </tr>
      </thead>
    </table>
        
    

    这种写法同样可以

    后端的代码如下:

    <?php
    header("Content-type:text/html;charset=utf-8");
    $zhuji="localhost";
    $username="root";
    $password="root";
    $port=3306;
    $database="test";
    $conn=mysqli_connect($zhuji,$username,$password,$database,$port);
    if(!$conn){
        echo "数据连接失败";
    }
    //echo "数据连接成功";
    mysqli_query($conn,"set names utf8");//防止数据库乱码
    /*
     * 分页四要素
     * 1.当前页
     * 2.每页多少条记录,每页多少条记录要和前台对接好,取名最好为limit
     * 3.从数据库读取出多少条记录
     * 4.总共多少页
     */
    $page=isset($_GET["page"])?$_GET["page"]:1;
    $limit=10;
    $count=mysqli_num_rows(mysqli_query($conn,"select *from stuinfo"));//获取数据表的信息数量
    $perpage=ceil($count/$limit);//获取分页的数量
    $sql="select *from stuinfo limit ".($page-1)*$limit.",".$limit;//从数据库中获取的数据
    $result=mysqli_query($conn,$sql);//获取数量
    if(mysqli_num_rows($result)>0){//如果数据表不为空
        echo '{"code":0,"msg":"","count":1000,"data":[';
        $i=1;
        while($row=mysqli_fetch_assoc($result)){
            $i++;
            echo json_encode($row);//json格式
            if($i<mysqli_num_rows($result)+1){
                echo ",";
            }
        }
        echo "]}";
    }
    ?>
    

    展开全文
  • 使用LayUI对你所做系统进行前端美化和交互完善设计,使得系统操作和交互更加符合人机交互理念(以其中一个页面,如登录,注册,后台主页面为例,将截图上传即可,截图包括界面设计、数据交互过程、数据库数据...
  • 本文主要是用layui模板写一个后台管理界面,用到了微信小程序云数据库的交互,包括向云数据库发送请求进行查改增删操作,最终用layui数据表格显示。
  • 1、前端请求数据URL由谁来写在开发中,URL主要是由后台来写好给前端。若后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,...前端只是数据的被动接受者,只是接口文档的使用者。使用过程中,发现返回的...
  • layui form.on('submit(****)', function(data) 获取表单所有数据data.field,再将他发送给后端,发现后端无法接收对象,以为是匹配不上,于是又试了单个属性上传给后端,发现后端有数值,那应该就是前台和后台...
  • 最新Springboot整合Thymeleaf、layui实现简单增删改查

    万次阅读 多人点赞 2018-11-14 08:34:53
    Springboot整合Thymeleaf、layui实现简单增删改查 主页面列表分页显示 搜索功能 ...目前已实现简单增删改查功能、批量删除功能、以及Echart报表显示与后台的数据交互功能。后面会不断完善。...
  • layui,一款前端框架,提供了丰富组件模板,layui提供简约后台管理模板,对于后端学习者来说是个不错福音。这里记录在SSM框架下使用layui的分页组件laypage。(官网开发文档)环境 Spring+SpringMVC+Mybatis ,...
  • LayUI登录页面

    千次阅读 2020-04-29 11:17:14
    使用LayUI对你所做系统进行前端美化和交互完善设计,使得系统操作和交互更加符合人机交互理念(以其中一个页面,如登录,注册,后台主页面为例,将截图上传即可,截图包括界面设计、数据交互过程、数据库数据...
  • layui-admin.zip

    2020-04-29 10:33:08
    使用LayUI对你所做系统进行前端美化和交互完善设计,使得系统操作和交互更加符合人机交互理念(以其中一个页面,如登录,注册,后台主页面为例,将截图上传即可,截图包括界面设计、数据交互过程、数据库数据...
  • layui,一款前端框架,提供了丰富组件模板,layui提供简约后台管理模板,对于后端学习者来说是个不错福音。这里记录在SSM框架下使用layui的分页组件laypage。(官网开发文档) 环境 Spring+SpringMVC+Mybatis...
  • easyuiui框架easyuiBootStrapLayUiesayui Layout布局示例结果总结 ...有强大的数据交互功能 比较稳定 组件比较丰富 easyui节省很多网页开发时间规模。 easyui很简单但功能强大 免费 缺点是不
  • 继续记录layui的学习过程,这次是实现:对数据表格一行内容进行编辑(修改),并和后台服务器进行交互。点击‘编辑’按钮会出现一个弹层页表单用于输入修改的数据
  • 最近在使用Layui做项目时候使用layui表单功能进行ajax和后台进行数据交互(项目中使用了同步加载),在点击提交后,需要跳转到另一页面,但实际ajaxsuccess后书写window.location.href后并未成功跳转。...
  • layui 架构而成的后台管理模板系统,可以更轻松地实现前后端分离,它是 mvc 简化版,全面接管 视图 页面路由,并可自主完成数据渲染,服务端通常只负责数据接口,而前端只需专注视图事件交互,所有页面动作...
  • 文档更新时间:2019-3-26 22:28:09layuiAdmin pro (单页版)是完全基于 layui 架构而成的后台管理模板系统,可以更轻松地实现前后端分离,它是 mvc 简化版,全面接管 视图 页面路由,并可自主完成数据渲染,...
  • 重点:前后台数据交互,文件读取,数据库查询,插件使用等 难 点:JS插件使用 内 容:登录成功后,可在线预览图片、txt、Office文档、音视频等 图1 在线预览文档 图2 在线多媒体播放功能 1. 线预览或播放...
  • layuiadmin(iframe)开发文档

    万次阅读 多人点赞 2019-04-28 11:13:24
    layui 架构而成的后台管理模板系统,可以更轻松地实现前后端分离,它是 mvc 简化版,全面接管视图页面路由,并可自主完成数据渲染,服务端通常只负责数据接口,而前端只需专注视图事件交互,所有...
  • 后台管理项目实战, 本项目主要实现基本学生管理,包含主要知识点有:virtualenv虚拟环境、pip下载包、多app项目开发、templates模板继承、font-awesome图标使用、原生SQL语句数据库交互、ORM模型...
  • layui 架构而成的后台管理模板系统,可以更轻松地实现前后端分离,它是 mvc 简化版,全面接管视图页面路由,并可自主完成数据渲染,服务端通常只负责数据接口,而前端只需专注视图事件交互,所有页面动作都...
  • 客户端完善的交互效果动画; 11.对接公众号小程序,并且数据同步; 12.内置客服系统; 13.高频数据缓存; 14.数据备份恢复; 15.后台文件管理,带代码高亮,无需开发工具在线编辑代码; 16.标准接口、...

空空如也

空空如也

1 2
收藏数 24
精华内容 9
关键字:

layui和后台数据的交互