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的更多相关文章

  1. SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data错误的解决

    记录个报错: 问题描述: 经过服务器生成图片返到前台时,在火狐浏览器中下载图片或打开图片时报错:SyntaxError: JSON.parse: unexpected character at lin ...

  2. jstree中json data 的生成

       jstree中json data 的生成 jstree官网上给出的json数据格式是这样的: <span style="font-size:14px;">// A ...

  3. 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 ...

  4. 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, ...

  5. WPF:使用Json.NET在TreeView中树形显示JSON数据

    原文 WPF:使用Json.NET在TreeView中树形显示JSON数据 据 读者可以参考这个开源的可以树形显示XML和JSON的工具: Mgen Object 603:XML/JSON树形显示小工 ...

  6. 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 ...

  7. 【转】让浏览器格式化显示JSON数据之chrome jsonView插件安装

    jsonView 用来让Chrome浏览器能格式化的显示JSON数据. 以上是网上找的方式,且试验成功! 步骤: 1.打开 https://github.com : 2.搜索 jsonView 链接: ...

  8. 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 ...

  9. PHP convet class to json data

    /********************************************************************* * PHP convet class to json da ...

随机推荐

  1. Javascript DOM编程艺术

    Chapter 0 为什么读这本书?作为js入门书,补基础,由于本书代码demo较简单,并没有贴代码,只记录一些自己要注意的知识点以及代码脚本 Chapter 1: javascript简史 DOM全 ...

  2. ubuntu 14.04 安装搜狗拼音输入法

    原文:ubuntu 14.04 安装搜狗拼音输入法 ubuntu桌面系统下终于有了好用的拼音法-搜狗拼音输入法,欲在ubuntu 14.04下安装搜狗拼音输入法相当的简单. 先到搜狗拼音官网下载对应的 ...

  3. 移动web开发经验总结(1) (转)

    1.<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-sca ...

  4. 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是一个开源的 ...

  5. Hadoop它——跑start-all.sh时间namenode不启动

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46353211 近期遇到了一个问题,运行start-all.sh的时候发现JPS一下 ...

  6. 蜘蛛牌 (DFS)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1584 全部状态都判断一遍 代码: #include <stdio.h> #include ...

  7. ASPNETPager常用属性

    <webdiyer:AspNetPager ID="pager" runat="server" class="page" FirstP ...

  8. linux_vim_快捷键

    1.vim ~/.vimrc 进入配置文件 如果不知道vimrc文件在哪,可使用 :scriptnames 来查看 set nu #行号 set tabstop=4 #一个tab为4个空格长度 set ...

  9. Postman 是一个非常棒的Chrome扩展,提供功能强大的API & HTTP 请求调试

    Postman 是一个非常棒的Chrome扩展,提供功能强大的API & HTTP 请求调试   需要FQ才能安装,使用时应该不用FQ了,除非使用postman的历史记录功能:   非常棒的C ...

  10. Redis 上实现的分布式锁

    转载Redis 上实现的分布式锁 由于近排很忙,忙各种事情,还有工作上的项目,已经超过一个月没写博客了,确实有点惭愧啊,没能每天或者至少每周坚持写一篇博客.这一个月里面接触到很多新知识,同时也遇到很多 ...