bootstrap-table实现新建商品规格表及子表

System_Err0r

已于 2022-10-18 15:47:20 修改

阅读量1.7k

点赞数

分类专栏： BootStrap-Table 文章标签： bootstrap javascript 前端

于 2020-12-02 17:20:44 首次发布

本文链接：https://blog.csdn.net/gba3455/article/details/110490835

版权

本文介绍如何利用bootstrap-table组件在前端实现新建商品时创建动态表格，包括主表和子表的交互。在OnExpandRow事件中遇到了传值问题，通过fault_C_Set方法进行处理。虽然直接用html构建表格更简单，但本文探讨了使用组件的优势。

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

公司有个针对手机维修等维修类项目的需求：
在新建商品时，创建一个表格，表格内可动态创建各项目，各项目又可动态创建各个子项目，如图：
可以对每一项进行CUD操作
在这里插入图片描述
点击“新增子项目”后的弹窗

该功能全程使用bootstrap-table组件实现，
遇到几个问题记录一下：

创建子表时OnExpandRow事件中的参数$detail无法传值

onExpandRow: function(index, row, $detail) {
   
   	      	// addSub(row, index, $detail);  
   	      	oTableInit.InitSubTable(index, row, $detail);
   	      }
   	      // 这里addSub方法点击后弹出创建子菜单，在“提交”按钮中传递$detail对象，调用下一方法，实际进行中发现，传递$detail到addSub里后,在onclick内，对象通过JSON.stringify($detail)进行转换
function addSub(row, index, detail) {
   
   		console.log('detail-->', row, index, detail);
   		var alldata = JSON.stringify($("#tableb").bootstrapTable('getData')); //获取全部数据
   		var data_json = JSON.parse(alldata); //data_json和data_json2一样都是json对象
   		console.log('-->', row, index);
   		var html = "<div class='add_fault_c_shw'>" +
   				"<div style='margin: 20px 0px 0px 20px; display: flex; flex-direction: column;'>" +
   				"<div>名称：<input type='text' style='width: 70%' placeholder='请输入您想添加的内容' name='customVlue'></div>" +
   				"<div>原价：<input type='text' style='width: 70%' placeholder='请输入原价' name='originPrice'></div>" +
   				"<div>现价：<input type='text' style='width: 70%' placeholder='请输入现价' name='currentPrice'></div>" +
   				"</div>" +
   				"<div class='purchase_instructions_sbm'>" +
   				"<button οnclick='fault_C_Set(" + JSON.stringify(row) + ',' + index + ',' + JSON.stringify(detail) + ")' type='button' class='btn blue'>提交</button>" +
   				"<button style = 'margin-left: 5px;' type='button' class='btn blue'>取消</button>" +
   				"</div>" +
   				"</div>";
   		info_layer = layer.open({
   
   			type: 1,
   			title:"修改故障",
   			// skin: 'layui-layer-rim', //加上边框
   			area