web端列表数据使用jQuery模板替换

最新推荐文章于 2021-08-06 12:53:16 发布

春盏77

最新推荐文章于 2021-08-06 12:53:16 发布

阅读量268

点赞数

分类专栏： Web工作学习笔记文章标签： html jQuery

本文链接：https://blog.csdn.net/qq_31832209/article/details/111470544

版权

Web工作学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在列表数据处理的时候，一般我们都是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)
          );
      }
    }
  }