把后台数据传到前台表格中并开关赋值还要从后台得到开关值

最新推荐文章于 2024-09-06 09:05:47 发布

aaqia

最新推荐文章于 2024-09-06 09:05:47 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/aaqia/article/details/119419307

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="js/layui-v2.5.6/layui/layui.js"></script>
    <link rel="stylesheet" href="js/layui-v2.5.6/layui/css/layui.css">
</head>
<body>
    <table class="layui-hide" id="test" lay-filter="test"></table>
 
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --> 
 
<script>
layui.use(['form','table','util','jquery'], function(){
  var table = layui.table;
  var form = layui.form;
  var util = layui.util;
  var $ = layui.jquery;

  table.render({
    elem: '#test'
    //,url:'/test/table/demo1.json'
    ,url:'/TableServlet2'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,title: '用户数据表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title:'序号', width:80, sort: true}
      ,{field:'bid', title:'编号', width:80, sort: true}
      ,{field:'xname', title:'系统名称', width:80,sort: true}
      ,{field:'nums', title:'个数', width:80,sort: true}
      ,{field:'jibie', title:'级别' ,width:80,sort: true}
      ,{field:'loudongname', title:'漏洞域名' ,width:80,sort: true}
      ,{field:'loudongtype', title:'漏洞类型' ,width:80,sort: true}
      ,{field:'tongzhi', title:'是否通知' ,width:160,sort: true  ,templet:function (d) {
                  return "<input type=\"checkbox\" name=\"like[read]\" title=\"已下发\" checked=\"\">";
              }}
      ,{field:'fankui', title:'是否反馈' ,width:160,sort: true,templet:function (d) {
                  return "<input type=\"checkbox\" name=\"like[read]\" title=\"已反馈\" checked=\"\">";
              }}
      ,{field:'fuce', title:'是否复测' ,width:160,sort: true,templet:function (d) {
                  return "<input type=\"checkbox\" name=\"like[read]\" title=\"已复测\" checked=\"\">";
              }}
      ,{field: 'xiufu' , title:'是否修复',width:160, templet:function (d) {
          if(d.xiufu){
              return "<input type=\"checkbox\" checked=\"\" name=\"open\" lay-skin=\"switch\" lay-filter=\"switchTest\" lay-text=\"已通过|未通过\" value='已通过'>"
          }else {
              return "<input type=\"checkbox\"              name=\"close\" lay-skin=\"switch\" lay-filter=\"switchTest\" lay-text=\"已通过|未通过\" value='未通过'>"
          }
             }}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
    ,page: true
  });
  
  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选');
      break;
      
      //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.prompt({
        formType: 2
        ,value: data.email
      }, function(value, index){
        obj.update({
          email: value
        });
        layer.close(index);
      });
    }
  });

    //监听指定开关
    form.on('switch(switchTest)', function(data){
        var x=  this.checked ? true: false;
        console.log(x)
        if(x){
            data.value="已通过"
            console.log(data.value)
        }else{
            data.value="未通过"
            console.log(data.value)
        }

        layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
            offset: '6px'
        });
    });
});

</script>

</body>
</html>

-----------

package com.controller;

import com.alibaba.fastjson.JSON;
import com.bean.Table2;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet(name = "TableServlet2",urlPatterns = "/TableServlet2")
public class TableServlet2 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //super.service(req, resp);

        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        List<Table2> list = new ArrayList<>();

        Table2 table = new Table2();
        table.setId(1);
        table.setBid("001");
        table.setXname("哈哈");
        table.setNums(4);
        table.setJibie("高危");
        table.setLoudongname("www.baidu.com");
        table.setLoudongtype("未知");
        table.setTongzhi(true);
        table.setFankui(true);
        table.setFuce(true);
        table.setXiufu(true);
        list.add(table);

        Table2 table2 = new Table2();
        table2.setId(2);
        table2.setBid("002");
        table2.setXname("哈哈哈");
        table2.setNums(4);
        table2.setJibie("低危");
        table2.setLoudongname("www.baidu.com");
        table2.setLoudongtype("未知");
        table2.setTongzhi(false);
        table2.setFankui(false);
        table2.setFuce(false);
        table2.setXiufu(false);
        list.add(table2);

        Map map = new HashMap<>();
        map.put("code",0);//默认是0 不然 不显示
        map.put("msg","写啥都行");
        map.put("count",2);
        map.put("data",list);

        String s = JSON.toJSONString(map); 
        PrintWriter writer = resp.getWriter();
        writer.println(s);
        writer.close();
    }
}

--------

package com.bean;

public class Table2 {
    private int id;                 //序号
    private String bid;             //编号
    private String xname;           //系统名称
    private int nums;               //个数
    private String jibie;           //级别
    private String loudongname;     //漏洞域名
    private String loudongtype;     //漏洞类型
    private boolean tongzhi;         //是否通知
    private boolean fankui;          //是否反馈
    private boolean fuce;            //是否复测
    private boolean xiufu;           //是否修复

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getBid() {
        return bid;
    }

    public void setBid(String bid) {
        this.bid = bid;
    }

    public String getXname() {
        return xname;
    }

    public void setXname(String xname) {
        this.xname = xname;
    }

    public int getNums() {
        return nums;
    }

    public void setNums(int nums) {
        this.nums = nums;
    }

    public String getJibie() {
        return jibie;
    }

    public void setJibie(String jibie) {
        this.jibie = jibie;
    }

    public String getLoudongname() {
        return loudongname;
    }

    public void setLoudongname(String loudongname) {
        this.loudongname = loudongname;
    }

    public String getLoudongtype() {
        return loudongtype;
    }

    public void setLoudongtype(String loudongtype) {
        this.loudongtype = loudongtype;
    }

    public boolean isTongzhi() {
        return tongzhi;
    }

    public void setTongzhi(boolean tongzhi) {
        this.tongzhi = tongzhi;
    }

    public boolean isFankui() {
        return fankui;
    }

    public void setFankui(boolean fankui) {
        this.fankui = fankui;
    }

    public boolean isFuce() {
        return fuce;
    }

    public void setFuce(boolean fuce) {
        this.fuce = fuce;
    }

    public boolean isXiufu() {
        return xiufu;
    }

    public void setXiufu(boolean xiufu) {
        this.xiufu = xiufu;
    }

    @Override
    public String toString() {
        return "Table2{" +
                "id=" + id +
                ", bid='" + bid + '\'' +
                ", xname='" + xname + '\'' +
                ", nums=" + nums +
                ", jibie='" + jibie + '\'' +
                ", loudongname='" + loudongname + '\'' +
                ", loudongtype='" + loudongtype + '\'' +
                ", tongzhi=" + tongzhi +
                ", fankui=" + fankui +
                ", fuce=" + fuce +
                ", xiufu=" + xiufu +
                '}';
    }
}

-------

最后做出来的效果是这样的