layui中的table使用心得，json格式处理，json转字符串，json转对象，json转对象数组，layui表格图片显示修改。_为什么使用layui最后是jaon

作者：菜鸟追梦旅行 | 2024-02-28 06:16:20

踩

为什么使用layui最后是jaon

文章目录

案例一、layui中table，后台数据是json格式的处理
案例二、前端对json格式的处理

案例一、layui中table，后台数据是json格式的处理

1. 前端显示样式

在这里插入图片描述

2. 前端代码

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

<script type="text/html" id="toolsBar">
  <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>
var mdfObjtemp = null;		//用于暂存修改对象的，以供子页面使用
var typesTemp = '';			//用于暂存类型信息，以供子页面获取
$.get("../../type/getTidName",function(data){
	typesTemp = data;		//将类型数据赋给子页面
},"json");
//数据渲染部分代码
layui.use('table', function() {
	var table = layui.table;

	table.render({
		elem : '#table',
		url : '../../goods/findAllByPage',
		method : 'post',
		page : { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
			layout : [ 'limit', 'count', 'prev', 'page', 'next', 'skip' ] //自定义分页布局
			,curr : 1 //设定初始在第 5 页
			,page : true
			,groups : 5 //只显示 1 个连续页码
			,first : true //不显示首页
			,last : true
		//不显示尾页
		},
		cols : [ [ 
			{ field : 'gno', width : '6%', title : '编号', sort : true }
			, { field : 'gname', width : '10%', title : '商品名称', sort : true }
			, { field : 'tno', width : '8%', title : '类型', sort : true }
			, { field : 'price', width : '6%', title : '单价', sort : true }
			, { field : 'weight', width : '6%', title : '净重' }
			, { field : 'balance', width : '6%', title : '库存', sort : true }
			, { field : 'unit', width : '6%', title : '单位'}
			, { field : 'qperied', width : '8%', title : '保质期' }
			, { field : 'pics', width : '8%', title : '图片', templet : function(res){
				var pics = res.pics.split("|");	//截去分隔符将其转为数组
				var picInfo = '<div id="pics_'+ res.gno +'" style="height:100%;weidth:100%">';
				for(var i=0; i<pics.length; i++){
					picInfo += '<img  src="../../'+pics[i]+'" />'
				}
				picInfo += "</div>";
				return picInfo;
			} }
			, { field : 'intro', width : '12%', title : '简介' }
			, { field : 'descr', width : '14%', title : '描述' }
			, { fixed : 'right', width : '8%', title : '操作', width : 120, toolbar : '#toolsBar' }
		] ],
		id : 'menberTable'
	});

	//监听行工具事件
	table.on('tool(test)', function(obj) {
		var data = obj.data;

		if (obj.event === 'del') {
			layer.confirm('确认删除？', function(index) {
				layer.close(index);
				$.post("../../goods/delByGno", {
					gno : obj.data.gno
				}, function(data) {
					data = parseInt($.trim(data));
					if (data > 0) {
						obj.del();
						layer.msg("删除成功！", {
							icon : 1
						});
					} else {
						layer.msg("删除失败！请稍后...", {
							icon : 5
						});
					}
				});
			});
		}else if(obj.event == 'edit'){
			mdfObjtemp = obj;	//把obj对象赋给mdfObjtemp暂存
			
			layer.open({
				type: 2,
				title: '修改商品信息',
				shadeClose: true,
				shade: false,
				maxmin: true, //开启最大化最小化按钮
				area: ['94%', '94%'],
				content: 'goodsModify.html'
			});
			
		}
	});
});

//表格修改某行数据修改
function changeData(obj){
	mdfObjtemp.update({	//更新该行数据
		 gname : obj.gname
		,tno : obj.tno
		,price : obj.price
		,weight : obj.weight
		,balance : obj.balance
		,unit : obj.unit
		,qperied : obj.qperied
		,intro : obj.intro
		,descr : obj.descr
	})
	console.log(obj.pics);
	//pics_
	//图片进行另外的判断后更新
	if(obj.pics.length>0){	//因为数据是string格式xxx.jpg|xx.png
		var pics = obj.pics.split("|");	//截去分隔符将其转为数组
		var picInfo = '';
		for(var i=0; i<pics.length; i++){
			picInfo += '<img  src="../../'+ $.trim(pics[i]) +'" />'
		}
		$("#pics_"+obj.gno).html(picInfo);
	}
}
</script>
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
118
119
120
121
122
123

3. 后端代码：layui前端表格需要返回的数据格式要求示例

需要将数据都转为json字符串格式返回

@RequestMapping("findAllByPage")
public String findAllByPage(Integer page,@RequestParam("limit")Integer pageSize) throws JsonProcessingException{
	int count = goodsBiz.count(null);
	List<GoodsInfo> list = goodsBiz.findAllByPage(page,pageSize);
	String data = ParamsUtil.objectToJsonStr(list);
	return "{\"code\":0 , \"count\":"+count+" , \"data\":"+data+"}";
}
1
2
3
4
5
6
7

4. json格式处理工具类：json数据转对象，json格式转字符串

/**
 * 参数处理工具类
 * 1. json格式处理
 * @author Huathy
 * @date 2020年4月5日
 */
public class ParamsUtil {
	public static final ObjectMapper OBJECT_MAPPER = new ObjectMapper();
	/**
	 * json数据转为对象
	 * @param jsonData	json格式的数据
	 * @param bean		bean对象
	 * @return
	 * @throws IOException 
	 * @throws JsonMappingException 
	 * @throws JsonParseException 
	 */
	public static <T> T jsonToPojo(String jsonData,Class<T> bean) throws JsonParseException, JsonMappingException, IOException{
		T t = OBJECT_MAPPER.readValue(jsonData, bean);
		return t;
	}
	
	/**
	 * 将json数据转为对象集合
	 * @param jsonData		json格式的字符串
	 * @param beanType		bean对象
	 * @return
	 * @throws IOException 
	 * @throws JsonMappingException 
	 * @throws JsonParseException 
	 */
	public static <T> List<T> jsonToList(String jsonData, Class<T> beanType) throws JsonParseException, JsonMappingException, IOException {
		JavaType javaType = OBJECT_MAPPER.getTypeFactory().constructParametricType(List.class, beanType);
		List<T> list = OBJECT_MAPPER.readValue(jsonData, javaType);
		return list;
	}
	
	/**
	 * json对象转字符串
	 * @param data
	 * @return
	 * @throws JsonProcessingException 
	 */
	public static String objectToJsonStr(Object data) throws JsonProcessingException {
		String string = OBJECT_MAPPER.writeValueAsString(data);
		return string;
	}
}
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

案例二、前端对json格式的处理

1. 前端显示样式

在这里插入图片描述

2. 前端代码

<body>
	<h3 class="common_title2">
		地址列表
		<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="showModifyView()" style="float:right">添加新地址</button>
	</h3>
	<div style="margin-top:20px;">
		<table class="layui-hide" id="addrTable" lay-filter="addrTable">
		</table>
	</div>
</body>

<script>
$.post("addr/getAddrByMno",{mno : user.mno},function(data){
	var res = fullToString(data);	//调用完全转为string的方法
	addrs = data;
	renderAddrTable(res);
});

//显示数据表格方法
function renderAddrTable(res){
	layui.use('table', function(){
		var table = layui.table;
		table.render({
			elem: '#addrTable'
			,cols: [[
				{field:'ano', width:'8%', title: '序号' ,templet:function(res){
					return res.LAY_INDEX;
				}}
				,{field:'name', width:'12%', title: '收件人姓名'}
				,{field:'tel', width:'13%', title: '联系电话'}
				,{field:'province', width:'8%', title: '省份' }
				,{field:'city', width:'10%', title: '城市' }
				,{field:'area', width:'10%', title: '地区' }
				,{field:'addr', width:'18%', title: '寄送地址' }
				,{field:'flag', width:'10%', title: '是否默认' , templet:function(res){
					if( parseInt(res.flag)==1){
						return '<a class="layui-btn layui-btn-warm layui-btn-xs">默认地址</a>';
					}else{
						return '<a class="layui-btn layui-btn-primary layui-btn-xs" οnclick="changeDefaultAddr('+res.ano+')">设为默认</a>';
					}
				}}
				,{field:'right', width:'12%', title: '操作' ,  toolbar: '#barDemo' }
			]]
			,data : res
		});
	});
}
</script>
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

3. 后端数据格式示例：

{"0":{"ano":1,"name":"HUATHY","tel":"1567410000","province":"浙江省","city":"温州市","area":"乐清市","addr":"1号","flag":1}}
1

若返回的json格式数据中包括boolean值，数值。由于layui表格要求，其所有数据都为字符串格式！故需要对后端返回的json格式进行转换。

4. 前端数据完全转为字符串格式

//将json对象完全转为字符串格式，包括数值，null值
function fullToString(objs){
	for(var i in objs){
		var obj = objs[i]
		for(var key in obj){
			obj[key] = String(obj[key]);
		}
	}
	return objs;
}
1
2
3
4
5
6
7
8
9
10

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