社区项目发现的问题五 html的事件传参带对象

1、应用场景

这种 html事件传参带对象 ，一般都是请求后台数据的时候，需要在页面中添加 重复元素，并为每一个绑定一个事件，每一个事件又需要用到返回的 JSON值 作为参数。

这是菜鸟在这次的项目中遇到的情况：

菜鸟解决是解决了，而且处理得比较好，但是就是感觉想知道如何 html事件传参带对象 ，菜鸟解决的方式就是只传一个 数字 参数imei（ 因为不管传对象或者是字符串，html都无法直接解析，即使使用了模板字符串 ` ），而且菜鸟接下来请求后台，也只和这个数字有关。代码如下：

{
	"data": "sos_flag",
	"sClass": "text-c",
	"render": function (data, type, row) {  //对数据进行处理，并返回（type\row都可以打印看看）
		return data == 0 ? `<td class="td - status"><span class="label radius">暂无紧急情况</span><br/><span class="b2" οnclick="cancel3(event,${row.imei})">SOS历史记录</span></td>` : `<td class="td - status"><span class="label label - success radius b1" οnclick="cancel2(event,${row.imei},this)">SOS</span><br/><span class="b2" οnclick="cancel3(event,${row.imei})">SOS历史记录</span></td>`;
	},
},

2、错误解决办法

菜鸟的想法是，居然参数不能传进去，那么我就先用缓存保存起来，直接当成值在 cancel3函数 里面用不就行了？

但是事情并没有想象中简单，因为这个是 重复添加元素 ，那么每一次添加缓存都会被覆盖，所以最后缓存的就是最后一次添加的数据的缓存。代码如下：

{
	"data": "sos_flag",
	"sClass": "text-c",
	"render": function (data, type, row) {  //对数据进行处理，并返回（type\row都可以打印看看）
		localStorage.setItem("row", row);
		return data == 0 ? `<td class="td - status"><span class="label radius">暂无紧急情况</span><br/><span class="b2" οnclick="cancel3(event)">SOS历史记录</span></td>` : `<td class="td - status"><span class="label label - success radius b1" οnclick="cancel2(event,${row.imei},this)">SOS</span><br/><span class="b2" οnclick="cancel3(event)">SOS历史记录</span></td>`;)
	},
},

或者使用多个缓存去把每一次的都保存起来，但是那样又要判断你点击的是哪一个，不得不说就把一个问题搞得非常的复杂了。

3.1、模板字符串 传递 复杂对象

接下来就看看，如果直接使用 模板字符串 传递的到底是个什么东西？

{
	"data": "sos_flag",
	"sClass": "text-c",
	"render": function (data, type, row) {  //对数据进行处理，并返回（type\row都可以打印看看）
		console.log(row);
		console.log(`fafjalfjkljafl${row}daffafaf`);
		return data == 0 ? `<td class="td - status"><span class="label radius">暂无紧急情况</span><br/><span class="b2" οnclick="cancel3(event,${row})">SOS历史记录</span></td>` : `<td class="td - status"><span class="label label - success radius b1" οnclick="cancel2(event,${row.imei},this)">SOS</span><br/><span class="b2" οnclick="cancel3(event,${row})">SOS历史记录</span></td>`;
	},
},

运行结果：
html：

控制台：

由此可以发现 模板字符串 面对多个键值对的对象是不管用的，会返回一个莫名其妙的 [Object Object]。

补充知识点：

注意：

这里可以看出不能在 3.4 中使用 tostring，而是使用 JSON.stringify

3.2 模板字符串 传递 简单对象

那么试试简单一点的对象呢 ( 只有一个键值对 ) ？

{
	"data": "sos_flag",
	"sClass": "text-c",
	"render": function (data, type, row) {  //对数据进行处理，并返回（type\row都可以打印看看）
		console.log(row.name);
		console.log(`fafjalfjkljafl${row.name}daffafaf`);
		return data == 0 ? `<td class="td - status"><span class="label radius">暂无紧急情况</span><br/><span class="b2" οnclick="cancel3(event,${row.name})">SOS历史记录</span></td>` : `<td class="td - status"><span class="label label - success radius b1" οnclick="cancel2(event,${row.imei},this)">SOS</span><br/><span class="b2" οnclick="cancel3(event,${row.name})">SOS历史记录</span></td>`;
	},
},

运行结果：
html：

控制台：

发现虽然可以解析，但是运行，就会发现报错：

3.3 解决传递简单对象

上面说明，你虽然知道传进的是字符串作为参数，但是浏览器不知道，所以就把这个当成变量了，解决办法如下(就是在字符串外面加上一个单引号 --> 这个取决于你的 onclick 用的什么引号)：

{
	"data": "sos_flag",
	"sClass": "text-c",
	"render": function (data, type, row) {  //对数据进行处理，并返回（type\row都可以打印看看）
		console.log(row.name);
		console.log(`fafjalfjkljafl${row.name}daffafaf`);
		return data == 0 ? `<td class="td - status"><span class="label radius">暂无紧急情况</span><br/><span class="b2" οnclick="cancel3(event,'${row.name}')">SOS历史记录</span></td>` : `<td class="td - status"><span class="label label - success radius b1" οnclick="cancel2(event,${row.imei},this)">SOS</span><br/><span class="b2" οnclick="cancel3(event,'${row.name}')">SOS历史记录</span></td>`;
	},
},

3.4 解决传递复杂对象

那么回归最难的，复杂的对象怎么传值呢？

有了解决传递简单的字符串的提醒，我们可以尝试这种方式，先把对象转换成字符串，然后由3.1的补充知识可知，不能使用tostring，那就只能使用JSON.stringify，所以代码可以变成：

{
	"data": "sos_flag",
	"sClass": "text-c",
	"render": function (data, type, row) {  //对数据进行处理，并返回（type\row都可以打印看看）
		console.log(row);
		console.log(`fafjalfjkljafl${JSON.stringify(row)}daffafaf`);
		return data == 0 ? `<td class="td - status"><span class="label radius">暂无紧急情况</span><br/><span class="b2" οnclick="cancel3(event,'${JSON.stringify(row)}')">SOS历史记录</span></td>` : `<td class="td - status"><span class="label label - success radius b1" οnclick="cancel2(event,${row.imei},this)">SOS</span><br/><span class="b2" οnclick="cancel3(event,'${JSON.stringify(row)}')">SOS历史记录</span></td>`;
	},
},

运行结果：
html：

控制台：

但是这样依旧不行，因为html中的onclick的引号是双引号，和json冲突了，所以会报错一个莫名其妙的错误：

大致就是少了符号，一般是逗号、引号

那么就试试把onclick的引号换成单引号，试试：

{
	"data": "sos_flag",
	"sClass": "text-c",
	"render": function (data, type, row) {  //对数据进行处理，并返回（type\row都可以打印看看）
		console.log(row);
		console.log(`fafjalfjkljafl${JSON.stringify(row)}daffafaf`);
		return data == 0 ? `<td class="td - status"><span class="label radius">暂无紧急情况</span><br/><span class="b2" οnclick='cancel3(event,${JSON.stringify(row)})'>SOS历史记录</span></td>` : `<td class="td - status"><span class="label label - success radius b1" οnclick="cancel2(event,${row.imei},this)">SOS</span><br/><span class="b2" οnclick='cancel3(event,${JSON.stringify(row)})'>SOS历史记录</span></td>`;
	},
},

然后直接成功！

注意：

这里onclick什么引号主要看你的json是什么引号；后面的对象可以不需要用引号括起来。