ruoyi–主子表提交(新增行)–select选项动态绑定问题

问题描述

在主子表提交中,将select选项动态绑定后台数据,新增行时之前的选择都被刷新.解决方法在最后.记录一下过程,[自用]

select动态绑定

用ruoyi框架的时候,使用模板中的提交主子表,当select作为表格的元素时,原模板中产生迷惑的代码如下:
表格初始化部分:

 {
  field: 'type',
       align: 'center',
       title: '商品种类',
       formatter: function(value, row, index) {
   		var data = [{ index: index, type: value }];
           return $("#goodsTypeTpl").tmpl(data).html();
             }
   }

js部分 :

<!-- 商品类型 -->
<script id="goodsTypeTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='goods[${index}].type'>
  <option value="">所有</option>
  <option value="0" {{if type==="0"}}selected{{/if}}>寒性</option>
  <option value="1" {{if type==="1"}}selected{{/if}}>热性</option>
</select>
</div>
</script>

很明显每项都写死了,不符合选项用后台数据进行动态渲染的需求;
将方法改成动态渲染后,代码如下:

<script id="goodsTypeTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control projectName' name='beans[index].projectName'>
    <option value=""></option>
    <option th:each="project:${projects}" th:value="${project.itemName}" th:text="${project.itemName}" }" ></option>
</select>
</div>
</script>

发现selected的判断如何处理是个问题.js代码块,使用了jquery-tmpl(一个模板工具(个人理解)),看了眼语法,觉得略头大,且要处理数据格式,有那么亿点点麻烦,一瞬间不想动
这个问题不处理,每次新增行就会出现之前的选择被刷新的问题

bootstrap-table 的问题,以及ruoyi的处理

挖了一下ruoyi的common.js,顺路往下看了眼bootstrap-table.min.js,发现本质是bootstrap-table新增行会处理掉之前行的数据,但是ruoyi在做新增行的时候已经对bootstrap-table进行过处理包装,用过的会发现,input的文本数据在新增的时候并没有被刷掉,也就是说ruoyi已经处理了bootstrap-table的缺陷,代码放过来,有时间可以再看一下

// 主子表操作封装处理
var sub = {
//获取已有的数据,调用bootstrap-table的updateRow(),在新增完行之后再将之前的数据渲染进去(个人理解
    editColumn : function() {
	var dataColumns = [];
	for (var columnIndex = 0; columnIndex < table.options.columns.length; columnIndex++) {
	    if (table.options.columns[columnIndex].visible != false) {
		dataColumns.push(table.options.columns[columnIndex]);
	    }
	}
	var params = new Array();
	var data = $("#" + table.options.id).bootstrapTable('getData');
	var count = data.length;
	for (var dataIndex = 0; dataIndex < count; dataIndex++) {
	    var columns = $('#' + table.options.id + ' tr[data-index="'
		    + dataIndex + '"] td');
	    var obj = new Object();
	    for (var i = 0; i < columns.length; i++) {
		var inputValue = $(columns[i]).find('input');
		var selectValue = $(columns[i]).find('select');
		var key = dataColumns[i].field;
		if ($.common.isNotEmpty(inputValue.val())) {
		    obj[key] = inputValue.val();
		} else if ($.common.isNotEmpty(selectValue.val())) {
		    obj[key] = selectValue.val();
		} else {
		    obj[key] = "";
		}
	    }
	    var item = data[dataIndex];
	    var extendObj = $.extend({}, item, obj);
	    params.push({
		index : dataIndex,
		row : extendObj
	    });
	}
	$("#" + table.options.id).bootstrapTable("updateRow", params);
    },
    delColumn : function(column) {
	sub.editColumn();
	var subColumn = $.common.isEmpty(column) ? "index" : column;
	var ids = $.table.selectColumns(subColumn);
	if (ids.length == 0) {
	    $.modal.alertWarning("请至少选择一条记录");
	    return;
	}
	$("#" + table.options.id).bootstrapTable('remove', {
	    field : subColumn,
	    values : ids
	});
    },
    //新增行
    addColumn : function(row, tableId) {
	var currentId = $.common.isEmpty(tableId) ? table.options.id : tableId;
	table.set(currentId);
	var count = $("#" + currentId).bootstrapTable('getData').length;
	//
	sub.editColumn();
	//bootstrapTable的insertRow会把之前的数据cover掉,因为没有存储,还是什么,具体可以看下🔗1
	$("#" + currentId).bootstrapTable('insertRow', {
	    index : count + 1,
	    row : row
	});
    }
};

换个思路看一下

所以为什么还有select选择被清空的问题存在,目前唯一存疑的就是之前那段要用jquery-tmpl的代码.本质上,这个模板是用来在新增行的时候将html代码填充进去,那不用这个方法,我们换ruoyi(可能是ruoyi ,不过好像有好多table初始化的代码长得差不多…所以大概率是其他的,俺还不清楚,没有深究)中另一种返回方式,代码如下:

{
 field: 'price',
      align: 'center',
      title: '商品价格',
      formatter: function(value, row, index) {
      	var html = $.common.sprintf("<input class='form-control' type='text' name='goods[%s].price' value='%s'>", index, value);
  		return html;
            }
},

在foramtter中可以通过value接收到上一行的选择结果,index就是行号,对此进行处理,可以实现需求.

解决方法

js – 表格初始部分代码

{
		            field: 'projectName',
		            align: 'center',
		            title: '考核内容',
		            formatter: function(value, row, index) {
		            	//处理option
                    	var headOption = "<option value =''>请选择</option>";
                    	 $.each(project,function(i,obj){
                     		if(value == obj.itemName){
                     			headOption = headOption + "<option value='"+ obj.itemName +"' selected>"+obj.itemName+"</option>";
                     		}else{
                     			headOption = headOption + "<option value='"+ obj.itemName +"'>"+obj.itemName+"</option>";
                     		}
                     		option = '<select class="form-control" name="beans['+ index + '].projectName">'+
                            headOption + '</select>' ;
             	        });
		            	return $.common.sprintf(option, index, value);
                    }
		        },

js – addColumn() "添加行"function

 function addColumn() {
        	var row = {
        			projectContent: "",
        			projectSetScore: "",
        			projectName: "",
            }
       		sub.addColumn(row);
        }

html部分代码

<div class="row">
				<div class="col-sm-12">
					<button type="button" class="btn btn-white btn-sm"
						onclick="addColumn()">
						<i class="fa fa-plus"> 增加</i>
					</button>
					<button type="button" class="btn btn-white btn-sm"
						onclick="sub.delColumn()">
						<i class="fa fa-minus"> 删除</i>
					</button>
					<div class="col-sm-12 select-table table-striped">
						<table id="bootstrap-table"></table>
					</div>
				</div>
			</div>

总结

其实最后一步,我还是有点懵的,但是,可以用,嗯~可以.
昨天临近中午遇到这个问题,现在误打误撞解决了(大概,话比较多记录下过程,留个记录给自己看,其中有很多是我目前的认知,如果有问题,请走过路过的大佬们不吝赐教🙏
2021-09-02 13:52

链接: 🔗1. bootstrap table新增编辑行时上一行填写的数据被清空.