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()中参数代表的意思！！！