`
freshflower
  • 浏览: 188262 次
  • 性别: 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  
有没有例子源码,发一份可以运行的代码

相关推荐

    GridView模板列前台绑定数据和后台接收控件被绑定数据的方法探讨

    对于HTML控件绑定数据,后台获取数据方法通常是通过控件的`ClientID`找到对应的DOM元素,然后通过JavaScript或jQuery来读取其值。在C#后台代码中,这可能看起来像这样: ```csharp protected void Page_Load(object...

    js定制模板

    获取到数据后,遍历数据列表,并使用`replace`函数将模板中的占位符替换为实际的数据值,最终将生成的HTML字符串设置为`&lt;select&gt;`控件的内容: ```javascript var productInfo = "&lt;option value='0'&gt;--请选择...

    一个js写的日历控件

    在IT行业中,JavaScript(简称JS)是一种广泛使用的前端编程语言,尤其在网页交互和动态效果的实现上。在这个场景中,我们讨论的是一个用JS编写的日历控件,其目的是为了帮助用户在预订酒店时方便地选择入住日期和离...

    后台数据统计Bootstrap5模板

    例如,模板可能包含ECharts、Chart.js等图表库的集成,可以方便地将复杂的数据转化为直观的图形,帮助管理者快速理解数据趋势和关键指标。 在文件列表中,“74348后台数据统计Bootstrap5模板”可能是压缩包内的主...

    数据网格下拉列表框控件

    - **桌面应用**:在桌面应用开发中,如Windows Forms或WPF,也有相应的控件可供选择,如.NET Framework的`ComboBox`控件,可以通过数据绑定和模板定制来实现多列显示。 4. **数据绑定和API** - **数据源**:控件...

    自定义下拉控件dropdownlist,绑定数据更方便

    在数据绑定方面,如果数据源来自服务器,我们可以使用Ajax异步请求获取数据。例如,使用jQuery的`$.ajax`方法: ```javascript $.ajax({ url: 'your-api-url', type: 'GET', success: function(data) { var ...

    JS时间控件

    在JavaScript(JS)中,时间控件是一种交互式的UI组件,允许用户选择日期或时间,通常用于表单输入。在本案例中,我们讨论的是一个使用JS和CSS创建的高级时间控件,它能精确到分钟,并且具有友好的用户界面。这个...

    一款可以在框架内使用的JS日历控件

    【标题】:“一款可以在框架内使用的JS日历控件”是指一种JavaScript编写的日历组件,它可以被嵌入到各种Web框架中,如Bootstrap、Angular、Vue或React等,为用户提供方便的日历显示和交互功能。这样的日历控件通常...

    ASP.NET数据绑定之Repeater控件.docx

    ASP.NET的Repeater控件是用于数据绑定的一种非常灵活的工具,主要用来循环显示来自数据库或其他数据源的数据。它的特点是允许开发者自定义数据呈现的HTML结构,提供了丰富的模板功能,包括ItemTemplate、...

    js日历控件大全,很齐全的js日历控件

    开发者通常会定义一个HTML模板,然后通过JavaScript来填充和调整这个模板,以展示当前日期、选择的日期以及提供导航选项。这些控件通常支持多种显示模式,如弹出式、嵌入式或滑动日历,以适应不同页面布局的需求。 ...

    javascript js 日历控件实例

    这些文件可能包括HTML模板、CSS样式表和JavaScript脚本。通过查看和学习这些代码,你可以了解日历控件的具体实现细节,并根据自己的需求进行修改和扩展。 总的来说,JavaScript日历控件是网页动态交互中的重要组成...

    JS操作CheckBox控件

    在本篇内容中,我们将探讨如何使用JavaScript操作ASP.NET中的CheckBox控件,实现特定的功能。 首先,ASP.NET中的CheckBox控件是一种允许用户进行二选一(是/否)选择的UI元素。在提供的代码片段中,DataGrid控件...

    js城市选择控件

    - 初始化控件:在页面加载完成后,使用JS将省份数据填充到省份下拉框中。 - 事件监听:为省份下拉框添加`change`事件监听器。当用户选择一个新的省份时,触发事件处理函数。 - 动态更新城市:在事件处理函数中,...

    html模板,插入音乐视频代码

    例如,一个HTML模板可能已经包含头部导航、页脚、侧边栏等常见元素,只需填充具体内容即可。 对于“person”这个文件名,可能是指一个个人资料或者个人主页的模板。在这样的模板中,可能会包含关于个人的介绍、照片...

    js日历控件实现及日程安排

    本文将深入探讨如何使用JavaScript实现一个功能完备的日历控件,并结合日程安排功能进行扩展。 首先,JavaScript日历控件的基础是通过DOM操作动态创建HTML结构来呈现日历界面。在`calendar2.aspx`中,我们可以预期...

    .net 自定义控件

    - **数据绑定**:自定义控件可以支持数据绑定,这样可以从数据库或其他数据源动态填充控件内容。 - **模板**:对于复杂控件,可以使用模板来定义其布局。例如,一个自定义列表控件可能需要头模板和项模板。 - **...

    asp.net打印控件(免费使用)

    5. **数据绑定和模板引擎**:在套打场景下,控件需要支持数据绑定,将动态数据填充到预设模板中,这可能涉及到ASP.NET的数据源控件(如SqlDataSource、ObjectDataSource等)和模板语法。 6. **API和事件处理**:...

    js分页控件 Tableview

    Tableview是一款基于JavaScript实现的高效分页控件,特别适合用于网页数据展示。它具有轻量级、易用性高、功能丰富的特点,能帮助开发者轻松实现复杂的数据分页效果,极大地提升了用户体验。在网页开发中,特别是在...

    bootstrap 模板4.6 hyper hyper admin Dashboard template

    "js"标签表明这个模板中可能使用了JavaScript来增强交互性和功能。JavaScript库如jQuery、Popper.js或Bootstrap的JS组件可能被集成,以实现下拉菜单、模态框、轮播图等动态效果。此外,可能还有自定义的JavaScript...

Global site tag (gtag.js) - Google Analytics