JavaScript——字符串拼接—事件传对象参数

最新推荐文章于 2024-02-21 10:22:48 发布

帝博格T－bag

最新推荐文章于 2024-02-21 10:22:48 发布

阅读量1.5k

点赞数 1

文章标签： javascript 前端 json

本文链接：https://blog.csdn.net/m0_37616866/article/details/122224067

版权

本文介绍了如何在BootstrapTable中使用JavaScript实现表格的编辑功能，通过将行数据对象作为参数传递，并解析JSON字符串到Object。重点讨论了数据类型转换及方法调用中的字符串处理技巧。

摘要由CSDN通过智能技术生成

一、案例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="javascript:void(0);"  onclick='open1({"name":"张三"})'>测试</a>
</body>
</html>
<script>

  function open1(obj) {
    console.log(obj)
  }
</script>

二、实践代码

技术背景描述
使用bootstrapTable 插件渲染表格，并在操作列添加编辑按钮，点击编辑把当前行的数据对象，当做参数传过去
代码实现

$('#tDelayTable').bootstrapTable({
	......
	columns : [
		.......
		{
           field : 'operate',
           title : '操作',
           valign : 'middle',
           width : 100,
           align : 'center',
           formatter: function(value, rec, index) {
			   console.log(rec)  // 当前行 数据对象
			   // {name: "张三"}
			   console.log(typeof rec) // object 对象类型
			   let data = JSON.stringify(rec)  // 把对象 转换为 JSON 字符串
			   console.log(data) // JSON 字符串
			   // {"name":"张三"}
			   console.log(typeof data) // 字符串类型
			   let href = "<a href='#' οnclick='editDelay(" + data  + ")'>编辑</a>";
			   // 因为data的内容都是双引号，为了避免与方法名editDelay的双引号起冲突，
			   // 因此这里方法名，使用单引号区分开来，
			   // 为了避免方法名的单引号与 整个字符串的单引号冲突， 所以整个字符串拼接使用双引号
			   return href;
		   }	
	    }
	]
})

function editDelay(data) {
	console.log(typeof data)  // object 对象类型
	console.log(data) 
	// {name: "张三"}
	PS: 传入的时候是JSON字符串， 但是接收的时候是Object对象，个人猜测 formatter 方法对返回数据做了类型转换的处理, 欢迎大家交流讨论！
	
}