关于使用layui中table使用json访问格式不正确的问题，已解决

最新推荐文章于 2024-05-15 11:50:30 发布

GBAS

最新推荐文章于 2024-05-15 11:50:30 发布

阅读量6.1k

点赞数 2

分类专栏： layui 文章标签： layui table json

本文链接：https://blog.csdn.net/qq_39966148/article/details/84334976

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

layui中table数据表格的json读取问题
因为我们公司的json跟官网的格式不一样
找了半天，在网上有幸认识一大神解答
下面我直接上代码吧

<!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" type="text/css" href="../css/layui.css"/>
	</head>

	<body>

		<div class="demoTable">
			搜索ID：
			<div class="layui-inline">
				<input class="layui-input" name="id" id="demoReload" autocomplete="off">
			</div>
			<button class="layui-btn" data-type="reload">搜索</button>
		</div>

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

		<script type="text/javascript" src="../js/layui.js">		</script>
		<script>
			layui.use('table', function() {
				var table = layui.table;

				//方法级渲染
				table.render({
                    elem: '#LAY_table_user',
                    url: 'http://192.168.0.107:9002/authors/Audit/1',
                    parseData: function(res){ //res 即为原始返回的数据
                    	res.data.code=0
                        return {
                          "code": res.data.code, //解析接口状态
                          "msg": res.data.msg, //解析提示文本
                          "count": res.data.total, //解析数据长度
                          "data": res.data.authors //解析数据列表
                        };
                      },
                    cols: [
                        [{
                            checkbox: true,
                            fixed: true
                        }, {
                            field: 'user_id',
                            title: 'ID',
                            width: 80,
                            sort: true,
                            fixed: true
                        }, {
                            field: 'auth_name',
                            title: '名字',
                            width: 80,
                            sort: true
                        }, {
                            field: 'auth_phone_number',
                            title: 'auth_phone_number'}
                        ,{
                            field: 'shop_summary',
                            title: 'shop_summary'}
                        ,{
                            field: 'right',
                            title: '操作',
                            width: 177,
                            toolbar: "#barDemo"
                        }]
                    ],
                    id: 'testReload',
                    height: 600
                });


				var $ = layui.$,
					active = {
						reload: function() {
							var demoReload = $('#demoReload');

							//执行重载
							table.reload('testReload', {
								page: {
									curr: 1 //重新从第 1 页开始
								},
								where: {
									key: {
										id: demoReload.val()
									}
								}
							});
						}
					};

				$('.demoTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
			});
		</script>

	</body>

</html>

主要是在table.tender中加了
parseData: function(res){ //res 即为原始返回的数据
                    	res.data.code=0
                        return {
                          "code": res.data.code, //解析接口状态
                          "msg": res.data.msg, //解析提示文本
                          "count": res.data.total, //解析数据长度
                          "data": res.data.authors //解析数据列表
                        };
                      },
	这个很重要：：：：：：：：res.data.code=0
	感恩！！！！！！

GBAS

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
关于使用layui中table使用json访问格式不正确的问题，已解决

layui中table数据表格的json读取问题因为我们公司的json跟官网的格式不一样找了半天，在网上有幸认识一大神解答下面我直接上代码吧&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;layui&lt;/title&gt; &l
复制链接

扫一扫