精华内容
下载资源
问答
  • 下面小编就为大家分享一篇Layui后台交互数据获取java实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layui后台交互数据获取java

    万次阅读 热门讨论 2018-01-01 09:32:27
    Layui后台数据交互layui有自己的一套特定的数据格式交互(这很重要),必须参数code:0,msg:“”,count:数据size(int),data:”数据List”。一般我们选择封装返回接收类。 Layui前台js请求数据 其

    Layui简介

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

    Layui前后台数据交互

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

    <link rel="stylesheet" href="static/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="static/layui/layui.js"></script>
    <table class="layui-hide" id="test" lay-filter="table"></table>

    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<String, Object> params){
                //查询列表数据
                Query query = new Query(params);
                List<SysMenuEntity> 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<String, Object> {
    
        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接受到的数据格式要为
    这里写图片描述

    展开全文
  • Layui与java后台交互

    千次阅读 2020-09-08 11:48:13
    layui是现在比较火的一个前端设计框架,下面介绍一下它的数据分页及其与java后台交互。 一、返回的Json格式 按照layui官网给的示例,自己封装了工具类,解析json数据格式,前端页面请求Controller获取json数据的...

    Layui与java后台交互

    目录

    Layui与java后台交互

    一、返回的Json格式

    二、前台代码

    三、pojo类

    四、Service层

     五、Contrller层


    layui是现在比较火的一个前端设计框架,下面介绍一下它的数据分页及其与java后台的交互。

    一、返回的Json格式

    按照layui官网给的示例,自己封装了工具类,解析json数据格式,前端页面请求Controller获取json数据的格式,然后利用工具类将json解析,把数据显示在前端页面。

    @Data
    public class ResponseResult<T> {
        private int code;
        private String msg;
        private T data;
        public static<T> ResponseResult renderSuccess(T data){
    
            ResponseResult<T> objectResponseResult = new ResponseResult<>();
            objectResponseResult.setCode(0);
            objectResponseResult.setData(data);
            objectResponseResult.setMsg("操作成功");
            return objectResponseResult ;
        }
    }
    

     上述方法使用了lombok插件,使用的时候更加方便。

    二、前台代码

    静态文件直接引入Layui与java后台交互

    layui是现在比较火的一个前端设计框架,下面介绍一下它的数据分页及其与java后台的交互。

     

    一、返回的Json格式

    按照layui官网给的示例,自己封装了工具类,解析json数据格式,前端页面请求Controller获取json数据的格式,然后利用工具类将json解析,把数据显示在前端页面。

    @Data
    
    public class ResponseResult<T> {
    
        private int code;
    
        private String msg;
    
        private T data;
    
        public static<T> ResponseResult renderSuccess(T data){
    
    
    
            ResponseResult<T> objectResponseResult = new ResponseResult<>();
    
            objectResponseResult.setCode(0);
    
            objectResponseResult.setData(data);
    
            objectResponseResult.setMsg("操作成功");
    
            return objectResponseResult ;
    
        }
    
    }
    
    

     上述方法使用了lombok插件,使用的时候更加方便。

    二、前台代码

    静态文件直接引入layui 官网的数据,直接下载。

     直接上前端代码:

    代码中整合了thymeleaf模板,嵌套了语法,和后端进行交互。

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <title>layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
        <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    </head>
    <body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
                </div>
            </script>
    
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    
            <script type="text/html" id="currentTableBar">
                <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
            </script>
    
        </div>
    </div>
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script>
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
    
            table.render({
                elem: '#currentTableId',
                url: '/findall',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [
                    [
                    {type: "checkbox", width: 50},
                    {field: 'name', width: 80, title: '用户名'},
                    {field: 'age', width: 80, title: '年龄', sort: true},
                    {field: 'email', width: 80, title: '邮箱'},
                    {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                   ]
                ],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 20,
                page: true,
                skin: 'line'
            });
            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                var result = JSON.stringify(data.field);
                layer.alert(result, {
                    title: '最终的搜索信息'
                });
    
                //执行搜索重载
                table.reload('currentTableId', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        searchParams: result
                    }
                }, 'data');
    
                return false;
            });
    
            /**
             * toolbar监听事件
             */
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event === 'add') {  // 监听添加操作
                    var index = layer.open({
                        title: '添加用户',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '/add.html',
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                } else if (obj.event === 'delete') {  // 监听删除操作
                    var checkStatus = table.checkStatus('currentTableId')
                        , data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
            });
    
            //监听表格复选框选择
            table.on('checkbox(currentTableFilter)', function (obj) {
                console.log(obj)
            });
    
            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
    
                    var index = layer.open({
                        title: '编辑用户',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '../page/table/edit.html',
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;
                } else if (obj.event === 'delete') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                }
            });
    
        });
    </script>
    
    </body>
    </html>

    add.html 响应添加按钮事件

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="/css/public.css" media="all">
    </head>
    <body>
    <form class="layui-form" action="/insert">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
    
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    
    <script>
        layui.use('form', function(){
            var form = layui.form;
    
            //监听提交
            form.on('submit(formDemo)', function(data){
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        });
    </script>

    三、pojo类

    @Data
    @NoArgsConstructor
    @AllArgsConstructor
    public class User {
        private Long id;
        private String name;
        private Integer age;
        private String email;
    }
    

    四、Service层

    定义接口:

    @Service
    public interface UserService {
        List<User> selectList();
        int insertUser(User  user);
    
    }
    

    实现接口:

    @Service
    public class UserServiceImpl  implements UserService {
        @Autowired
        private UseMapper userMapper;
        @Override
        public List<User> selectList() {
            return userMapper.selectList(null);
        }
        @Override
        public  int insertUser(User user) {
            return userMapper.insert(user);
        }
    }
    

     五、Contrller层

    @Controller
    public class UserController {
        @Autowired
        private UserService userService;
        @GetMapping("/findall")
        @ResponseBody
          public Object  userList(Model  model) {
            List<User> userList = userService.selectList();
            userList.forEach(System.out::println);
            model.addAttribute("list", userList);
            return ResponseResult.renderSuccess(userList);
        }
        @RequestMapping("/insert")
        public String  insert( @RequestParam("name")  String name ,@RequestParam ("age") Integer  age,@RequestParam("email") String email)
        {
            User user=new User();
            user.setName(name);
            user.setAge(age);
            user.setEmail(email);
            userService.insertUser(user);
         return  "/user";
        }
    }

     

    @Controller
    public class RedictController {
        @Autowired
        private UserService  userService;
        @GetMapping ("/user")
        public String  userPage(Model  model) {
            return "/user";
        }
    }

     

     

     

    展开全文
  • layui与java后台交互

    万次阅读 热门讨论 2018-04-17 08:42:11
    layui是现在比较火的一个前端设计框架,下面介绍一下它的数据分页及其与java后台交互。一、返回的Json格式按照layui官网给的示例,自己封装了工具类 public class LayuiReplay &lt;T&gt; { private int ...

    layui是现在比较火的一个前端设计框架,下面介绍一下它的数据分页及其与java后台的交互。

    一、返回的Json格式

    按照layui官网给的示例,自己封装了工具类

    
    public class LayuiReplay <T> {
        private int code;
        private String msg;
        private int count;
        private List<T> data;
    
        public LayuiReplay(int code, String msg, int count, List<T> data) {
            this.code = code;
            this.msg = msg;
            this.count = count;
            this.data = data;
        }
    
        public String toJson() {
            Gson gson = new Gson();
            String json = gson.toJson(this);
            return json;
        }
    
        public static <T> String toJson(int count, List<T> data) {
            LayuiReplay<T> replay = new LayuiReplay<>(ReplyCode.OK.getCode(), ReplyCode.OK.getMessage(), count, data);
            return replay.toJson();
        }
    
        public int getCode() {
            return code;
        }
    
        public void setCode(int code) {
            this.code = code;
        }
    
        public String getMsg() {
            return msg;
        }
    
        public void setMsg(String msg) {
            this.msg = msg;
        }
    
        public int getCount() {
            return count;
        }
    
        public void setCount(int count) {
            this.count = count;
        }
    
        public List<T> getData() {
            return data;
        }
    
        public void setData(List<T> data) {
            this.data = data;
        }
    }

    二、前台代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<link rel="stylesheet" href="../../tools/layui/css/layui.css" media="all">
    		<title>社区用户管理</title>
    	</head>
    	<body>
    		
    		<!--社区用户数据分页显示-->
    		<div  style="width: 95%;margin: 0 auto;">
    			<table class="layui-hide" id="user_info_manager" lay-filter="user_info_manager_filter"></table>
    		</div>
    		<!--状态展示 -->
    		<script type="text/html" id="status">
    		    {{#  if(d.isLocked == 1){ }}
    		    <i class="layui-icon" style="color: #1E9FFF;">စ正常</i>
    		    {{#  } }}
    		    {{#  if(d.isLocked == 0){ }}
    		    <i class="layui-icon">待激活</i>
    		    {{#  } }}
    		    {{#  if(d.isLocked == 2) { }}
    		    <i class="layui-icon">ဆ锁定</i>
    		    {{#  } }}
    		</script>
    		
    		<!--时间格式修改 -->
    		<script id="createTime" type="text/html">  
    			{{timestampToTime(d.createTime)}}  
    		</script> 
    		<script id="updateTime" type="text/html">  
    			{{timestampToTime(d.updateTime)}}  
    		</script> 
    		
    		<!--操作-->
    		<script type="text/html" id="barDemo">
    			{{#  if(d.isLocked == 0){ }}
    			<a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event="user_unlock">不可操作</a>
    			{{#  } }}	
    			{{#  if(d.isLocked == 1){ }}
    			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="user_lock">锁定</a>
    			{{#  } }}
    			{{#  if(d.isLocked == 2){ }}
    			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="user_unlock">已锁定</a>
    			{{#  } }}	  
    		</script>
    		
    		<!--引入的js -->
    		<script type="text/javascript" src="../../tools/layui/layui.js"></script>
    		<script type="text/javascript" src="../../tools/bootstrap/js/jquery-2.1.0.js" ></script>
    		<script type="text/javascript" src="../../js/web/user_info_manage.js"></script>
    
    		
    		
    	</body>
    </html>
    $(function() {
    	/*社区用户数据分页显示*/
    	layui.use('table', function() {
    		var table = layui.table;
    
    		table.render({
    			elem: '#user_info_manager',
    			height: 'full-50',
    			url: 'http://localhost:9901/user/getAllUserInfo',
    			page: true ,
    			loading: true,
    			text: {
    				none: '暂无相关数据'
    			},
    			cellMinWidth: 80,
    			cols: [
    				[{
    					field: 'username',
    					width: '10%',
    					title: '用户名',
    					sort: true
    				}, {
    					field: 'nickname',
    					width: '10%',
    					title: '昵称',
    					sort: true
    				}, {
    					field: 'email',
    					width: '13%',
    					title: '邮箱'
    				}, {
    					field: 'phone',
    					width: '12%',
    					title: '电话'
    				}, {
    					field: 'address',
    					width: '10%',
    					title: '地址',
    					minWidth: 100
    				}, {
    					field: 'createTime',
    					width: '13%',
    					title: '创建时间',
    					templet: '#createTime'
    				}, {
    					field: 'updateTime',
    					width: '13%',
    					title: '更新时间',
    					templet: '#updateTime'
    				}, {
    					field: 'isLocked',
    					width: '10%',
    					title: '当前状态',
    					templet: '#status'
    				}, {
    					fixed: 'right',
    					width: '9%',
    					align: 'center',
    					title: '操作',
    					toolbar: '#barDemo'
    				}]
    			],
    			request: {
    				pageName: 'page',
    				limitName: 'size'
    			},
    			limit: 10,
    			limits: [10, 20, 30, 40, 50]
    		});
    
    		//监听工具条
    		table.on('tool(user_info_manager_filter)', function(obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
    			//获得当前行数据
    			var data = obj.data;
    			layEvent = obj.event; //获得 lay-event 对应的值
    			if(layEvent === 'user_lock') {
    				//锁定用户
    				layer.confirm('您确定要锁定此用户吗?', {icon: 3, title:'锁定用户'}, function(index){  		
    					$.get("http://localhost:9901/user/lockUser/2/" + data.username, function(result) {	
    						if(result.status == 200) {
    							layer.msg('已锁定', {
    								icon: 1,
    							  	time: 2000 
    							}, 	function(){
    							  window.location.reload()
    							});
    						} else {
    							layer.msg(result.msg, {
    								icon: 2,
    							  	time: 2000 
    							}, 	function(){
    							  window.location.reload()
    							});
    						}
    
    						
    					})				
    				});		
    			} else if(layEvent === 'user_unlock') {
    				//解锁用户
    				layer.confirm('您确定要解锁此用户吗?', {icon: 3, title:'解锁用户'}, function(index){		
    					$.get("http://localhost:9901/user/lockUser/1/" + data.username, function(result) {			
    						if(result.status == 200) {
    							layer.msg('已解锁', {
    								icon: 1,
    							  	time: 2000 
    							}, 	function(){
    							  window.location.reload()
    							});
    						} else {
    							layer.msg(result.msg, {
    								icon: 2,
    							  	time: 2000 
    							}, 	function(){
    							  window.location.reload()
    							});
    						}						
    					})										
    				});	
    			}
    		});
    		
    	});
    });
    
    
    		
    <!--时间格式化-->
    function timestampToTime(timestamp) {
    
    	var date = new Date(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y+M+D+h+m+s;
    }
    
    

    在js的table.render中,cols的field字段对应后台po的属性,template链接到html中的的script标签,用于格式化一些数据,或者按照自己的意愿显示。

    三、po类

    package com.jingling.basic.po;
    
    import java.io.Serializable;
    import java.sql.Timestamp;
    
    /**
     * @Source: JDK 1.8
     * @Author: Zhao
     * @Since: version 1.0
     **/
    public class User implements Serializable {
    
        private Integer id;
        private String username;
        private String nickname;
        private String password;
        private String openid;
        private String unionid;
        private String email;
        private String phone;
        private String address;
        private String salt;
        private String validateCode;
        private String isLocked;
        private Timestamp createTime;
        private Timestamp updateTime;
    
        public User() {
        }
    
        public Integer getId() {
            return id;
        }
    
        public void setId(Integer id) {
            this.id = id;
        }
    
        public String getUsername() {
            return username;
        }
    
        public void setUsername(String username) {
            this.username = username;
        }
    
        public String getNickname() {
            return nickname;
        }
    
        public void setNickname(String nickname) {
            this.nickname = nickname;
        }
    
        public String getPassword() {
            return password;
        }
    
        public void setPassword(String password) {
            this.password = password;
        }
    
        public String getOpenid() {
            return openid;
        }
    
        public void setOpenid(String openid) {
            this.openid = openid;
        }
    
        public String getUnionid() {
            return unionid;
        }
    
        public void setUnionid(String unionid) {
            this.unionid = unionid;
        }
    
        public String getEmail() {
            return email;
        }
    
        public void setEmail(String email) {
            this.email = email;
        }
    
        public String getPhone() {
            return phone;
        }
    
        public void setPhone(String phone) {
            this.phone = phone;
        }
    
        public String getAddress() {
            return address;
        }
    
        public void setAddress(String address) {
            this.address = address;
        }
    
        public String getSalt() {
            return salt;
        }
    
        public void setSalt(String salt) {
            this.salt = salt;
        }
    
        public String getValidateCode() {
            return validateCode;
        }
    
        public void setValidateCode(String validateCode) {
            this.validateCode = validateCode;
        }
    
        public String getIsLocked() {
            return isLocked;
        }
    
        public void setIsLocked(String isLocked) {
            this.isLocked = isLocked;
        }
    
        public Timestamp getCreateTime() {
            return createTime;
        }
    
        public void setCreateTime(Timestamp createTime) {
            this.createTime = createTime;
        }
    
        public Timestamp getUpdateTime() {
            return updateTime;
        }
    
        public void setUpdateTime(Timestamp updateTime) {
            this.updateTime = updateTime;
        }
    }
    

    四、controller代码

        @GetMapping("/getAllUserInfo")
        public Object getAllUserInfo(@RequestParam("page") Integer page, @RequestParam("size") Integer size) {
    
            int count = userService.getUserCount();
            List<User> userList  = userService.getAllUserInfo(page, size);
            return new LayuiReplay<User>(0, "OK", count, userList);
    
        }

    layui要求,不仅传入数据,还得传入数据的总数,这样就可以使用其自带的分页效果。

    五、小结

    layui的交互其实并不难,很多人觉得layui的官方文档写的不好,因为好多东西拿过来不能直接使用,但其实他官网上好多示例都需要请求到数据才能执行。


    展开全文
  • layui数据表格与java后台数据交互

    千次阅读 2018-10-07 21:56:33
    layui数据表格与java后台数据交互 &amp;amp;amp;lt;table class=&amp;amp;quot;layui-hide&amp;amp;quot; id=&amp;amp;quot;test&amp;amp;quot; lay-filter=&amp;amp;quot;test&amp...

    layui数据表格与java后台数据交互

    jsp部分

    
    <table class="layui-hide" id="test"
    lay-filter="test"></table>
    
    

    js

    
    layui.use('table', function(){
    
    var table = layui.table;
    
    
    
    table.render({
    
    elem: '#test'
    
    ,url:'http://localhost:8080/news_ssh/newsAction_news.action'
    
    ,toolbar: '#toolbarDemo'
    
    ,title: '用户数据表'
    
    ,limit: 10
    
    ,cols: [[
    
    {type: 'checkbox', fixed: 'left'}
    
    ,{field:'id', title:'序号', width:80, fixed: 'left', unresize: true, sort: true}
    
    ,{field:'title', title:'标题', width:100}
    
    ,{field:'createTime', title:'录入时间', sort: true}
    
    ,{field:'name', title:'栏目', width:80}
    
    ,{field:'author', title:'录入者', width:120}
    
    ,{field:'source', title:'来源', width:100}
    
    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    
    ]]
    
    ,page: true
    
    });
    
    

    layui的数据来自url,layui规定url返回的数据为json格式,这就需要把java的数据转为json格式,因为json-lib-2.4-jdk15要依赖以下jar包

    commons-beanutils-1.8.0.jar、commons-collections-3.2.1.jar、commons-lang-2.6.jar、commons-logging-1.1.1.jar、ezmorph-1.0.6.jar、json-lib-2.4-jdk15.jar、xom-1.2.6.jar,比较麻烦,推荐用阿里的fastjson,fastjson是国内著名的电子商务互联网公司阿里巴巴内部开发的用于java后台处理json格式数据的一个工具包,包括“序列化”和“反序列化”两部分,它具备如下特征:

    1).速度最快,测试表明,fastjson具有极快的性能,超越任其他的java json parser。包括自称最快的jackson。

    2).功能强大,完全支持java bean、集合、Map、日期、Enum,支持范型,支持自省。

    3).无依赖,能够直接运行在Java SE 5.0以上版本

    4).支持Android。

    5).开源 (Apache 2.0)
    我用的是fastjson-1.2.49.jar
    fastJson的网址:http://code.alibabatech.com/wiki/display/FastJSON/Overview

    NewsAction

    public class NewsAction extends SuperAction implements ModelDriven<News> {
    
     public News n=new News();
    
     /*layui的数据表格向url发送请求时,会附上page以及limit这两个参数,
     所以服务端需要接收并以此为条件查找数据*/
     private int page=1;
    
     private int limit=10;
    
     public int getPage() {
    
      return page;
    
     }
    
     public void setPage(int
    page) {
    
      this.page = page;
    
     }
    
     public int getLimit() {
    
      return limit;
    
     }
    
     public void setLimit(int
    limit) {
    
      this.limit = limit;
    
     }
    
     public int TypeId=0;
    
     public int newsTypeId=0;
    
     public String news() throws Exception{
    
        WebApplicationContext applicationContext =
    WebApplicationContextUtils
    
        .getWebApplicationContext(ServletActionContext.getServletContext());
    
      NewsDao bdao = (NewsDaoImpl)
    applicationContext.getBean("newsDao");
    /*queryPageNews方法的查询语句为hql="select News.id,News.title,News.createTime,nt.name,News.source,News.author from News News,NewsType nt where News.state=? and News.newsTypeId=nt.id "+
      "and News.del=0 order by News.createTime desc";因为Hibernate多表联查,所以手动将结果集转化成JSON*/
      List<Object[]>list=bdao.queryPageNews(this.getPage(), this.getLimit(), 0);
    
      List<NewsAndNewsType> mylist = new
    LinkedList<NewsAndNewsType>();
    
      NewsAndNewsType nt;
    
      //System.out.println(list);
    
      for(Object[] object:list){             
      
    
       //System.out.println(object.length);           
     
    
       nt = new
    NewsAndNewsType();              
    
    
       nt.setId(object[0].toString());
    
       nt.setTitle((String) object[1]);
    
       nt.setCreateTime(object[2].toString());
    
       nt.setName((String) object[3]);
    
       nt.setSource((String) object[4]);
    
       nt.setAuthor((String) object[5]);
    
       mylist.add(nt);             
    
    
       }  
    
      session.removeAttribute("news_list");
    
      //放进session中
    
      if(list!=null&&list.size()>0){
    
       session.setAttribute("news_list", list);
    
       Map<String, Object> result = new HashMap<String,
    Object>();
    
          result.put("code", 0);
    
          result.put("msg", "");
    
         
    result.put("count",bdao.getqueryPageNewsCount(0));
    
          JSONArray array = (JSONArray)
    JSON.toJSON(mylist);
    
          result.put("data", array);
    
          // 将其转换为JSON数据,并压入值栈返回
    
         
    ActionContext.getContext().getValueStack().set("jsonData",JSON.toJSON(result));
    
          return "success";
    
      }else{
    
       session.setAttribute("listSize",list.size());
    
       System.out.println("成功查询,查询条数"+list.size());
    
      }
    
      System.out.println("成功查询,查询条数"+list.size());
    
      return SUCCESS;
    
     }
    
     public News
    getModel() {
    
      // TODO Auto-generated method stub
    
      return null;
    
     }
    
    }
    

    struts.xml配置

    <package name="myNews" extends="json-default" namespace="/">
      <action name="newsAction_*" class="com.sise.web.NewsAction" method="{1}">
            <result name="success" type="json">
                <param name="root">jsonData</param>
            </result>
            </action>
     </package>
    

    注意,struts.xml中extends="json-default"要导入jar包struts2-json-plugin-2.3.24.jar,param要为root
    在这里插入图片描述

    展开全文
  • layui实现数据绑定的方法:首先引入layui的css文件js文件;然后建立视图,用于呈现渲染结果;接着编写模版,使用一个script标签存放模板;最后渲染模版即可。本教程操作环境:Windows7系统、layui2.5.6版,本文...
  • 3.后台代码 AssetsListNew.aspx.cs using Common; using DAL; using DQPA.BLL; using DQPA.IBLL; using DQPA.MODEL; using Gma.QrCodeNet.Encoding; using Gma.QrCodeNet.Encoding.Windows.Render; using Maticsoft...
  • 5.ADO 操作数据库类sqlhelper.cs using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Text; using System.Threading.Tasks;... s.
  • 这段时间项目前端使用了layui框架,在layui的table数据展示上花了挺长的时间。记录下解决过程: 首先后台返回的数据格式必须严格遵守官方要求的JSON数据格式 http://fly.layui.com/jie/16441/ ...
  • 使用 Vue + LayUI后台管理、RESTful 交互

    万次阅读 多人点赞 2018-08-22 14:27:08
    一、前言 1、之前使用了 React/Angular,使用起来显然是比 jQuery 好多了,但时隔半年,最近再次...2、使用 vue + layui 了,但 layui 里边的 layui.js 模块 vue.js 冲突, 因此放弃使用 layui.js,导致很多高级...
  • layui穿梭框和layui表格数据交互

    千次阅读 2019-10-31 11:07:35
    // console.log(“交互失败”) // }); //穿梭框获取数据库数据 var data1 ; $.ajax({ url: '/DiseaseNumber/project', dataType: 'json', type: 'post', async: false,//true异步,flase同步 success: ...
  • 今天小编就为大家分享一篇layui数据表格--与后台交互获取数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui数据表格与后台交互进行渲染

    千次阅读 2020-06-29 02:30:19
    数据格式代码实现1.思路2.BookAction业务处理类3.LayuiResult类实现效果 准备工作 1.下载 先去官网把下载好的软件包放入到项目中 https://www.layui.com/ 2.引入样式js 这里路径需要改成你自己的路径 <link ...
  • sprinbgoot+mybatis+thymeleaf+layui实现前后台交互(一) pom文件 conrtroller 前台页面 注意事项 大佬勿喷,欢迎提意见建议评论!!!! pom文件 <dependencies> <dependency> <groupId>org.springframework.boot...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,071
精华内容 428
关键字:

layui和后台数据的交互