layui数据表格通过data参数实现动态赋值(结合thymeleaf)

背景: 正常通过data,都是要在html页面将数据提前写好,不然都是通过url跟后台要数据,由于项目需求需要通过thymeleaf传数据

 //后台传jsonarra数据后,虽然是json格式,但是前台还是要通过下面两种方法操作下,才能被data这个参数认可----其中原因未知
    var workTaskDataJson=eval($("#workTaskData").val());
    //或者通过下面这种方法
    // var workTaskDataJson=JSON.parse($("#workTaskData").val());

    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#workTaskTable'
            , height: 100
            , data: workTaskDataJson
            , cols: [
                [ //表头
                    {
                        field: 'workSpace',
                        title: '工作地点及设备双重名称',
                        width: '50%',
                        event: 'setWorkSpace',
                        style: 'cursor:pointer;',
                    }
                    , {
                    field: 'workContent',
                    title: '工作内容*',
                    width: '50%',
                    event: 'setWorkContent',
                    style: 'cursor:pointer;',
                }
                ]
            ]
            , done: function () {
                $("table").width("100%");
                tdTitle();
            }
        });

后台代码,通过thymeleaf给workTaskData数据传值

   @RequestMapping("/today")
    private String today(Model model)
    {
        System.out.println("进入test0控制器");
        List<WorkTask> workTaskList=new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            WorkTask workTask=new WorkTask();
            workTask.setWorkSpace("dadasas");
            workTask.setWorkContent("wubin");

            workTaskList.add(workTask);
        }
        JSONArray jsonArray=JSONArray.fromObject(workTaskList);
        System.out.println("jsonarray"+jsonArray.toString());
        model.addAttribute("workTaskData",jsonArray.toString());
        return "workTicketPage";
    }

总结:前后端传给对方的数据都要进行解析才能使用,不然也许你看到你赋予参数的值符合要求,但是就是不被识别认可,就是要通过这种解析操作才可以,具体原因,才疏学浅,哎。。。。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
以下是一个简单的ThymeleafLayui实现登录页面的示例: 1. 引入Layui相关的CSS和JS文件 在HTML文件中引入Layui的CSS和JS文件,可以从Layui官网下载并放置在项目的静态资源目录下。示例代码如下: ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>登录页面</title> <link rel="stylesheet" href="/static/layui/css/layui.css"/> <script src="/static/layui/layui.js"></script> </head> <body> <!-- 页面内容 --> </body> </html> ``` 2. 编写登录表单 在页面中使用Layui的表单组件编写登录表单,示例代码如下: ``` <!-- 登录表单 --> <form class="layui-form" method="post" th:action="@{/login}"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" 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="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="login">登录</button> </div> </div> </form> ``` 在表单中使用Thymeleaf的表达式`th:action="@{/login}"`指定表单提交的URL,这里假设登录请求的URL为`/login`。 3. 编写登录处理器 在后端编写登录处理器,接收并处理登录请求。在处理器中可以使用Spring Security等安全框架进行身份认证和授权,这里只演示简单的处理器示例代码: ``` @Controller public class LoginController { @GetMapping("/login") public String login() { return "login"; } @PostMapping("/login") public String doLogin(@RequestParam("username") String username, @RequestParam("password") String password) { // 处理登录逻辑 return "redirect:/index"; } @GetMapping("/index") public String index() { return "index"; } } ``` 在`login()`方法中返回登录页面的视图名称,这里假设登录页面的视图名称为`login`。在`doLogin()`方法中处理登录请求,这里只是简单地接收并验证用户名和密码,然后重定向到首页。 4. 启用Layui表单验证 为了启用Layui表单验证功能,在页面底部添加以下代码: ``` <script> layui.use('form', function(){ var form = layui.form; form.verify({ username: function(value){ if(value.length < 5){ return '用户名长度不能小于5位'; } }, password: function(value){ if(value.length < 6){ return '密码长度不能小于6位'; } } }); form.on('submit(login)', function(data){ // 提交表单 return true; }); }); </script> ``` 在以上代码中,`layui.use('form', function(){...})`是Layui表单组件的初始化代码,`form.verify({...})`用于添加表单验证规则,`form.on('submit(login)', function(data){...})`用于提交表单。这里定义了两个表单验证规则:用户名长度不能小于5位,密码长度不能小于6位。 5. 运行程序 启动程序,访问登录页面,输入用户名和密码,点击登录按钮,即可提交登录表单并跳转到首页。如果输入的用户名和密码不符合验证规则,则会提示错误信息。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值