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>