layui之动态数据表格

最新推荐文章于 2025-05-09 12:05:35 发布

转载最新推荐文章于 2025-05-09 12:05:35 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/nvfuy/article/details/81109814?

文章标签：

#layui

本文档展示了如何处理一个返回的非标准JSON格式数据以适应layui数据动态表格的需求。代码中通过ajax获取数据，然后利用layui的table模块进行数据展示。在表格中实现了查询、编辑和删除功能，同时对数据进行了处理以适应layui的表格渲染。遇到的问题是返回的JSON格式不匹配layui默认格式，需要在前端进行数据转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui数据动态表格，如果返回的json格式是默认格式就好了，从api上直接copy下来用就可以，可是我这里返回的json格式如下：


{
    "code": 200,
    "content": {
        "currentPage": 1,
        "hasNext": true,
        "hasPrev": false,
        "pageSize": 3,
        "records": [
            {
                "accountno": "009",
                "id": "030AC067-8953-48A9-9A11-66E1D60500F5",
                "idcard": "321654",
                "name": "cbb",
                "password": "123456",
                "roleid": null,
                "status": true
            },
            {
                "accountno": "011",
                "id": "031AC067-8953-48A9-9A11-66E1D60500F5",
                "idcard": "362201199311295412",
                "name": "gyw",
                "password": "123456321",
                "roleid": null,
                "status": true
            },
            {
                "accountno": "005",
                "id": "032AC067-8953-48A9-9A11-66E1D60500F5",
                "idcard": "362201199311295412",
                "name": "大阳",
                "password": "123456",
                "roleid": null,
                "status": true
            }
        ],
        "totalPages": 5,
        "totalRecords": 13
    },
    "message": null,
    "success": true
}

代码直接套弄不进去，所以的先处理一下；基本步骤是ajax,后再进行数据处理，本来想自定义格式的，但是没有成功，如果有兴趣的话可以自行研究。

下面上代码了：


<!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">
  <script src="/jquery/jquery-3.2.1.js" ></script>
  <script src="/layui/layui.js" charset="utf-8"></script>
</head>
<body>
     <h1>layui表格</h1>
     <div>
             <!-- 查询栏 -->
        <form class="search-form layui-form">
 
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">员工名称</label>
                <input class="layui-input" name="name" type="text" style="width: 165px;">
            </div>
            <div class="layui-form-item layui-inline search">
                <button class="layui-btn layui-btn-normal" lay-filter="searchBtn" lay-submit>查询</button>
            </div>
        </form>
        <div>
            <table class="layui-hide" id="test" lay-filter="test3" ></table>
        </div>
     </div>
     
     <div id="E_add_edit" style="display:none">
         <form class="layui-form" style="padding:20px">
             <!-- 用户名 -->
             <div class="layui-form-item emp-name">
                 <label class="layui-form-label" >用户名</label>
                 <div class="layui-input-inline">
                     <input class="layui-input" type="text" placeholder="请输入用户名">
                 </div>
             </div>
             <!-- 确定 -->
            <div style="text-align: center; border: none">
                <button class="layui-btn layui-btn-normal" lay-filter="saveBtn" lay-submit>确定</button>
            </div>
         </form>
     </div>
     
    <script type="text/html" id="barDemo">
         <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
         <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>
    
    layui.use(['table','layer','laypage','form'],function(){
        
 
            var table=layui.table;
            var layer = layui.layer;
            var form = layui.form;         
            var laypage = layui.laypage;
            var data;  //保存数据  
            var postData={
                    name:"NULL",
                    pageNumber:1,
                    pageSize:10
                
                };
 
            //发送ajax  列表查询ajax
            function send(postData){                               
                    $.ajax({               
                        type: "POST",//请求的方式
                        url: "/main/version1/empList/"+new Date().getTime(),//请求的接口
                        data: postData,//参数（可传可不传递）
                        dataType: "json",//数据类型
                        async:false,
                        success: function (res) {                    
                            data=res.content.records;
                            resultData=res.content.records;
                            //console.log("data1  "+data[0].id);
                        },
                        error:function(err){
                        //失败之后执行（我不管，失败别找我i）
                            obj=err;
                            alert("数据不存在") 
                            
                            
                        }                
                    })               
            }
                       
            var infoTable;
            var
            // 表单需要的变量
            infoOptions = {
                elem: '#test',
               // width: 347,
                limits: [10],
                cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                cols: [[ 
                    //{field: 'id', title: 'ID',width:20, fixed: 'left'}
                    {field: 'id', title: 'ID', type:'checkbox', width:120, sort: true, fixed: 'left'}
                    ,{field: 'accountno', title: '编号', width:120}
                    ,{field: 'name', title: '用户名', width:120,edit:'text'}
                    ,{field: 'idcard', title: '身份证', width:220}
                    ,{field: 'password', title: '密码', width:120,edit:'text'}
                    ,{field: 'status', title: '状态', width:120}
                    ,{fixed: 'right',title: '操作', width:178, align:'center', toolbar: '#barDemo'}
                ]],
                data: []
            };                       
            //  页面初始化
            
             // 查询         ----------------------------------------
           //监听提交  
          form.on('submit(searchBtn)', function(data){
            //layer.msg(JSON.stringify(data.field));
            var str=JSON.stringify(data.field);
            var data;
            layer.msg(str);    
             // 转换 {"name":"gsfs"}
            var json = eval('('+str+')'); 
 
            postData.name=json.name;//直接取值 结果0
            console.log("name: "+name);
            init();    
            return false;
          });
            
        // 表格初始化 ------------------
        function init (){                                                      
                    // 列表请求
                    send(postData);
                    // 完成表格数据
                    $.extend(infoOptions, {data: data});
                    infoOptions.page = {
                        curr: 1
                    }
                    console.log("data1  "+data[0].id);
                    table.render(infoOptions);
                    
                    data=null;               
            }
        // 页面初始化---------------------------------
        init();
        
        var postData_add_edit={
            id:"NULL",
            name:"NULL",
            accountno:"NULL",
            password:"NULL",
            status:"NULL",
            idcard:"NULL"
        };
        var message;
        //发送ajax  新增修改ajax
        function sendAE(postData_add_edit){                               
                $.ajax({               
                    type: "POST",//请求的方式
                    url: "/main/version1/updateemp/"+new Date().getTime(),//请求的接口
                    data: postData_add_edit,//参数（可传可不传递）
                    dataType: "json",//数据类型
                    async:false,
                    success: function (res) { 
                        console.log("msg "+message);
                        if(res.code==200){
                            console.log("ajax msg"+res.message);
                            message=res.message;
                        }
                    },
                    error:function(err){
                        alert("系统出错了") 
                    }                
                })               
        }
        // 新增修改初始化 ------------------
        function init_AE (){           
                   sendAE(postData_add_edit);              
                    // 列表请求
                    send(postData);
                    // 完成表格数据
                    $.extend(infoOptions, {data: data});
                    infoOptions.page = {
                        curr: 1
                    }
                    console.log("data1  "+data[0].id);
                    table.render(infoOptions);
                    
                    data=null;               
            }
        // 监听 单元格，能进行编辑单元格  只有表头加了 edit 属性才能修改  
        table.on('edit(test3)',function(obj){
            var value=obj.value; //得到修改后的值
            var data=obj.data;  //得到所在行的所有键值
            var field=obj.field;  //得到字段 pwd name           
            postData_add_edit.id=data.id;
            
            if(field==='name'){
                postData_add_edit.name=value;
                console.log("name "+postData_add_edit.name);
            }
            if(field==='password'){
                postData_add_edit.password=value;
                console.log("password "+postData_add_edit.password);
            }
            //layer.msg('[ID: '+data.id+']'+field+' 字段给改为 '+value);
            init_AE ();
        });
        
        //  操作  查看 编辑 删除-----------------------------------
        
        // 监听表格复选框 选择
        table.on('tool(test3)',function(obj){
            console.log(obj);
        });
        //监听工具条
        table.on('tool(test3)', function(obj){
          var data = obj.data;
          if(obj.event === 'detail'){
            layer.msg('ID：'+ data.id + ' 的查看操作');
          } else if(obj.event === 'del'){
            layer.confirm('真的删除行么'+data.id, function(index){
              obj.del();
              layer.close(index);
            });
          } else if(obj.event === 'edit'){
            layer.alert('编辑行：<br>'+ JSON.stringify(data))
          }
        });
        
        
    //end        
    });    
</script>
</body>
</html>