`
freshflower
  • 浏览: 186696 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

阅读更多

      在开发WEB前端页面时,经常会根据动态的数据加载一些HTML控件,如果把这些HTML代码全写入JS中,根据不同的数据显示的控件也不一样,操作起来会显得比较繁琐,而且极不利于代码的维护,怎么办呢?现在就是我要说的,使用模板方法,直接把数据往里面套就好了。废话不多说,以示例来说明。

 

       先写个非常重要的JS方法,此方法就是用来填充格式数据的。(看不懂也没关系,会用就行)

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}" onblur="TextOnBlur(this)" onclick="TextOnFocus(this)" name="medianame" mid="{mid}" readonly="readonly"></td>
    <td>
        <a onclick="updateMediaName(this)" href="javascript:void(0);">重命名</a>
        <a onclick="showbulkUploadTemplate(this)" name="edit" localfile="{localfile}" href="javascript:void(0);">替换</a>
        <a onclick="daleteMedia(this)" href="javascript:void(0);">删除</a>
        <a onclick="setMediaFaceImage(this);" title="设置为分组【{groupname}】的封面" groupname="{groupname}" mid="{mid}" href="javascript:void(0);">设置封面</a>
    </td>
</tr>
</script>

 

大家看到了这段代码,如果全部写JS上确实比较烦,而且大家也发现了,为什么在首尾有<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(''));
        //走完这一步其实就完成了,不会吧,这么简单,不错,就是这么简单!! 不信就自己动手去试试!
    }
});

 

     哟嚯,搞定,等等,好像表格的列数对不上,是吧,那是因为我没有把模板写完整出来,继续往下看。

      现在我来解释为什么把模板代码放在<script></script>中间,假如,你把模板代码放在某个<div>中并隐藏起来,那么可能你的代码中会用到$('input[type="text"]')查找控件时,不好意思,就会把模板中的也统计进去了,这个并不是你想要的。所以我用<script>,这么做还有一个好处,就是不会被当成HTML来执行显示出来, 但我们也得保证不能当成js来执行,所以加了个type="text/template",没有这个类型的,自己明白就好了。

      另外,像o.mid的数值只会填充到{mid}这个里,不会填充到别的地方去,而且{mid}可以存在多个,一并全部替换成实际数值了。

 

    接下来的一个问题就是,我取到的数据可能并不是我要给用户显示的,那么就需要变通一下了

var html = $('script[type="text/template"]').html();
var arr = [];
$.each(dta.rows, function(i, o) {
    //atime,asize和fsize这三个变量是之前的JSON中没有的,可灵活设置一下:
    //格式化时间,当然getFormatDate这个函数我也公布出来了,格式化时间而已,见最后面。
    o.atime = getFormatDate(o.uploadtime ? o.uploadtime : o.createtime, 'yyyy-MM-dd');
    //图片的尺寸大小: 就是把上面的o.width和o.height变量组合一下,如果任何一个不存在,则返回"-"
    o.asize = (o.width && o.height) ? o.width + ' * ' + o.height : '-';
    //图片大小。存在才显示xxKB
    o.fsize = o.seizespace ? o.seizespace + '&nbsp; KB' : '-';
    //格式化模板数据
    arr.push(formatTemplate(o, html));
});
$('#tableData').append(arr.join(''));

 完整的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}" onblur="TextOnBlur(this)" onclick="TextOnFocus(this)" name="medianame" mid="{mid}" readonly="readonly"></td>
        <td>{mediatype}</td>
        <!-- 各位看官,自定义的三个属性在这里哦~~ -->
        <td>{fsize}</td>
        <td>{asize}</td>
        <td>{atime}</td>
        <td>
            <a onclick="updateMediaName(this)" href="javascript:void(0);">重命名</a>
            <a onclick="showbulkUploadTemplate(this)" name="edit" localfile="{localfile}" href="javascript:void(0);">替换</a>
            <a onclick="daleteMedia(this)" href="javascript:void(0);">删除</a>
            <a onclick="setMediaFaceImage(this);" title="设置为分组【{groupname}】的封面" groupname="{groupname}" mid="{mid}" href="javascript:void(0);">设置封面</a>
        </td>
    </tr>
</script>

 

   其实想通了还是挺简单的,当然formatTemplate函数中的第一个参数必须要求是像struct的对象,直接一点就是这样一个数据包:  { "A": “a”, "B": "b", "C":"c"  }  。懂了吧伙计们,不懂就慢慢看吧,嘿嘿!

 

 附: 格式化时间函数:

function getFormatDate(xdate, format) {
    try {
        var format = format || 'yyyy-MM-dd HH:mm:ss';
        var date = (xdate instanceof Date) ? xdate : new Date(parseInt(xdate.replace('/Date(', '').replace(')/', ''), 10));
        var lang = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'H+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        };
        if (/(y+)/.test(format)) {
            format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (var key in lang) {
            if (new RegExp('(' + key + ')').test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
                    lang[key] : ('00' + lang[key]).substr(('' + lang[key]).length));
            }
        }
        return format;
    } catch (e) {
        return '-';
    }
}

 

原创写作

 原文地址:  http://freshflower.iteye.com/blog/2120268

分享到:
评论
1 楼 王秋城 2017-09-27  
有没有例子源码,发一份可以运行的代码

相关推荐

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    11.3.4 使用数据源控件的缓存 11.4 缓存依赖 11.4.1 文件和缓存项目依赖 11.4.2 聚合依赖 11.4.3 移除项目回调 11.4.4 理解SQL缓存通知 11.4.5 缓存通知的工作方式 11.4.6 启用通知 11.4.7 创建...

    asp.net专家疑难解答200问源码

    147.如何使用DataReader快速访问SQL Server数据 148.如何使用DataAdapter将数据填充到DataSet并显示出来 149.如何使用DataTable对象存储数据库表 150.如何对DataTable进行检索和排序 151.如何使用DataView进行...

    ASP.NET4高级程序设计(第4版) 3/3

    11.3.4 使用数据源控件的缓存 376 11.4 缓存依赖 379 11.4.1 文件和缓存项目依赖 379 11.4.2 聚合依赖 380 11.4.3 移除项目回调 381 11.4.4 理解SQL缓存通知 383 11.4.5 缓存通知的工作方式 384 ...

    asp.net专家疑难解答200问

    如何使用DataReader快速访问SQL Server数据 148.如何使用DataAdapter将数据填充到DataSet并显示出来 149.如何使用DataTable对象存储数据库表 150.如何对DataTable进行检索和排序 151.如何使用...

    一步一步学Silverlight 2系列

    Silverlight 2系列(9):使用控件模板 Silverlight 2系列(8):使用样式封装控件观感 Silverlight 2系列(7):全屏模式支持 Silverlight 2系列(6):键盘事件处理 Silverlight 2系列(5):实现简单的拖放功能 ...

    一步一步学Silverlight_2系列

    Silverlight 2系列(9):使用控件模板 Silverlight 2系列(8):使用样式封装控件观感 Silverlight 2系列(7):全屏模式支持 Silverlight 2系列(6):键盘事件处理 Silverlight 2系列(5):实现简单的拖放功能 ...

    SAT_JS:演示如何使用javascript实现分离轴定理(SAT)的小演示

    SAT_JS 一个小型演示,演示如何使用javascript实现分离轴定理(SAT)。 这绝不是优化的代码。 取而代之的是,它只是用作指导它们如何工作的指南,可以按原样使用,... 它旨在使用画布和一些ui控件自动填充目标DIV元

    asp.net知识库

    .Net 中IE使用WinForm控件的使用心得。 动态加载用户控件的组件!(终结MasterPages技术) 在ASP.NET 1.1下实现模板化站点的新思路 在ASP.Net中两种利用CSS实现多界面的方法 用于弹出ModalDialog进行数据选择的控件 ...

    flex3的cookbook书籍完整版dpf(包含目录)

    在Tree控件中使用复杂数据对象 5.8节.只允许List的某一项可被选中 5.9节.为List的项编辑器添加格式化和验证数据 5.10节.跟踪TileList中所有被选中的子节点 5.11节.使用和显示项渲染器的NULL项 5.12节.为List创建右键...

    SOAOFFICE - 微软 OFFICE 中间件

    而且开发人员还能够以简洁的代码快速的将数据库数据动态填充到Office文档指定位置,并且也能够从Office文档中提取指定位置的数据保存到数据库。 SOAOffice提供这些强大功能的同时,服务器端并不需要安装运行Office...

    JAVA上百实例源码以及开源项目源代码

     Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,得到Graphics实例,得到Image实例,填充颜色数组数据,初始化颜色数组。...

    Silverlight2.0功能展示Demo源码

    OpenWriteAsync(Uri address, string method, Object userToken) - 打开流以使用指定的方法向指定的 URI 写入数据 19、Silverlight(21) - 2.0通信之WebRequest和WebResponse, 对指定的URI发出请求以及接收响应 介绍...

    JAVA上百实例源码以及开源项目

     Java波浪文字,一个利用Java处理字符的实例,可以设置运动方向参数,显示文本的字符数组,高速文本颜色,显示字体的 FontMetrics对象,得到Graphics实例,得到Image实例,填充颜色数组数据,初始化颜色数组。...

Global site tag (gtag.js) - Google Analytics