odoo13 在form表单里定义按钮直接调用js方法 ，格式化json数据并展示

1. 定义被form调用的js方法：

通过 JSON.stringify(value, replacer , space); 将json数据转换为string类型，

value: 要格式化的数据，

replacer: 可选，函数或对象,如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中

space: 为缩进用的空白字符串

odoo.define('demo.show_json_temp', function (require) {
    "use strict";

    var FormView = require('web.FormView');
    var FormRenderer = require('web.FormRenderer');
    var view_registry = require('web.view_registry');

    var SpecJsonFormRenderer = FormRenderer.extend({
        events: _.extend({}, FormRenderer.prototype.events, {
            'click .show_json': 'show_json',
        }),

        init: function () {
            this._super.apply(this, arguments);
        },

        // form表单里调用的按钮方法
        show_json: function (ev) {
            let self = this;
            let res_id = self.state.res_id;
            // 调用模型方法并返回数据，将返回的数据展示在一个form表单里
            self._rpc({
                model: 'xxx',
                method: 'get_json_data',
                args: [res_id]
            }).then(function (data){
                // 获取到要格式化的数据，data为json类型
                let jsonStr = self.syntaxHighlight(data);
                
                // 将格式化后的数据展示到指定的form表单上
                self.do_action({
                    name: 'xxx.json',
                    type: 'ir.actions.act_window',
                    res_model: '模型名称xxx',
                    views: [[false, 'form']],
                    target: 'new',
                    // 这里的 ins 是我自己定义的一个字段，可以在form视图里展示自定义的信息，没有定义 ins 这个属性的话在这里用不了 ins
                    context: {'ins': "<pre>" + jsonStr + "</pre>"}
                });

            });
        },

        // 格式化json数据，并添加样式
        syntaxHighlight: function(json) {
            if (typeof json != 'string') {
                json = JSON.stringify(json, undefined, 2);
            }
            json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            });
        }

    })

    
    var SpecJsonFormView = FormView.extend({
        jsLibs: [],
        config: _.extend({}, FormView.prototype.config, {
            Renderer: SpecJsonFormRenderer,
        }),
    });

    view_registry.add('show_spec_json', SpecJsonFormView);

    return {
        Renderer: SpecJsonFormRenderer,
    };

});

2. 调用js定义的方法：

<!-- js_class的值为上面的js注册的名称 -->
<form js_class="show_spec_json">
    <header>
        <button string="预览json文件" class="show_json"/>
    </header>
</form>

3. 格式化json文件的css定义：

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

4.展示效果：

其它相关备注：

1. 自定义信息展示

修改原始form_renderer.js文件：

文件路径：项目名称/addons/web/static/src/js/views/form/form_renderer.js

    _renderNode: function (node) {
        var renderer = this['_renderTag' + _.str.capitalize(node.tag)];
        if (renderer) {
            return renderer.call(this, node);
        }
        if (node.tag === 'div' && node.attrs.name === 'button_box') {
            return this._renderButtonBox(node);
        }
        if (_.isString(node)) {
            return node;
        }

        // 以下为加入的自定义代码，识别<ctx>标识
        if (node.tag === 'ctx'){
            return $('<' + node.tag + '>' + this.state.context[node.attrs['key']] + '</' + node.tag + '>', {});
        }
        return this._renderGenericTag(node);
    },

2. form里调用自定义的<ctx>属性

<record model='ir.ui.view' id="show_form">
    <field name="name">示例</field>
    <field name="model">模型名称xxx</field>
    <field name="arch" type="xml">
        <form >
            <sheet>
                <group>
                    <!-- ins的值可以自己随意定义，用到的时候和这里定义的一致就可以了 -->
                    <ctx key="ins"/>
                </group>
            </sheet>
        </form>
    </field>
</record> 

参考文献：

https://www.cnblogs.com/wangdianchao/p/15151557.html

https://www.cnblogs.com/le0zh/p/show-json-in-html.html

在html页面中展示JSON

https://www.cnblogs.com/wangdianchao/p/15411203.html