每次在js代码里面想动态的拼个dom,然后append到页面上,都是各种麻烦,
要是可以直接在jsp页面弄个隐藏的model那是很好的,用js方法里面的clone方法也是很好的,还可以给不同部分set值。
为了以后简单点,我就把模板摆着,方便后面用得着的时候,复制粘贴。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function fillDialog(dataArray) { var target = $( "#dialogTarget" ); target.empty(); for ( var i = 0; i < dataArray.length; i++) { var label = $( '<label class="control-label" style="width: auto; text-align: left;"></label>' ); label.text( "" + dataArray[i].channelName); var input = $( "<input type=\"text\"/>" ); input.prop( "name" , "checkbox" ); input.prop( "type" , "checkbox" ); input.prop( "value" , dataArray[i].id); if (dataArray[i].showInUserStatistic) { input.prop( "checked" , "true" ); } label.prepend(input); target.append(label); } }<br> |
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var trs = "" ; for ( var i = 0; i < dataArray.length; i++) { var branchBank = dataArray[i].branch; var newUser = dataArray[i].newUserNum; var netBoostUser = dataArray[i].netBoostUserNum; var closeUser = dataArray[i].closeUserNum; var activeUser = dataArray[i].activeUserNum; var index = activeUser.indexOf( "." ); if (index > 0) { //去分行活跃用户数的小数部分如:11.0 ---> 11 activeUser = activeUser.substring(0, index); } trs += "<tr><td title='" + branchBank + "'>" + branchBank + "</td>" ; trs += "<td title='" + newUser + "'>" + newUser + "</td>" ; trs += "<td title='" + netBoostUser + "'>" + netBoostUser + "</td>" ; trs += "<td title='" + closeUser + "'>" + closeUser + "</td>" ; trs += "<td title='" + activeUser + "'>" + activeUser + "</td>" ; trs += "</tr>" ; } newList.append( "<tbody>" + trs + "</tbody>" ); tableChart.append(newList.show());<br> |
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | var $metric = $( "#metric" ); $metric.empty(); var optGroup0 = $( "<optgroup label='常用指标'>" ); var optGroup1 = $( "<optgroup label='不常用指标'>" ); var optGroup2 = $( "<optgroup label='未分组指标'>" ); for ( var i=0; i<allMetricSources.length; i++) { var m = allMetricSources[i]; if ( m != null && (m.type == stream_type || m.type == 2)){ var option = $( "<option ></option>" ); option.attr( "value" , m.metric); option.attr( "data_type" , m.data_type); option.attr( "unit" , m.unit); option.html(m.title); if (m.groupType == 0) { optGroup0.append(option); } else if (m.groupType == 1) { optGroup1.append(option); } else { optGroup2.append(option); } } } $metric.append(optGroup0); $metric.append(optGroup1); $metric.append(optGroup2); if (metric != undefined){ $metric.val(metric); } $metric.trigger( "chosen:updated" );<br> |
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function fillRecoveryTable(data) { var $tableBody = $( "#recoveryTable" ).find( "tbody" ); $tableBody.empty(); var trs = "" ; for ( var i = 0; i < data.length; i++) { var recovery = data[i]; trs += "<tr><td >" + recovery.fileName + "</td>" ; trs += "<td >" + recovery.timeString + "</td>" ; trs += "<td >" + (recovery.result ? "成功" : "失败" ) + "</td>" ; trs += "<td >" + "<a onclick=\"removeRecovery('" + recovery.id + "');\" class=\"icon-trash option\" title=\"删除\"></a>" + "<a onclick=\"doRecovery('" + recovery.id + "');\" class=\"icon-cog option\" title=\"一键恢复\" ></a></td>" ; trs += "</tr>" ; } $tableBody.append(trs); } |
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对主机吧的支持。