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

作者：从前慢现在也慢 | 2024-02-28 06:25:06

踩

layui table render context json

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
	感恩！！！！！！
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/158019