java 动态添加多级文本行前端后台集合List传参 jquery实现比较方便

本文链接：https://blog.youkuaiyun.com/sunboychenll/article/details/111386030

function addNode(level,divChild){
var id=level.id;

var div= $("#subDiv");

var tag=id.substring(7).replace(/\d/g,"    ");
// var cnt=div.childNodes.length;
var cnt = div.find(".list-item").length
//var cnt = div.find(".sub-list-item").length
//alert(id + "--->" + level.value +"--->"+ " -->tag: " + tag + " cnt:"+cnt);

var divAdd=$("<div class='list-item' id='list-item_"+ cnt + "' data-id='"+ cnt + "'></div>"); //创建一个子div
console.log(divAdd)

   divAdd.html(tag+"|----标题:<input type=text id="+(id+cnt) + " name='jsonCommonBeanList["+ cnt +"].title' value=''><b id='div_link'>++</b><a class='itemD' οnclick=delBElement(this,'list-item',"+ cnt +")>--</a><div id='subItemDiv_"+ cnt +"' ></div>");

//触发通过js动态添加的超链接a
   divAdd.on("click", "#div_link", function(){
   //点击id为div_link时调用的处理函数
   var div= $("#subItemDiv_"+cnt);
   // addNode(level,child) 无限级增加
   addLinkNode(level,div,cnt)
   });

div.append(divAdd);

}

function addLinkNode(level,div,cnt){

var tag="        ";

var subCnt = div.find(".sub-list-item").length

var divAdd=$("<div class='sub-list-item' id='sub-list-item_"+ cnt +"_"+ subCnt + "' data-id='"+ subCnt + "'></div>"); //创建一个子div
console.log(divAdd)

   divAdd.html(tag+"|----标题: <input type=text id="+ cnt + " name='jsonCommonBeanList["+ cnt +"].childs["+ subCnt +"].title' value=''> 数量:<input type='text' id="+cnt + " name='jsonCommonBeanList["+cnt+"].childs["+ subCnt +"].count' value='' /> 价格:<input type='text' id="+ cnt + " name='jsonCommonBeanList["+cnt+"].childs["+ subCnt +"].price' value='' /><a class='itemD' οnclick=delBElement(this,'sub-list-item_"+ cnt +"',"+ subCnt +")>--</a>");

div.append(divAdd);
}

function addBElement(it,index){

// alert(it);
// alert(index);
var tag="        ";
var div= $("#subItemDiv_"+index);
   var cnt = index;
var subCnt = div.find(".sub-list-item").length
var divAdd=$("<div class='sub-list-item' data-id='"+ subCnt + "'></div>"); //创建一个子div
console.log(divAdd)

   divAdd.html(tag+"|----标题: <input type=text id="+ cnt + " name='jsonCommonBeanList["+ cnt +"].childs["+ subCnt +"].title' value=''> 数量:<input type='text' id="+cnt + " name='jsonCommonBeanList["+cnt+"].childs["+ subCnt +"].count' value='' /> 价格:<input type='text' id="+ cnt + " name='jsonCommonBeanList["+cnt+"].childs["+ subCnt +"].price' value='' />");

div.append(divAdd);
}

function delBElement(label,classNm,index){

// alert(it);
// alert(index);
var div= $("#"+classNm+"_"+index);
div.remove();
}

add.html

<@p.td label="组合套餐,json格式" >
       <div><input type=text id=level1_1 value="root" ><b class="rootB">+</b>
       <div id="subDiv">

       </div>
       </div>
   </@p.td>
   <@p.tr/>

edit.html

<@p.td label="组合套餐,json格式" >

   <div><input type="text" id="level1_1" value="root"><b class="rootB">+</b>
       <div id="subDiv">
           <#if jsonCommonBeanList?? && jsonCommonBeanList?size gt 0>
           <#list jsonCommonBeanList as item>
       <div class="list-item" id="list-item_${item_index}" data-id="${item_index}" >    |----标题: <input type="text" id="title_${item_index} " name='jsonCommonBeanList[${item_index}].title' value='${item.title}'><b data-id="${item_index}" class="itemB" οnclick=addBElement(this,${item_index})>++</b> <a class="itemD" οnclick=delBElement(this,'list-item',${item_index})>--</a>
               <div id="subItemDiv_${item_index}" >
               <#list item.childs as child>
               <div class="sub-list-item" id="sub-list-item_${item_index}_${child_index}" data-id="${child_index}" >        |----标题: <input type="text" id="title_${item_index}_${child_index}" name="jsonCommonBeanList[${item_index}].childs[${child_index}].title" value="${child.title}"> 数量:<input type="text" id="count_${item_index}_${child_index}" name="jsonCommonBeanList[${item_index}].childs[${child_index}].count" value="${child.count}"> 价格:<input type="text" id="price_${item_index}_${child_index}" name="jsonCommonBeanList[${item_index}].childs[${child_index}].price" value="${child.price}"><a class="itemD" οnclick=delBElement(this,'sub-list-item_${item_index}',${child_index})>--</a></div>
               </#list>
               </div>
       </div>
               </#list>
           </#if>
       </div>
       </div>

   </@p.td>
   <@p.tr/>

实体BEAN上

List<JsonCommonBean> jsonCommonBeanList = new ArrayList<>();

通用BEAN上

public class JsonCommonBean implements java.io.Serializable, Cloneable {
   // Id
   private Integer id;

   // 标题
   private String title;
   // 数量
   private Integer count;

   //价格
   private Double price;
// 这里实现套餐
   List<JsonCommonBean> childs= new ArrayList<>();

}