json2html:将json对象转换为html -买球官网平台

6顶
4踩

json2html是一个基于javascript的html模板库,顾名思义,该库主要用于将json对象转换为html格式。


使用json2html进行json转换,需要先通过json来指定转换规则,比如使用转换对象的名称值或属性值作为dom html元素的属性。以下是几个预留的属性名:

  • tag:指定dom元素的类型(div、span等)
  • html:指定dom元素需要包含的内容
  • children:指定dom元素的下一级内容
示例:

var transform = {'tag':'li','html':'${name} (${age})'};
var data = [
      {'name':'bob','age':40},
      {'name':'frank','age':15},
      {'name':'bill','age':65},
      {'name':'robert','age':24}
];
document.getelementbyid('list').innerhtml = json2html.transform(data,transform);


结果如下:

  • bob (40)
  • frank (15)
  • bill (65)
  • robert (24)

json2html提供了以下两种形式,以便在服务器端和客户端都能使用:

  • jquery插件形式:扩展了jquery的核心库,包含了jquery事件
  • node.js包形式:可用于基于node.js的web服务器
项目买球官网平台官网:
  • 大小: 16.2 kb
6
4
评论 共 13 条 请登录后发表评论
13 楼 2013-05-31 21:45
非常nice,已经有相关的技术了,可以参考下:http://angularjs.org/
或者国内的社区:http://angularjs.cn/
12 楼 2013-05-31 02:30
json is ruling the world now.
11 楼 2013-05-30 20:16
怎么用l?js来用?
10 楼 2013-05-30 13:23
没有类似ext那种html模板机制,对于复杂的json对象,做起来确实比较吃力。
9 楼 2013-05-30 11:13
这个比较适合简单的处理,复杂的处理貌似不适合。

目前使用arttemplate来进行类似的处理
http://aui.github.io/arttemplate/

例子
-------------------------------------------------------------------
8 楼 2013-05-30 09:56
log.debug("测试");log.debug("测试");
7 楼 2013-05-30 08:39
有点像extjs的模板,不过功能比较弱,下一步可以考虑支持运算符、表达式和内建函数
6 楼 2013-05-30 08:15
html模板有个巨大的优势是直观,用浏览器直接打开,所见(基本上大概)即所得。
json模板也许速度会快,但没有了这个优势。特别是复杂的界面,加上循环和分歧等,貌似不大乐观。
5 楼 2013-05-29 18:13
lysvanilla 写道
lihao312 写道
这个? 可以转化其他的? 比较不是ul是div呢?


请注意var transform = {'tag':'li','html':'${name} (${age})'};  
这是转换规则


不好意思 刚刚看到
4 楼 2013-05-29 18:12
lihao312 写道
这个? 可以转化其他的? 比较不是ul是div呢?


请注意var transform = {'tag':'li','html':'${name} (${age})'};  
这是转换规则
3 楼 wangguo 2013-05-29 18:11
lihao312 写道
这个? 可以转化其他的? 比较不是ul是div呢?

可以指定
var transform = {'tag':'li','html':'${name} (${age})'}; 
2 楼 2013-05-29 18:11
var chartdata = { groups:
  [{value:100,label:'day 1'},
   {value:50,label:'day 2'},
   {value:150,label:'day 3'},
   {value:40,label:'day 4'},
   {value:50,label:'day 5'}
]};

var transforms = {
barchart: [
    {tag:'ul',class:'barchart',children:function() {
        return($.json2html(this.groups,transforms.group));
    }}
],
group: [
    {tag:'li',class:'group',children:[
        {tag:'div',class:'bar',style:'height:${value}px;'},
        {tag:'div',class:'label',html:'${label}'}
    ]}
]
};

$('#chart').json2html(chartdata, transforms.barchart);
1 楼 2013-05-29 18:09
这个? 可以转化其他的? 比较不是ul是div呢?

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 实验四 数据库设计实验,包含一个模式7张基本表,详情参考博客。

  • c#-可视化-数据库系统设计综合实验

  • 什么是继承的概念? 继承:可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。

  • 项目运行截图 学生列表 宿管列表 楼宇列表 宿舍列表 列表页面 住宿列表 管理员列表 1.1系统开发基本目标 学生宿舍管理系统的开发主要是为了解决学生住宿及其相关问题,同时满足管理者方便管理的需求。随着各个高校不断扩招,与住宿的同学数量的增多,各种住宿问题大量出现,本着解决问题,便捷为主的目标开发了本系统。本系统方便宿管查询并管理住宿同学的信息,随时了解自己管理部分的动态内容、方便学生查询,增加或者修改删除自己的信息,进行实时缴费等以及方便管理员安排宿管的工作.

  • 一、实验目的 熟悉oracle环境; 熟练掌握和使用pl-sql建立数据库基本表。 使用pl/sql developer操作数据库。 熟练掌握sql 建立关系,及增删改数据。 二、实验环境 oracle环境,pl-sql 三、实验步骤、出现的问题及买球软件推荐的解决方案 4.建立数据库表 建立以下各关系: (1)图书分类(图书分类号,类名): create table 图书分类 (...

  • 实验内容 问题描述:某学院有基本实体集:系、教师、学生和课程。各个实体的属性集为: 系:系编号,系名,地址 课程:课程号,课程名称,开课学期 学生:学号,学生姓名,性别,住址 教师:教工号,教师姓名,办公室 实体间的联系有:每个系有一位系主任,有多位教师;一个教师只能在一个系任职;每个系开设多门不同课程;一门课程只能由一个系负责开设;每门课程只能由一个教师授课,一个教师可以讲授多门课程...

  • 了解信息系统需求分析的方法和步骤,认识并理解数据模型的基本概念和结构,区分逻辑数据模型与物理模型的区别,掌握实体—关系数据模型的构建方法,了解数据建模的case环境,并能够运用case工具对数据库进行设计。

  • 数据库设计实验

  • 北京理工大学面向对象对象技术与方法(java)满分实验报告。请重写(override)其equals( )方法,使得用equals( )比较value 类的两个对象的内容时,相等条件是对象的所有成员分别对应相等。在object类中,equals方法默认使用“==”号来对两个对象进行判断,比较的是两个对象的地址值,这就意味着当两个对象不是同一个时(地址值不一致就不是同一个对象),就返回为false。因此对于两个储存地址不一样但内容相同的对象需要重写...

  • 经过一个学期的数据库课程的学习,我基本上掌握了创建数据库以及对数据库的操作的基础知识。学习了sql数据库中的增、删、改、查等功能,数据库这门课涉及到以前的知识不多,是一门从头学起的课程,即使基础不是很好,只要认真听讲、复习功课,还是一门比较容易掌握的课。 正是由于这门课和以前关系不大,很多知识也从未接触过,因此对于这门课的学习方法就是:理论课上认真听老师讲理论知识,上机课上仔细看老师的演示过程、在电脑上按照老师的演示步骤自己做,遇到自己无法做出来的过程(步骤)请教老师或者同学。 在第一章基础篇里:开篇任

  • 函数依赖是指关系中属性间(或者说是表中字段间)的对应关系。 定义:设 r 为任一给定关系,如果对于 r 中属性 x 的每一个值,r 中的属性 y 只有唯一值与之对应,则称 x 函数决定 y 或称 y 函数依赖于 x ,记作 x—>y。其中,x 称为决定因素。 通俗一点,就是给定一个 x 都有唯一的 y。可以理解为函数 y = f(x); 对于任意的 x 都有唯一的 y ,且 y 的取值由 x...

  • 第1章 绪论 1 .试述数据、数据库、数据库系统、数据库管理系统的概念。 答:  ( l )数据( data ) :描述事物的符号记录称为数据。数据的种类有数字、文字、图形、图像、声音、正文等。数据与其语义是不可分的。解析在现代计算机系统中数据的概念是广义的。早期的计算机系统主要用于科学计算,处理的数据是整数、实数、浮点数等传统数学中的数据。现代计算机能存储和处理的对象十分广泛,表示这些对象

  • 实验内容问题描述:某学院有基本实体集:系、教师、学生和课程。各个实体的属性集为:系:系编号,系名,地址课程:课程号,课程名称,开课学期学生:学号,学生姓名,性别,住址教师:教工号,教师姓名,办公室实体间的联系有:每个系有一位系主任,有多位教师;一个教师只能在一个系任职;每个系开设多门不同课程;一门课程只能由一个系负责开设;每门课程只能由一个教师授课,一个教师可以讲授多门课程;一个学生可以选修多门课...

  • 问题描述 某学院有基本实体集:系、教师、学生和课程。各个实体的属性集为: 系:系编号,系名,地址 课程:课程号,课程名称,开课学期 学生:学号,学生姓名,性别,住址 教师:教工号,教师姓名,办公室 实体间的联系有: 每个系有一位系主任,有多位教师;一个教师只能在一个系任职;每个系开设多门不同课程;一门 课程只能由一个系负责开设;每门课程只能由一个教师授课,一个教师可以讲授多门课程;一个学生可以选修多门课程;一门课程也可以由多个学生选修。 请根据以上需求完成如下操作: (1) 对以上描述进行分析,进行数据库概

  • 实验目的 通过实验,使学生掌握数据库系统设计和开发的一般方法,能够设计并实现简单的数据库系统。 实验要求 熟悉实验室实验环境,掌握实验预备知识,了解实验中故障排除的基本方法。实验中根据实验要求完成相应的任务,并独立完成实验报告。 实验内容 设计的数据库系统可从以下题目中选择,但不限定于以下题目,可自由选择。 需提供系统简要的需求分析,给出大体的功能介绍;完成数据库的概念结构设计,建议用powerdesigner画出系统的逻辑结构图或物理结构图(也可以使用其他工具);任选自己熟悉的数据库管理系统和

  • 一、实验目的 1.掌握触发器的创建、修改和删除操作。 2.掌握触发器的触发执行。 3.掌握触发器与约束的不同。 二、实验环境 硬件平台:pc; 软件平台:windows 7 / sqlserver 2008 r2; 三、实验内容 1、 在 student 表中编写 insert 的触发器,假如每个班的学生不能超过 30 个,如果低于此数,添加可以完成;如果超过此数,则插入将不能实现。 2、 在 ...

  • 给予web ,asp.net 驾校信息管理系统,包含业务流程图,数据流程图 er图 输入输出设计给予web ,asp.net 驾校信息管理系统,包含业务流程图,数据流程图 er图 输入输出设计给予web ,asp.net 驾校信息管理系统,包含业务流程图,数据流程图 er图 输入输出设计

global site tag (gtag.js) - google analytics