app开发定制公司Layui数据表格的使用及其ajax异步请求

目录

，动态获取

一、数据表格table 通过id来获取，动态获取

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

二、通过jsapp开发定制公司动态获取数据表格数据，app开发定制公司包括数据单元格的查看、编辑、删除

  1. <script type="text/html" id="barDemo">
  2.  
  3. <%--    <div class="layui-btn-container">--%>
  4. <%--        <button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>--%>
  5. <%--        <button type="button" class="layui-btn layui-btn-radius">默认按钮</button>--%>
  6. <%--        <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>--%>
  7. <%--        <button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>--%>
  8. <%--        <button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>--%>
  9. <%--        <button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>--%>
  10. <%--    </div>--%>
  11. <%--layui-btn layui-btn-xs layui-btn-normal--%>
  12.     <a class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius" lay-event="detail">查看</a>
  13.  
  14.     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  15.  
  16.     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  17. </script>

app开发定制公司动态获取表格

  1. <script src="/layui/layui.js"></script>
  2. <script src="/layui/layui.all.js"></script>
  3. <script src="/assets/js/jquery.js" type="text/javascript"></script>
  4. <script src="/assets/js/jquery.form.js" type="text/javascript"></script>
  5. <script src="/layuiadmin/layui/layui.all.js"></script>
  6. <script src="/layuiadmin/layui/layui.js"></script>
  7. <script type="text/javascript"></script>
  8.  
  9.  
  10.  layui.use('table', function(){
  11.         var table = layui.table;
  12.         var dropdown = layui.dropdown;
  13.  
  14.         //app开发定制公司第一个实例sousuo
  15.         table.render({
  16.             elem: '#demo'
  17.             // ,toolbar: '#toolbarDemo'
  18.             ,height: 'full-160'
  19.             // ,height: 'full-200' // app开发定制公司最大高度减去其他容器app开发定制公司已占有的高度差
  20.             ,cellMinWidth: 100
  21.             ,url: '/ceshi?action=query' //数据接口//app开发定制公司直接调用不需要跳转
  22.  
  23.             ,page: true //开启分页
  24.             // ,totalRow: true // 开启合计行得在前端传输数据：count//下面会多出空格//totalRowText: "合计"
  25.  
  26.             ,cols: [[ //表头
  27.  
  28.          {type: 'checkbox', fixed: 'left',width: 80,align: 'center',totalRowText: "合计"}
  29.                 ,{field: 'eId', title: '编号', width:80, sort: true, fixed: 'left'}
  30.                 ,{field: 'eAccount', title: '账户', width:80}
  31.                 ,{field: 'ePassword', title: '密码', width:80, sort: true}
  32.                 ,{field: 'eName', title: '姓名', width:80, sort: true}
  33.                 ,{field: 'eSex', title: '性别', width:80, sort: true}
  34.                 ,{field: 'eEducation', title: '学历', width:80, sort: true}
  35.                 ,{field: 'dName', title: '部门', width:120, sort: true}
  36.                 ,{field: 'ePosition', title: '职称', width:80, sort: true}
  37.                 ,{field: 'eIdcard', title: '身份证号码', width:180, sort: true}
  38.                 ,{field: 'ePhone', title: '手机号码', width:120, sort: true}
  39.                 ,{field: 'eAddress', title: '家庭地址', width:120, sort: true}
  40.                 ,{field: 'eEntrytime', title: '入职时间', width:120, sort: true}
  41.                 ,{fixed: 'right', title:'操作', width: 200, minWidth: 125, toolbar: '#barDemo'}
  42.             ]]
  43.             // , page:true
  44.             ,limit:10
  45.             ,limits:[5,10,20,30,40,50]
  46.             , parseData: function (res) { //res 即为原始返回的数据
  47.                 console.log("成功"+res.status+";=="+res.message+";"+res.total);
  48.                 return {
  49.                     "code": res.status, //解析接口状态
  50.                     "msg": res.message, //解析提示文本
  51.                     "count": res.total, //解析数据长度
  52.                     "data": res.data //解析数据列表
  53.                 };
  54.             }
  55.  
  56.  
  57.  
  58.             ,done: function(){
  59.                 var id = this.id;
  60.  
  61.               
  62.             }
  63.             ,error: function(res, msg){
  64.                 console.log(res, msg)
  65.             }
  66.         });
  67.  
  68.         // 工具栏事件
  69.         table.on('toolbar(test)', function(obj){
  70.             var id = obj.config.id;
  71.             var checkStatus = table.checkStatus(id);
  72.             var othis = lay(this);
  73.             switch(obj.event){
  74.                 case 'getCheckData':
  75.                     var data = checkStatus.data;
  76.                     layer.alert(layui.util.escape(JSON.stringify(data)));
  77.                     break;
  78.                 case 'getData':
  79.                     var getData = table.getData(id);
  80.                     console.log(getData);
  81.                     layer.alert(layui.util.escape(JSON.stringify(getData)));
  82.                     break;
  83.                 case 'isAll':
  84.                     layer.msg(checkStatus.isAll ? '全选': '未全选')
  85.                     break;
  86.                 case 'multi-row':
  87.                     table.reload('test', {
  88.                         // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
  89.                         lineStyle: 'height: 95px;'
  90.                     });
  91.                     layer.msg('即通过设置 lineStyle 参数可开启多行');
  92.                     break;
  93.                 case 'default-row':
  94.                     table.reload('test', {
  95.                         lineStyle: null // 恢复单行
  96.                     });
  97.                     layer.msg('已设为单行');
  98.                     break;
  99.                 case 'LAYTABLE_TIPS':
  100.                     layer.alert('Table for layui-v'+ layui.v);
  101.                     break;
  102.             };
  103.         });
  104.  
  105.         //触发单元格工具事件
  106.         table.on('tool(test)', function(obj){ // 双击 toolDouble
  107.             var data = obj.data;//获取当前的行的数据
  108.             //obj.data ：获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
  109.             console.log(obj.data)
  110.             //console.log(obj)
  111.             if(obj.event === 'detail'){ //查看
  112.  
  113.                 layer.alert('编号:'+ data.eId +"<br/>"+'账户:'+data.eAccount+"<br/>"+'密码：'+data.ePassword+"<br/>"+
  114.                     '姓名:' +data.eName+"<br/>"+'性别:' +data.eSex +"<br/>"+'学历：'+data.eEducation +"<br/>"+'部门：'
  115.                     +data.dName +"<br/>"+'职称：'+data.ePosition +"<br/>"+'身份证号码：'+data.eIdcard +"<br/>"+'手机号码：'
  116.                     +data.ePhone +"<br/>"+'家庭地址：'+data.eAddress +"<br/>"+'入职时间：'+data.eEntrytime);
  117.  
  118.             }else if(obj.event === 'del'){
  119.                 layer.confirm('真的删除员工吗？', function(index){
  120.                     console.log(index)
  121.                     console.log(data.eId)
  122.                     obj.del();
  123.                     // 	location.href="updatebyid?flag=all&eId="+eid;
  124.                     // 	location.href="updatebyid?flag=all&eId="+eid+"&xxx"+xxx;
  125.                     // location.href="updatetongyi?eId="+userId;
  126.                     location.href = "/newsWork?action=delwork&eId="+data.eId;
  127.                     layer.close(index);
  128.                 });
  129.             } else if(obj.event === 'edit'){
  130.                 layer.open({
  131.                     title: '编辑',
  132.                     type: 1,
  133.                     area: ['80%','80%'],
  134.                     content: '<div class="site-text" style="margin: 5px; display: none" id="window"  target="test123">' +
  135.                         '<form  action="/newsWork?action=add" method="post" class="layui-form" id="book"  lay-filter="example" style="margin: 25px;width: 500px"> ' +
  136.                         '<div class="layui-form-item"> ' +
  137.                         '<div class="layui-col-md6">' +
  138.                         '<label class="layui-form-label" >账号</label> ' +
  139.                         '<div class="layui-input-block"> ' +
  140.                         '<input type="text" id="bid" name="eAccount" lay-verify="title" autocomplete="off" placeholder="请输入账号"  class="layui-input"> ' +
  141.                         '</div> </div>' +
  142.                         '<div class="layui-col-md6">' +
  143.                         '<div class="layui-form-item"> ' +
  144.                         '<label class="layui-form-label">姓名</label> ' +
  145.                         '<div class="layui-input-block"> ' +
  146.                         '<input type="text" id="name" name="eName" lay-verify="title" autocomplete="off" placeholder="请输入姓名" class="layui-input"> ' +
  147.                         '</div> </div> </div> </div> ' +
  148.                         '<div class="layui-form-item"> ' +
  149.                         '<div class="layui-col-md6"> ' +
  150.                         '<label class="layui-form-label" >性别</label> ' +
  151.                         '<div class="layui-input-block"> ' +
  152.                         '<select id="select" class="form-control"  name="eSex" style="width:212px;height:38px;" > ' +
  153.                         '<option value="">请选择</option> ' +
  154.                         '<option value="男">男</option> ' +
  155.                         '<option value="女">女</option> ' +
  156.                         '</select> </div> </div> ' +
  157.                         '<div class="layui-col-md6"> ' +
  158.                         '<div class="layui-form-item"> ' +
  159.                         '<label class="layui-form-label">学历</label> ' +
  160.                         '<div class="layui-input-block"> ' +
  161.                         '<select id="select2" name="eEducation" class="form-control" style="width:212px;height:38px;" > ' +
  162.                         '<option value="">请选择</option>  ' +
  163.                         '<option value="硕士">硕士</option> ' +
  164.                         '<option value="本科">本科</option> ' +
  165.                         '<option value="大专">大专</option> ' +
  166.                         '<option value="高中">高中</option> ' +
  167.                         '<option value="小学">小学</option> </select> </div> </div> </div> </div> ' +
  168.                         '<div class="layui-form-item"> <div class="layui-col-md6"> ' +
  169.                         '<label class="layui-form-label" >部门</label> ' +
  170.                         '<div class="layui-input-block"> ' +
  171.                         '<select id="select" class="form-control"  name="dDid" style="width:212px;height:38px;" > ' +
  172.                         '<option value="">请选择</option> ' +
  173.                         '<option value="1">新闻审核部</option> ' +
  174.                         '<option value="2">人力资源部</option> ' +
  175.                         '<option value="后勤管理部">后勤管理部</option> ' +
  176.                         '<option value="技术研发部">技术研发部</option> ' +
  177.                         '<option value="市场营销部">市场营销部</option> ' +
  178.                         '</select> </div></div>' +
  179.                         ' <div class="layui-col-md6"> <div class="layui-form-item"> ' +
  180.                         '<label class="layui-form-label">职位</label> ' +
  181.                         '<div class="layui-input-block"> ' +
  182.                         '<select id="select2" name="ePosition" class="form-control" style="width:212px;height:38px;"  > ' +
  183.                         '<option value="">请选择</option> ' +
  184.                         '<option value="经理">经理</option> ' +
  185.                         '<option value="副经理">副经理</option> ' +
  186.                         '<option value="总监">总监</option> ' +
  187.                         '<option value="副总监">副总监</option> ' +
  188.                         '<option value="普通员工">普通员工</option> </select> </div></div></div> </div> ' +
  189.                         '<div class="layui-form-item"> ' +
  190.                         '<div class="layui-col-md6"> ' +
  191.                         '<label style="float:left;display:block;padding-top: 9px;padding-bottom:9px; padding-right:-25px;width:100px;font-weight:400;line-height:20px;text-align:right">身份证号码</label> ' +
  192.                         '<div class="layui-input-block"> ' +
  193.                         '<input type="text" id="id" name="eIdcard" lay-verify="title" autocomplete="off" placeholder="请输入身份证号码" class="layui-input"> ' +
  194.                         '</div> ' +
  195.                         '</div> ' +
  196.                         '<div class="layui-col-md6">' +
  197.                         ' <div class="layui-form-item"> ' +
  198.                         '<label class="layui-form-label">入职时间</label> ' +
  199.                         '<div class="layui-input-block"> ' +
  200.                         '<input id="test2" type="text"  name="eEntrytime" lay-verify="title" autocomplete="off" placeholder="请选择入职时间" class="layui-input"> ' +
  201.                         '</div> ' +
  202.                         '</div></div> </div> ' +
  203.                         '<div class="layui-form-item"> <div class="layui-col-md6"> ' +
  204.                         '<label class="layui-form-label" >手机号码</label> ' +
  205.                         '<div class="layui-input-block"> ' +
  206.                         '<input type="text" id="ePhone" name="ePhone" lay-verify="title" autocomplete="off" placeholder="请输入手机号码"  class="layui-input"> ' +
  207.                         '</div> </div> ' +
  208.                         '<div class="layui-col-md6"> ' +
  209.                         '<div class="layui-form-item"> ' +
  210.                         '<label class="layui-form-label">家庭地址</label> ' +
  211.                         '<div class="layui-input-block"> ' +
  212.                         '<input type="text" id="eAddress" name="eAddress" lay-verify="title" autocomplete="off" placeholder="请输入家庭地址" class="layui-input"> ' +
  213.                         '</div> </div> </div> </div> ' +
  214.                         '<div class="layui-form-item" style="float: left;margin-left: 250px"> ' +
  215.                         '<div class="layui-input-block"> ' +
  216.                         '<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">确认</button> ' +
  217.                         '</div> ' +
  218.                         '</div> ' +
  219.                         '<button href="/queryStaff" type="button" class="layui-btn layui-btn-primary" style="float: left;margin-left: 10px">返回</button> ' +
  220.                         '</form> </div>'
  221.                 });
  222.             }
  223.         });
  224.  
  225.         //触发表格复选框选择
  226.         table.on('checkbox(test)', function(obj){
  227.             console.log(obj)
  228.         });
  229.  
  230.         //触发表格单选框选择
  231.         table.on('radio(test)', function(obj){
  232.             console.log(obj)
  233.         });
  234.  
  235.         // 行单击事件
  236.         table.on('row(test)', function(obj){
  237.             //console.log(obj);
  238.             //layer.closeAll('tips');
  239.         });
  240.         // 行双击事件
  241.         table.on('rowDouble(test)', function(obj){
  242.             console.log(obj);
  243.         });
  244.  
  245.         // 单元格编辑事件
  246.         table.on('edit(test)', function(obj){
  247.             var field = obj.field //得到字段
  248.                 ,value = obj.value //得到修改后的值
  249.                 ,data = obj.data; //得到所在行所有键值
  250.  
  251.             var update = {};
  252.             update[field] = value;
  253.             obj.update(update);
  254.         });
  255.     });
  256.

三、通过ajax实现局部刷新刷新（）重点解决无法获取输入框的问题

  1.  <div style="float:left;margin-left:600px;margin-bottom: 20px;margin-top: 20px">
  2. <%--<textarea name="comment" id="message" placeholder="请注意评论礼仪！"></textarea>--%>
  3.      <input   id="serch" type="text" name="eName"  required lay-verify="required" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
  4.   </div>
  5.       <button type="submit" id="123" class="layui-btn layui-btn-normal layui-btn-radius" style="float:left;margin-left:15px;margin-top: 20px">搜索</button>
  1. layui.use(['form', 'jquery', 'layer'], function () {
  2.  
  3.  
  4.             var form = layui.form;
  5.             var $ = layui.$;
  6.             var layer = layui.layer;
  7.             let serch = $("#serch").val();
  8.             //通过点击事件获取。不然获取不了input里面的值
  9.             $(function () {
  10.                 $("#123").click(function () {
  11.                     // alert($("textarea[name='comment']").val());
  12.                     // console.log($("textarea[name='comment']").val())
  13.                     alert($("input[name='eName']").val());
  14.                     console.log($("input[name='eName']").val())
  15.                     let action = $("input[name='eName']").val()
  16.                     console.log(action)
  17.                     $.ajax( {
  18.  
  19.                         url    :  "/ceshi?action=mohu&eName="+action,  // 要提交的URL路径
  20.                         type    :  "post",    // 发送请求的方式
  21.                         // 要发送到服务器的数据
  22.                         dataType:  "JSON",     // 指定传输的数据格式
  23.                         beforeSend: function() {     //请求之前的方法
  24.                         },
  25.                         success  :  function(result) {
  26.                             let d = result;
  27.                             console.log(result)
  28.                             console.log(d)
  29.                             console.log(d.data.eId)
  30.                             console.log(result.data.eId)
  31.                             layui.use(['form','jquery','table','layer'],function(){
  32.                                 var form = layui.form;
  33.                                 var $ = layui.jquery;
  34.                                 var table = layui.table;
  35.                                 var layer = layui.layer;
  36.  
  37.                                 table.render({
  38.                                     elem:"#demo",
  39.                                     data:d
  40.                                     ,height: 'full-160'
  41.                                // ,height: 'full-200' // 最大高度减去其他容器已占有的高度差
  42.                                     ,cellMinWidth: 100
  43.                                     ,page: true, //开启分页c
  44.                                     url    :  "/ceshi?action=mohu&eName="+action,//调用接
  45.                                     cols: [[ //表头
  46.                          {
  47.    type: 'checkbox', fixed: 'left',width: 80,align: 'center',totalRowText: "合计"}
  48.    ,{field: "eId", title: '编号', width:80, sort: true, fixed: 'left'}
  49.    ,{field: 'eAccount', title: '账户', width:80}
  50.    ,{field: 'ePassword', title: '密码', width:80, sort: true}
  51.    ,{field: 'eName', title: '姓名', width:80, sort: true}
  52.    ,{field: 'eSex', title: '性别', width:80, sort: true}
  53.     ,{field: 'eEducation', title: '学历', width:80, sort: true}
  54.     ,{field: 'dName', title: '部门', width:120, sort: true}
  55.    ,{field: 'ePosition', title: '职称', width:80, sort: true}
  56.      ,{field: 'eIdcard', title: '身份证号码', width:180, sort: true}
  57.     ,{field: 'ePhone', title: '手机号码', width:120, sort: true}
  58.      ,{field: 'eAddress', title: '家庭地址', width:120, sort: true}
  59.      ,{field: 'eEntrytime', title: '入职时间', width:120, sort: true}
  60.        ,{fixed: 'right', title:'操作', width: 200, minWidth: 125, toolbar: '#barDemo'}
  61.                                 ]],
  62.                                     parseData: function(d) { //res 即为原始返回的数据
  63.                                         return {
  64.                                             "code": 0, //解析接口状态
  65.                                             "msg": "ok", //解析提示文本
  66.                                             "count": 100, //解析数据长度
  67.                                             "data": d //解析数据列表
  68.                                         }
  69.                                     }
  70.                                 });
  71.                             });
  72.                             // 请求成功后要执行的代码
  73.                             console.log("成功")
  74.                         },
  75.                         error       :  function() {           // 请求失败后要执行的代码
  76.                             console.log("失败")
  77.                         }
  78.                     } );
  79.                 })
  80.             })
  81.  
  82.             // let aaa =$("textarea[name='comment']").val()
  83.             // console.log($("textarea[name='comment']").val())
  84.             // console.log("=="+aaa)
  85.             // console.log(serch)
  86.             // console.log(form)
  87.             // console.log(form)
  88.             // console.log(form)
  89.             // console.log($("[name='eName']").val())
  90.             // var a=  document.getElementById("chaxun").innerText
  91.             // var a=  document.getElementById("chaxun").innerHTML
  92.             // alert(a);
  93.             // console.log("xx")
  94.             // console.log(a)
  95.             // console.log("xx")
  96.             // console.log("xx")
  97.  
  98.  
  99.     });

四、Servlet+分页查询

  1. package com.lingnan.servlet;
  2.  
  3. import com.alibaba.fastjson.JSON;
  4. import com.lingnan.dao.impl.NewsWorkersDaoImpl;
  5. import com.lingnan.pojo.DataJson;
  6. import com.lingnan.pojo.NewsWorker;
  7. import com.lingnan.pojo.TableJson;
  8.  
  9. import javax.servlet.ServletException;
  10. import javax.servlet.annotation.WebServlet;
  11. import javax.servlet.http.HttpServlet;
  12. import javax.servlet.http.HttpServletRequest;
  13. import javax.servlet.http.HttpServletResponse;
  14. import java.io.IOException;
  15. import java.io.PrintWriter;
  16. import java.util.ArrayList;
  17. import java.util.HashMap;
  18. import java.util.List;
  19.  
  20. /**
  21.  * @author ：小邓
  22.  * @date ：Created in 2022/7/4 14:58
  23.  * @description：单单
  24.  * @modified By：
  25.  * @version: 1.0
  26.  */
  27. @WebServlet("/ceshi")
  28. public class ceshiServlet extends HttpServlet {
  29.  
  30.     @Override
  31.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  32.         String action = req.getParameter("action");
  33.         System.out.println(action);
  34.         String page = req.getParameter("page");
  35.         String limit = req.getParameter("limit");
  36.         System.out.println("第几页"+page+"几条"+limit);
  37.         if ( action.equals("mohu") ){
  38.             req.setCharacterEncoding("UTF8");
  39.             req.setCharacterEncoding("utf-8");//设置请求的编码格式为gb2312
  40.             resp.setContentType("text/html;charset=utf-8");//解决插入乱码问题顺序要放好
  41.             String eName = req.getParameter("eName");
  42.             System.out.println(eName);
  43.             List<NewsWorker> newsWorkers = new NewsWorkersDaoImpl().queryWorkByName(eName);
  44.             List<NewsWorker> workers = new ArrayList<>();
  45.             for ( int j = 0;j<newsWorkers.size();j++ ){
  46.                 if ( newsWorkers.get(j).getFlag()==0 ){
  47.                     System.out.println(newsWorkers.get(j).getFlag()==0);
  48.                     workers.add(newsWorkers.get(j));
  49.                 }
  50.             }
  51.             TableJson<NewsWorker> objectTableJson = new TableJson<>();
  52.  
  53.             //封装json
  54.             objectTableJson.setCode(0);
  55.             objectTableJson.setMsg("OK");
  56. //            objectTableJson.setData(newsWorkers);
  57.             objectTableJson.setData(workers);
  58.             objectTableJson.setCount(workers.size());
  59.             System.out.println(objectTableJson);
  60.  
  61.             String s = JSON.toJSONString(objectTableJson);//转换为json数据
  62.             PrintWriter writer = resp.getWriter();
  63.             writer.println(s);
  64. //            TableJson<NewsWorker> objectTableJson = new TableJson<>();
  65. //            //封装json
  66. //            objectTableJson.setCode(0);
  67. //            objectTableJson.setMsg("OK");
  68. //            objectTableJson.setData(newsWorkers);
  69. //            objectTableJson.setCount(newsWorkers.size());
  70. //            System.out.println(objectTableJson);
  71. //            String s = JSON.toJSONString(objectTableJson);//转换为json数据
  72. //            PrintWriter writer = resp.getWriter();
  73. //            writer.println(s);
  74.  
  75.  
  76.  
  77.         }else {
  78.             req.setCharacterEncoding("UTF8");
  79.             req.setCharacterEncoding("utf-8");//设置请求的编码格式为gb2312
  80.             resp.setContentType("text/html;charset=utf-8");//解决插入乱码问题顺序要放好
  81.             //解决网页乱码的问题
  82.             List<NewsWorker> newsWorkers = new NewsWorkersDaoImpl().queryWork();
  83.             int size = newsWorkers.size();
  84.             System.out.println("数据:"+size);
  85.  
  86.             List<NewsWorker> workers = new ArrayList<>();//新建一个数组来存放分页查询的数据
  87.             
  88.             int x = Integer.parseInt(page) * Integer.parseInt(limit)-Integer.parseInt(limit);
  89.             System.out.println(x);
  90.             for(int i = x;(i<size) && ((i-x)<Integer.parseInt(limit));i++){
  91.                 //按在也是获取数据把它加入新建的数组里面
  92. //                System.out.println(i);
  93. //                System.out.println(newsWorkers.get(i));
  94.                 if ( newsWorkers.get(i).getFlag()==0 ){
  95.                     System.out.println(newsWorkers.get(i).getFlag()==0);
  96.                 workers.add(newsWorkers.get(i));
  97.                 }
  98.             }
  99.  
  100.             TableJson<NewsWorker> objectTableJson = new TableJson<>();
  101.  
  102.             //封装json
  103.             objectTableJson.setCode(0);
  104.             objectTableJson.setMsg("OK");
  105. //            objectTableJson.setData(newsWorkers);
  106.             objectTableJson.setData(workers);
  107.             objectTableJson.setCount(workers.size());
  108.             System.out.println(objectTableJson);
  109.  
  110.             String s = JSON.toJSONString(objectTableJson);//转换为json数据
  111.             PrintWriter writer = resp.getWriter();
  112.             writer.println(s);//把json数据传输到网页中
  113.  
  114.         }
  115.  
  116.  
  117.     }
  118.  
  119.     @Override
  120.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  121.         this.doGet(req,resp);
  122.     }
  123. }

五、封装json数据，不然 那边无法获取数据

  1. package com.lingnan.pojo;
  2.  
  3. import lombok.Data;
  4.  
  5. import java.util.List;
  6. import java.util.Map;
  7.  
  8. /**
  9.  * @author ：小邓
  10.  * @date ：Created in 2022/7/2 12:38
  11.  * @description：11
  12.  * @modified By：
  13.  * @version: 1.0
  14.  */
  15. @Data
  16. public class TableJson<T> {
  17.     private Integer code ;
  18.     private String msg ;
  19.     private List<T> data;
  20.     private int count;
  21.  
  22. }

六、底层数据逻辑以及实体类

  1. package com.lingnan.dao.impl;
  2.  
  3. import com.lingnan.dao.NewsWorkersDao;
  4. import com.lingnan.pojo.NewsWorker;
  5. import com.lingnan.util.DataBase;
  6.  
  7. import javax.servlet.http.HttpServlet;
  8. import java.sql.ResultSet;
  9. import java.sql.SQLException;
  10. import java.util.ArrayList;
  11. import java.util.List;
  12.  
  13. /**
  14.  * @author ：小邓
  15.  * @date ：Created in 2022/7/3 14:07
  16.  * @description：shitilei
  17.  * @modified By：
  18.  * @version: 1.0
  19.  */
  20. public class NewsWorkersDaoImpl implements NewsWorkersDao {
  21.     @Override
  22.     public List<NewsWorker> queryWork() {
  23.        List<NewsWorker> list = new ArrayList<NewsWorker>();
  24.         String sql = "select e_id, e_account, e_password, e_name, e_sex, e_education,d_name, e_position, e_idcard, " +
  25.                 " e_phone, e_address, e_entrytion, e_role,flag" +
  26.                 " from news_worker inner join news_department on news_worker.d_id = news_department.d_id";
  27. //        String sql="select  * from news_worker";
  28.         ResultSet rs= DataBase.myQuery(sql, null);
  29.  
  30.         try {
  31.             while (rs.next()){
  32.                 //必须得放在里面，不然只是存储最后一条
  33.                 NewsWorker allwork = new NewsWorker();
  34.  
  35.                 allwork.setEId(rs.getInt("e_id"));
  36. //                System.out.println(rs.getInt("e_id"));
  37.                 allwork.setEAccount(rs.getString("e_account"));
  38.                 allwork.setEPassword(rs.getString("e_password"));
  39.                 allwork.setEName(rs.getString("e_name"));
  40.                 allwork.setESex(rs.getString("e_sex"));
  41.                 allwork.setEEducation(rs.getString("e_education"));
  42.                 allwork.setDName(rs.getString("d_name"));
  43.                 allwork.setEPosition(rs.getString("e_position"));
  44.                 allwork.setEIdcard(rs.getString("e_idcard"));
  45.                 allwork.setEPhone(rs.getString("e_phone"));
  46.                 allwork.setEAddress(rs.getString("e_address"));
  47.                 allwork.setEEntrytime(rs.getString("e_entrytion"));
  48.                 allwork.setERole(rs.getInt("e_role"));
  49.                 allwork.setFlag(rs.getInt("flag"));
  50.                 list.add(allwork);
  51. //                System.out.println(allwork);
  52.  
  53.             }
  54.         }
  55.         catch (SQLException e) {
  56.             e.printStackTrace();
  57.         }
  58.  
  59.         return list;
  60.     }
  61.  
  62.     @Override
  63.     public int insertWork(NewsWorker newsWorker) {
  64.         String sql = "insert into news_worker\" +
  65.                 "    (e_id,e_account, e_password, e_name, e_sex,\" +
  66.                 "     e_education, d_id, e_position, e_idcard,\" +
  67.                 "     e_phone, e_address, e_entrytion) values (?,?,?,?,?,?,?,?,?,?,?,?)";
  68.         Object [] parms ={ newsWorker.getEId(),newsWorker.getEAccount(),newsWorker.getEPassword(),newsWorker.getEName(),
  69.                             newsWorker.getESex(),newsWorker.getEEducation(),newsWorker.getDDid(),
  70.                             newsWorker.getEPosition(),newsWorker.getEIdcard(),newsWorker.getEPhone(),
  71.                             newsWorker.getEAddress(),newsWorker.getEEntrytime()};
  72.         return DataBase.executeUpdateAll(sql,parms);
  73.  
  74.  
  75.     }
  76.  
  77.     @Override
  78.     public int deleteWork(String eId) {
  79.         String sql = "delete  from news_worker where e_id=?";
  80.         Object [] parms = {eId};
  81.         return DataBase.executeUpdateAll(sql,parms);
  82.     }
  83.  
  84.     @Override
  85.     public int deleteHuishouWork(int flag,String eId) {
  86.         String sql = "update news_worker set flag = ? where e_id = ?";
  87.         Object [] parms = {flag,eId};
  88.         return DataBase.executeUpdateAll(sql,parms);
  89.     }
  90.  
  91.     @Override
  92.     public List<NewsWorker> queryWorkByName(String eName) {
  93.         List<NewsWorker> list = new ArrayList<NewsWorker>();
  94.         String sql = "select e_id, e_account, e_password, e_name, e_sex, e_education,d_name, e_position, e_idcard,e_phone, e_address, e_entrytion, e_role,flag from news_worker inner join news_department on news_worker.d_id = news_department.d_id where e_name like '%" + eName+ "%'";
  95. //        String sql = "select e_id, e_account, e_password, e_name, e_sex, e_education,d_name, e_position, e_idcard,e_phone, e_address, e_entrytion, e_role,flag from news_worker inner join news_department on news_worker.d_id = news_department.d_id where e_name like %?%";
  96.         System.out.println(sql);
  97.         //        String sql = "select * from staff where sname like '%" + sname+ "%'";
  98. //        Object[] parms = {eName};
  99.         ResultSet rs= DataBase.myQuery(sql, null);
  100. //        ResultSet rs= DataBase.myQuery(sql, eName);
  101.  
  102.         try {
  103.             while (rs.next()){
  104.                 //必须得放在里面，不然只是存储最后一条
  105.                 NewsWorker allwork = new NewsWorker();
  106.                 allwork.setEId(rs.getInt("e_id"));
  107. //                System.out.println(rs.getInt("e_id"));
  108.                 allwork.setEAccount(rs.getString("e_account"));
  109.                 allwork.setEPassword(rs.getString("e_password"));
  110.                 allwork.setEName(rs.getString("e_name"));
  111.                 allwork.setESex(rs.getString("e_sex"));
  112.                 allwork.setEEducation(rs.getString("e_education"));
  113.                 allwork.setDName(rs.getString("d_name"));
  114.                 allwork.setEPosition(rs.getString("e_position"));
  115.                 allwork.setEIdcard(rs.getString("e_idcard"));
  116.                 allwork.setEPhone(rs.getString("e_phone"));
  117.                 allwork.setEAddress(rs.getString("e_address"));
  118.                 allwork.setEEntrytime(rs.getString("e_entrytion"));
  119.                 allwork.setERole(rs.getInt("e_role"));
  120.                 allwork.setFlag(rs.getInt("flag"));
  121.                 list.add(allwork);
  122. //                System.out.println(allwork);
  123.  
  124.             }
  125.         }
  126.         catch (SQLException e) {
  127.             e.printStackTrace();
  128.         }
  129.  
  130.         return list;
  131.     }
  132. }
  1. package com.lingnan.pojo;
  2.  
  3. import lombok.Data;
  4.  
  5. /**
  6.  * @author ：小邓
  7.  * @date ：Created in 2022/7/3 12:47
  8.  * @description：员工表实体类
  9.  * @modified By：
  10.  * @version: 1.0
  11.  */
  12. @Data
  13. public class NewsWorker {
  14.     private int eId;//员工编号
  15.     //使用小辣椒会把首字母变成大写
  16.     private String eAccount;//员工账号
  17.     private String ePassword;//员工密码
  18.     private String eName;//员工姓名
  19.     private String eSex;//性别
  20.     private String eEducation;//学历
  21.     private int dDid;//部门id
  22.     private String dName;//部门名称
  23.     private String ePosition;//职称
  24.     private String eIdcard;//身份证号码
  25.     private String ePhone;//手机号码
  26.     private String eAddress;//家庭地址
  27.     private String eEntrytime;//入职时间
  28.     private int eRole;//权限
  29.     private int flag;//删除字段判断
  30.  
  31. }

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发