当前位置: 首页 > 工具软件 > jsoneditor > 使用案例 >

html渲染json的插件,[ json editor] 如何在网页中使用Json editor 插件

赵渊
2023-12-01

【目的】 在自己的网页上交由用户进行json的可视化编辑

【难点】1、json中含有递归嵌套的数组和对象

2、json中的基本值类型有数字、字符串和布尔型

【方法】使用daviddurman的FlexiJsonEditor工具

【下载】https://github.com/DavidDurman/FlexiJsonEditor

【使用】一 、 在网页html前端添加以下代码

注:1 第一行是样式文件

2 第二行引用了本地的jquery

3 第三行是jsoneditor.js 脚本实现文件

4 第四行不是必须的,有些浏览器自带了json.js 脚本

5 第五行在网页中定义一个占位符

6 第六行定义了一个文本的标签,以文本的形式展示json,响应了onchange方法,方便文本修改之后,去改动jsoneditor

二、在js脚本中填写以下代码

var JsonList= { any: { json: { value: 1 } } };

$('#SingleJsonEditor').jsonEditor(JsonList, { change: function (rdata) {$('#SingleTxt').val(JSON.stringify(rdata)); }});

注 : 1 定义了一个json类型

2 加载了jsoneditor控件,并且发生改变时,通知singleTxt去变更

如果有其他不懂,请参考https://github.com/DavidDurman/FlexiJsonEditor

这是一个官方的例子:http://www.daviddurman.com/flexi-json-editor/jsoneditor.html

如何正确的使用json?如何在.Net中使用json?

什么是json json是一种轻量级的数据交换格式,由N组键值对组成的字符串,完全独立于语言的文本格式. 为什么要使用json 在很久很久以前,调用第三方API时,我们通常是采用xml进行数据交互,但 ...

JSON(五)——同步请求中使用JSON格式字符串进行交互(不太常见的用法)

在同步请求中使用JSON格式进行数据交互的场景并不多,同步请求是浏览器直接与服务器进行数据交互的大多是用jsp的标签jstl和el表达式对请求中的数据进行数据的渲染.我也是在一次开发中要从其它服务器提 ...

json数据处理:读取文件中的json字符串,转为python字典

方法1: 读取文件中的json字符串, 再用json.loads转为python字典 import json str_file = './960x540/config.json' with open( ...

在SqlServer 中解析JSON数据 [parseJSON] 函数 数据库中 解析JSON

使用如下: SELECT * FROM parseJSON('{ "联系人": { "姓名": "huang", "网名&quot ...

《JSON笔记之三》---postman中传入json串

1.关于如何使用postman工具,简单的介绍一下, 用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等 ...

asp.net中json格式化及在js中解析json

类: public class UploadDocumentItem { public UploadDocumentItem() { } public string DocMuid { get; se ...

MVC中处理Json和JS中处理Json对象

MVC中处理Json和JS中处理Json对象 ASP.NET MVC 很好的封装了Json,本文介绍MVC中处理Json和JS中处理Json对象,并提供详细的示例代码供参考. MVC中已经很好的封装了 ...

在JS和.NET中使用JSON (以及使用Linq to JSON定制JSON数据)

转载原地址: http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如 ...

Python 3 中的json模块使用

1. 概述 JSON (JavaScript Object Notation)是一种使用广泛的轻量数据格式. Python标准库中的json模块提供了JSON数据的处理功能. Python中一种非常常 ...

随机推荐

Visual Studio 中 Build 和 Rebuild 的区别

因为之前写的程序比较小,编译起来比较快,所以一直都没有太在意 Build 和 Rebuild 之间的区别,后来发现两个还是有很大不同. Build 只针对在上次编译之后更改过的文件进行编译,在项目比较 ...

3.Sqrt(x)

要求:Implement int sqrt(int x).  Compute and return the square root of x. 解决方法: 1.牛顿法(Newton's method) ...

[转]【HTTP】Fiddler(二) - 使用Fiddler做抓包分析

本文转自:http://blog.csdn.net/ohmygirl/article/details/17849983 上文( http://blog.csdn.net/ohmygirl/articl ...

设计模式之桥接模式(Bridge)--结构模型

1.意图 将抽象部分与它的实现部分分离,使它们可以独立地变化. 2.适用性 你不希望在抽象和它的实现部分之间有一个固定的绑定关系. 类的抽象与它的实现都应该可以通过子类的方式加以扩展. 抽象部分与实现 ...

python基础4

内容概要: 一.递归 递归就是函数本身调用自己,直到满足指定条件之后一层层退出函数 递归特性: 必须有一个明确的结束条件 每次进入更深一层递归时,问题规模相比上次递归都应有所减少 递归效率不高,递归层 ...

rm删除文件时排除特定文件

删除当前目录下所有的*.txt文件,但除了test.txt文件: rm `ls *.txt | grep -v test.txt` 或者 rm `ls *.txt | egrep -v test.tx ...

JS如何实现真正的对象常量

前言 众所周知ES6新增的const关键字可以用来声明常量,但是它只对基本数据类型生效(Number.String.Boolean等),那如果我们想声明一个常量对象呢?该如何实现,Object内置对象 ...

docker_weave

安装 curl -L git.io/weave -o /usr/local/bin/weave chmod a+x /usr/local/bin/weave 启动 weave weave launch ...

JS字符串相关操作

01.插入 参数说明:str表示原字符串变量,flg表示要插入的字符串,sn表示要插入的位置 function insert_flg(str,flg,sn){ var newstr="&qu ...

02_linux常用指令

[用户管理] 查看当前用户     whoami 新建用户     sudo adduser higginCui 查看新建用户     ls /home 使用新建用户登录     su -l higg ...

 类似资料: