jesstite中jsp页面使用js生成html的模板——addRow()和delRow()

最近在jeesite项目中遇到需要在当前jsp页面动态生成html模板，于是出现各种坑，所以事后总结了一下，希望小伙伴们少走弯路哦。
我就直接贴代码了
js定义html模板

<script type="text/template" id="curriculumOrderDetailTpl">//<!--
						<tr id="curriculumOrderDetailList{{idx}}">
							<td class="hide">
								<input id="curriculumOrderDetailList{{idx}}_id" name="curriculumOrderDetailList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
								<input id="curriculumOrderDetailList{{idx}}_delFlag" name="curriculumOrderDetailList[{{idx}}].delFlag" type="hidden" value="0"/>
							</td>
							<td>
								<input id="curriculumOrderDetailList{{idx}}_schoolInfo" name="curriculumOrderDetailList[{{idx}}].schoolInfo.id" type="text" value="{{row.schoolInfo.schoolName}}" maxlength="64" class="input-small "/>
							</td>
							
							<td>
								<input id="curriculumOrderDetailList{{idx}}_goodId" name="curriculumOrderDetailList[{{idx}}].goodId" type="text" value="{{row.goodId}}" maxlength="64" class="input-small "/>
							</td>
							<td>
								<input id="curriculumOrderDetailList{{idx}}_curriculumInfo" name="curriculumOrderDetailList[{{idx}}].curriculumInfo.id" type="text" value="{{row.curriculumInfo.curriculumName}}" maxlength="64" class="input-small "/>
							</td>
							<td>
								<input id="curriculumOrderDetailList{{idx}}_curriculumName" name="curriculumOrderDetailList[{{idx}}].curriculumName" type="text" value="{{row.curriculumName}}" maxlength="255" class="input-small "/>
							</td>
							
							<td>
								<input id="curriculumOrderDetailList{{idx}}_curriculumMenberPrice" name="curriculumOrderDetailList[{{idx}}].curriculumMenberPrice" type="text" value="{{row.curriculumMenberPrice}}" class="input-small "/>
							</td>
							<td>
								<input id="curriculumOrderDetailList{{idx}}_totalCurriculumNumber" name="curriculumOrderDetailList[{{idx}}].totalCurriculumNumber" type="text" value="{{row.totalCurriculumNumber}}" maxlength="11" class="input-small  digits"/>
							</td>
							<td>
								<c:forEach items="${fns:getDictList('curriculum_state')}" var="dict" varStatus="dictStatus">
									<span><input id="curriculumOrderDetailList{{idx}}_curriculumState${dictStatus.index}" name="curriculumOrderDetailList[{{idx}}].curriculumState" type="radio" value="${dict.value}" data-value="{{row.curriculumState}}"><label for="curriculumOrderDetailList{{idx}}_curriculumState${dictStatus.index}">${dict.label}</label></span>
								</c:forEach>
							</td>
							<td>
								<input id="curriculumOrderDetailList{{idx}}_refundMoney" name="curriculumOrderDetailList[{{idx}}].refundMoney" type="text" value="{{row.refundMoney}}" class="input-small "/>
							</td>
							<td>
								<input id="curriculumOrderDetailList{{idx}}_sort" name="curriculumOrderDetailList[{{idx}}].sort" type="text" value="{{row.sort}}" class="input-small required"/>
							</td>
							<td>
								<textarea id="curriculumOrderDetailList{{idx}}_remarks" name="curriculumOrderDetailList[{{idx}}].remarks" rows="4" maxlength="255" class="input-small ">{{row.remarks}}</textarea>
							</td>
							<shiro:hasPermission name="order:curriculumOrder:edit"><td class="text-center" width="10">
								{{#delBtn}}<span class="close" onclick="delRow(this, '#curriculumOrderDetailList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
							</td></shiro:hasPermission>
						</tr>//-->
            </script>
            

addRow()添加行方法

  function addRow(list, idx, tpl, row) {
            $(list).append(Mustache.render(tpl, {
                idx: idx, delBtn: true, row: row
            }));
            $(list + idx).find("select").each(function () {
                $(this).val($(this).attr("data-value"));
            });
            $(list + idx).find("input[type='checkbox'], input[type='radio']").each(function () {
                var ss = $(this).attr("data-value").split(',');
                for (var i = 0; i < ss.length; i++) {
                    if ($(this).val() == ss[i]) {
                        $(this).attr("checked", "checked");
                    }
                }
            });
        }

delRow()删除行方法

 function delRow(obj, prefix) {
            var id = $(prefix + "_id");
            var delFlag = $(prefix + "_delFlag");
            if (id.val() == "") {
                $(obj).parent().parent().remove();
            } else if (delFlag.val() == "0") {
                delFlag.val("1");
                $(obj).html("÷").attr("title", "撤销删除");
                $(obj).parent().parent().addClass("error");
            } else if (delFlag.val() == "1") {
                delFlag.val("0");
                $(obj).html("×").attr("title", "删除");
                $(obj).parent().parent().removeClass("error");
            }
        }

js中代码

<script type="text/javascript">
                var curriculumOrderDetailRowIdx = 0,
                    curriculumOrderDetailTpl = $("#curriculumOrderDetailTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");
                $(document).ready(function () {
                    var data = ${fns:toJson(curriculumOrder.curriculumOrderDetailList)};/* 获取订单详情集合列表并转换为json字符串 */
                    for (var i = 0; i < data.length; i++) {
                        addRow('#curriculumOrderDetailList', curriculumOrderDetailRowIdx, curriculumOrderDetailTpl, data[i]);
                        curriculumOrderDetailRowIdx = curriculumOrderDetailRowIdx + 1;
                    }	
                });
            </script>

需要注意的是addRow()中参数代表的意思！！！