技術標籤：Web-HTMLWeb-jQueryhtmljQuery

在列表資料處理的時候，一般我們都是for迴圈，字串拼接。

// 站點汙染物檢測值
  function doPointWrwHtml(msg) {
    // console.log("doPointWrwHtml", msg);
    var wrwList = msg.data.data;
    if (wrwList.length === 0) {
      $("#wrw-list-content").html("");
    } else {
      var liet_item_html = "";
      for(var i = 0, l = wrwList.length; i < l; i++) {
        var wrwObj = wrwList[i];
        liet_item_html += "<div class='enterprise-list-item width-450'>" + 
              "<span class='font-14 font-weight-bold white-font g-display-inline-block first-column-content'>"+wrwObj.POLLUTE_NAME+"</span>" + 
              "<span class='margin-left-21 font-14 font-weight-bold white-font g-display-inline-block second-column-content'>"+wrwObj.VAL+"</span>" + 
              "<span class='margin-left-5 font-14 font-weight-bold white-font g-display-inline-block third-column-content'>"+wrwObj.MONITOR_TIME+"</span>" + 
              "<span class='margin-left--15 font-14 font-weight-bold green-font g-display-inline-block fourth-column-content' onclick='warmHandleFn('"+wrwObj.POLLUTE_CODE+"')'>警情處理</span>" +
            "</div>";
      }
      $("#wrw-list-content").html(liet_item_html);
    }
  } 
 

推薦使用模板替換：

1.html模板，div包起來，樣式設為隱藏樣式display:none;

<div id="model-data-box" style="display:none;">
      <div class="enterprise-list-item">
        <span class="font-14 font-weight-400 white-font g-display-inline-block first-column-content" title="#SLAB_NAME_TILE#">#SLAB_NAME#</span>
        <span class="font-14 font-weight-bold green-font g-display-inline-block second-column-content">#STATUS#</span>
        <span class="font-14 font-weight-400 white-font g-display-inline-block third-colum-content">#CREATE_TIME#</span>
        <span class="font-14 font-weight-400 white-font g-display-inline-block forth-colum-content">
          <span onclick="modelEditDialog('1', '#SMID#')">修改</span>
          <span onclick="modelPlayFn('#SMID#')">播放</span>
        </span>
      </div>
    </div>
  </div>
 

2.jQuery.replace()替換

function loadModelListHtml(msg) {
    console.log("loadModelListHtml", msg);
    var dataList = msg.data.data;
    if (dataList.length == 0) {
      var p_html = "<p style='height: 30px; line-height: 30px; color: #fff; padding-left: 8px;'>暫無資料!!!</p>";
      $("#slab-list-box").html(p_html);
    } else {
      $("#slab-list-box").html("");
      for( var i = 0, l = dataList.length; i < l; i++) {
        $("#slab-list-box").append($("#model-data-box").html()
          .replace('#SLAB_NAME_TILE#', dataList[i].SLAB_NAME)
          .replace('#SLAB_NAME#', (dataList[i].SLAB_NAME.length < 8 ? dataList[i].SLAB_NAME : dataList[i].SLAB_NAME.substring(0, 8) + '...'))
          .replace('#STATUS#', dataList[i].STATUS)
          .replace('#CREATE_TIME#', dataList[i].CREATE_TIME)
          .replace('#SMID#', dataList[i].SMID)
          );
      }
    }
  }