准备工作

参考资料:

前言:

因前段时间给老板做了个在线编辑lua文件的小工具,期间用到了上述几个新的API,感觉挺有意思,所以决定做一个在线编辑JSON文件的例子show出来,并重新捋一遍思路。

代码会在 这里 更新,不出意外应该会使用ES6的语法进行编码。

预期效果:

上传一个json文件,在页面中生成一个对应的树形结构;

单击某个节点,会在右侧显示该节点的属性(值类型的子节点);

在节点上点击展开,会展开该节点,显示出该节点下的子节点;

关于数据的一套完整的CRUD操作;

点击下载,获取修改后的json文件;

效果图:

这个Demo的周期应该会很长。。。但是希望能够写Blog把这个过程记录下来,之前实现的那版过于随意,这次会出一个更精致的。

纯前端JSON文件编辑器[0]的更多相关文章

  1. JSON文件导入Unity3d中是空的的问题

    将Json文件的内容在网上在线的Json文件编辑器导出后再导入即可

  2. JavaScript读取本地json文件

    JavaScript读取本地json文件 今天调试了一上午,通过jQuery读取本地json文件总是失败,始终找不出原因,各种方法都试了 开始总以为是不是json格式的问题.高了半天不行 后来读了一个 ...

  3. 基于gulp编写的一个简单实用的前端开发环境好了,安装完Gulp后,接下来是你大展身手的时候了,在你自己的电脑上面随便哪个地方建一个目录,打开命令行,然后进入创建好的目录里面,开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json,打开的速度看你的网速了注意:以下是为了演示 ,我建的一个目录结构,你自己可以根据项目需求自己建目

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

  4. js前端读写文件的方法(json、excel)

    1.前端读取文件的实现 关键:利用文件上传对话框预览本地文件.利用FileReader读取文件 前端预览本地文件 <input tabindex="-1" id=" ...

  5. 纯前端下载pdf链接文件,而不是打开预览的解决方案

    纯前端下载pdf链接文件,而不是打开预览的解决方案 一,介绍与需求 1.1,介绍 XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行 ...

  6. 大前端快闪:package.json文件知多少?

    最近在公司某项目参与了一些前端工作,作为后端抠脚大汉,改点前端细节磕磕绊绊,改点大前端.工程化.HTTP交互倒也还能做到柳暗花明. 于是打算用后端程序猿的视角记录一些{大前端}的知识快闪,也算是帮助读 ...

  7. 本地json文件的编辑器,node-webkit开发的exe程序

    首发:个人博客,更新&纠错&回复 在昨天的dota契合度计算器中,用到了dota英雄数据和dota玩家数据这两个数据库,为了便于网页应用使用,这两个数据库的存储格式是json,即her ...

  8. 纯前端导出pdf文件

    纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...

  9. .net core2.0添加json文件并转化成类注入控制器使用

    上一篇,我们介绍了如何读取自定义的json文件,数据是读取出来了,只是处理的时候太麻烦,需要一遍一遍写,很枯燥.那么有没有很好的办法呢?经过钻研,办法有了. 既然一个一个读取比较麻烦,那么可以把它放入 ...

随机推荐

  1. 深入理解javascript中的富文本编辑

    前面的话 一说起富文本,人们第一印象就是像使用word一样,在网页上操作文档.实际上差不多就是这样.富文本编辑,又称为WYSIWYG (What You See Is What You Get所见即所 ...

  2. 深入理解DOM事件类型系列第二篇——键盘事件

    × 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...

  3. Android之计算缓存大小并且清空缓存

    转载博客:http://www.2cto.com/kf/201503/385492.html 项目中碰到了计算缓存大小和清空缓存的功能,这个很常见的功能,几乎每个APP都有,以为实现很简单,网上搜了一 ...

  4. 浅谈async、await关键字 => 深谈async、await关键字

    前言 之前写过有关异步的文章,对这方面一直比较弱,感觉还是不太理解,于是会花点时间去好好学习这一块,我们由浅入深,文中若有叙述不稳妥之处,还请批评指正. 话题 (1)是不是将方法用async关键字标识 ...

  5. The network bridge on device VMnet0 is not running

    The network bridge on device VMnet0 is not running. The virtual machine will not be able to communic ...

  6. Objective-C中的Block回调模式

    在前面的博客中提到了Block的概念和使用方法,个人感觉Block最爽的用法莫过于在回调时用block.感觉比委托回调和目标方法回调用着要顺手,好不好用还得读者亲自用一下才知道.如果 读者之前用过SS ...

  7. 如何装出高逼格的64位win7系统

    自从有了ghost这个玩艺儿,装系统就不再是什么技术活了,但是一直崇尚纯净.原生.DIY的挨踢男来说,这种千篇一律的系统从来都不是他们想要的.为了榨干硬件的每一滴性能,发挥软件的最大效果,他们喜欢折腾 ...

  8. 如何利用Oracle外部表导入文本文件的数据

    同事最近在忙数据一致性比对工作,需要对不同文本文件中的数据进行比对,有的文件较大,记录较多,如果用普通的文本编辑器打开的话,很显然,会很卡,甚至打不开. 基于此,可将该文本文件的数据导入到数据库中,在 ...

  9. ASP.NET WebForms MapPageRoute 路由配置

    MapPageRoute 应该是 ASP.NET 4.0 中的东西,但现在我是第一次使用它,使用场景是:MVC 混合使用 WebForm,然后对 WebForm 进行路由配置,当然也可以使用 ISAP ...

  10. npm上传自己的项目

    npm安装就不介绍了,自行度娘.本文介绍npm上传 先初始化:npm init 根据提示填完系统介绍信息(package.json): 再登录npmjs: npm login 效果如图: 输入注册的用 ...