jsoneditor显示Json data
Git开源地址:https://github.com/josdejong/jsoneditor/blob/master/docs/api.md
1.引用JS文件
<!-- jsoneditor -->
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/JSONeditor/jsoneditor-min.css")">
<script type="text/javascript" src="@Url.Content("~/Content/JSONeditor/jsoneditor-min.js")"></script>
<!-- ace code editor -->
<script type="text/javascript" src="@Url.Content("~/Content/JSONeditor/lib/ace/ace.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/JSONeditor/lib/ace/mode-json.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/JSONeditor/lib/ace/theme-textmate.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/JSONeditor/lib/ace/theme-jsoneditor.js")"></script>
<!-- json lint -->
<script type="text/javascript" src="@Url.Content("~/Content/JSONeditor/lib/jsonlint/jsonlint.js")"></script>
2.显示Json数据
<div class="control-group">
<label class="control-label">Model内容</label>
<div class="controls">
<div id="SchemaContent"></div>
</div>
</div>
3.JS 方法
<script type="text/javascript">
// 表单验证
$(document).ready(function () {
$("#Name").addClass("validate[required,minSize[2],maxSize[20]]");
$("#Content").addClass("validate[required]");
$("form").validationEngine(
{
promptPosition: "bottomLeft",
focusFirstField: true
});
var container = document.getElementById('DataContentInfo');
var options = {
mode: 'code',
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
error: function (err) {
alert(err.toString());
}
};
//var editor = new jsoneditor.JSONEditor(container);
var jdVar = $("#Content").val();
var jsonData = JSON.parse(jdVar);
//editor.set(jsonData);
var editor = new jsoneditor.JSONEditor(container, options, jsonData);
$("form").submit(function () {
var success = $(this).validationEngine('validate');
if (success) {
var con = $("#Content").val(editor.getText());
var submitButton = $("input[type='submit']");
submitButton.attr('disabled', 'disabled');
$(this).ajaxSubmit(function (result) {
if (result == '1') {
Prompt.success("修改成功");
location.href = "@Url.Action("Index", "datamodel", new { id = ViewBag.ParentId })";
}
else {
Prompt.error('修改失败!');
}
});
}
return false;
});
});
</script>
jsoneditor显示Json data的更多相关文章
- SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data错误的解决
记录个报错: 问题描述: 经过服务器生成图片返到前台时,在火狐浏览器中下载图片或打开图片时报错:SyntaxError: JSON.parse: unexpected character at lin ...
- jstree中json data 的生成
jstree中json data 的生成 jstree官网上给出的json数据格式是这样的: <span style="font-size:14px;">// A ...
- directly receive json data from javascript in mvc
if you send json data to mvc,how can you receive them and parse them more simply? you can do it like ...
- Guzzle Unable to parse JSON data: JSON_ERROR_SYNTAX - Syntax error, malformed JSON
项目更新到正式平台时,出现Guzzle(5.3) client get请求出现:Unable to parse JSON data: JSON_ERROR_SYNTAX - Syntax error, ...
- WPF:使用Json.NET在TreeView中树形显示JSON数据
原文 WPF:使用Json.NET在TreeView中树形显示JSON数据 据 读者可以参考这个开源的可以树形显示XML和JSON的工具: Mgen Object 603:XML/JSON树形显示小工 ...
- SQL to JSON Data Modeling with Hackolade
Review: SQL to JSON data modeling First, let’s review, the main way to represent relations in a rela ...
- 【转】让浏览器格式化显示JSON数据之chrome jsonView插件安装
jsonView 用来让Chrome浏览器能格式化的显示JSON数据. 以上是网上找的方式,且试验成功! 步骤: 1.打开 https://github.com : 2.搜索 jsonView 链接: ...
- SyntaxError: JSON.parse: bad control character in string literal at line 1 column 16 of the JSON data
JSON.parse转化Json字符串时出现:SyntaxError: JSON.parse: bad control character in string literal at line 1 co ...
- PHP convet class to json data
/********************************************************************* * PHP convet class to json da ...
随机推荐
- Javascript DOM编程艺术
Chapter 0 为什么读这本书?作为js入门书,补基础,由于本书代码demo较简单,并没有贴代码,只记录一些自己要注意的知识点以及代码脚本 Chapter 1: javascript简史 DOM全 ...
- ubuntu 14.04 安装搜狗拼音输入法
原文:ubuntu 14.04 安装搜狗拼音输入法 ubuntu桌面系统下终于有了好用的拼音法-搜狗拼音输入法,欲在ubuntu 14.04下安装搜狗拼音输入法相当的简单. 先到搜狗拼音官网下载对应的 ...
- 移动web开发经验总结(1) (转)
1.<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-sca ...
- Git 1.9.5.msysgit.1
Git 1.9.5.msysgit.1 发布,现已提供下载:https://github.com/msysgit/git/archive/v1.9.5.msysgit.1.zip. Git是一个开源的 ...
- Hadoop它——跑start-all.sh时间namenode不启动
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46353211 近期遇到了一个问题,运行start-all.sh的时候发现JPS一下 ...
- 蜘蛛牌 (DFS)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1584 全部状态都判断一遍 代码: #include <stdio.h> #include ...
- ASPNETPager常用属性
<webdiyer:AspNetPager ID="pager" runat="server" class="page" FirstP ...
- linux_vim_快捷键
1.vim ~/.vimrc 进入配置文件 如果不知道vimrc文件在哪,可使用 :scriptnames 来查看 set nu #行号 set tabstop=4 #一个tab为4个空格长度 set ...
- Postman 是一个非常棒的Chrome扩展,提供功能强大的API & HTTP 请求调试
Postman 是一个非常棒的Chrome扩展,提供功能强大的API & HTTP 请求调试 需要FQ才能安装,使用时应该不用FQ了,除非使用postman的历史记录功能: 非常棒的C ...
- Redis 上实现的分布式锁
转载Redis 上实现的分布式锁 由于近排很忙,忙各种事情,还有工作上的项目,已经超过一个月没写博客了,确实有点惭愧啊,没能每天或者至少每周坚持写一篇博客.这一个月里面接触到很多新知识,同时也遇到很多 ...