JS使用模板快速填充HTML控件数据-白红宇

JS使用模板快速填充HTML控件数据

阅读量：5313 次

发布时间：2019-06-14

本文共 4272 字，大约阅读时间需要 14 分钟。

function formatTemplate(dta, tmpl) {      var format = {          name: function(x) {              return x ;         }      };      return tmpl.replace(/{(\w+)}/g, function(m1, m2) {          if (!m2)              return "";          return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];      });  }

此方法就是用来填充格式数据的

接下来就用示例来说明：

例如：从服务器取出一个JSON串，把数据显示在一组HTML控件上，现在我先把HTML代码写下来:

<script type="text/template">  <tr mgid="{mgid}" mid="{mid}">      <td>          <input type="checkbox" mid="{mid}"></td>      <td>          <a href="{localfile}" data-fancybox-group="button" class="fancybox-buttons">           <img src="{localfile}" style="width:45px;height:45px;"></a>      </td>      <td>          <input type="text" class="input-large valid" value="{medianame}" οnblur="TextOnBlur(this)" οnclick="TextOnFocus(this)"  　　　　　　name="medianame" mid="{mid}" readonly="readonly"></td>      <td>          <a οnclick="updateMediaName(this)" href=";">重命名</a>          <a οnclick="showbulkUploadTemplate(this)" name="edit" localfile="{localfile}" href=";">替换</a>          <a οnclick="daleteMedia(this)" href=";">删除</a>          <a οnclick="setMediaFaceImage(this);" title="设置为分组【{groupname}】的封面" groupname="{groupname}" mid="{mid}" href=";">设置封面</a>      </td>  </tr>  
     script>

若我们从服务器上取到的JSON如下:

{      "total": "1",      "page": "1",      "records": "3",      "rows": [{          "groupname": "美食图片",          "mid": 4766,          "sid": 517,          "medianame": "Tulips",          "mgid": 549,          "mediatype": "image",          "mediaid": "",          "timestamp": "",          "localfile": "/UploadFile/image/201409/14/0x6dvf.jpg",          "picurl": "",          "thumbid": "",          "voiceformat": "",          "state": 1,          "createtime": "\/Date(1410673220000+0800)\/",          "uploadtime": "\/Date(1410673220000+0800)\/",          "width": 480,          "height": 360,          "seizespace": 17.41      }, {          "groupname": "美食图片",          "mid": 4765,          "sid": 517,          "medianame": "Penguins",          "mgid": 549,          "mediatype": "image",          "mediaid": "",          "timestamp": "",          "localfile": "/UploadFile/image/201409/14/6iluw6.jpg",          "picurl": "",          "thumbid": "",          "voiceformat": "",          "state": 1,          "createtime": "\/Date(1410673215000+0800)\/",          "uploadtime": "\/Date(1410673215000+0800)\/",          "width": 480,          "height": 360,          "seizespace": 15.62      }, {          "groupname": "美食图片",          "mid": 4764,          "sid": 517,          "medianame": "Lighthouse",          "mgid": 549,          "mediatype": "image",          "mediaid": "",          "timestamp": "",          "localfile": "/UploadFile/image/201409/14/fx0kzp.jpg",          "picurl": "",          "thumbid": "",          "voiceformat": "",          "state": 1,          "createtime": "\/Date(1410673209000+0800)\/",          "uploadtime": "\/Date(1410673209000+0800)\/",          "width": 480,          "height": 360,          "seizespace": 14.2      }]  }

填写到定义在下面Table中

<html>  <body>  <table id="tableData">  <tr class="firstLine">      <th>
     th>      <th>图片
     th>      <th>图片名称
     th>      <th>类型
     th>      <th>大小
     th>      <th>尺寸
     th>      <th>上传日期
     th>      <th>操作
     th>      <th>
     th>  
     tr>  
     table>  
     body>  
     html>

好了准备工作做好了，重点的来了

$.ajax({      url: '/manage/GetAllMediaListPage',      type: 'get',      data: data,      cache: false,      dataType: "json",      success: function(dta) {          if (!dta || !dta.rows || dta.rows.length <= 0) {              return;          }            //获取模板上的HTML          var html = $('script[type="text/template"]').html();          //定义一个数组，用来接收格式化合的数据          var arr = [];          //对数据进行遍历          $.each(dta.rows, function(i, o) {              //这里取到o就是上面rows数组中的值, formatTemplate是最开始定义的方法.              arr.push(formatTemplate(o, html));          });          //好了，最后把数组化成字符串，并添加到table中去。          $('#tableData').append(arr.join(''));          //走完这一步其实就完成了，不会吧，这么简单，不错，就是这么简单!! 不信就自己动手去试试!      }  });

为什么把模板代码放在

中并隐藏起来，那么可能你的代码中会用到$('input[type="text"]')查找控件时，不好意思，

就会把模板中的也统计进去了，这个并不是你想要的。所以我用

转载于:https://www.cnblogs.com/fengyingwang/p/7591106.html

你可能感兴趣的文章

PHP魔术方法之__call与__callStatic方法