Question

我在我的grails项目中使用morris.js饼图，现在我尝试在单击按钮后计算一个int并刷新图表。但如果我使用＆＃34;重定向＆＃34;它刷新了整个网站。那么是否有推荐的方法只刷新图表？

GSP：

<g:form controller="blankTest">
    <g:actionSubmit value="Update" action="action"/>
</g:form>
<div id="myfirstchart" style="height: 250px;"></div>

<g:javascript id="test">
    new Morris.Donut({
        // ID of the element in which to draw the chart.
        element: 'myfirstchart',

        label: 'Test',

        resize: true,

        colors : ['#00ff00', '#ff0000', '#ffff00'],

        data: [
            { label: 'Number1', value: ${number}},
            { label: 'Number2', value: ${number1}},
            { label: 'Number3', value: ${number2}}
        ],
    });
</g:javascript>

控制器：

int number = 0

def index() {
    [number: number, number1: 34, number2: 8]
}

def action() {
    number++
    redirect view: 'index'
}

Answer 1

这个想法是通过ajax调用创建一个请求，它会给你一个响应，你将用它来更新你的Morris甜甜圈。

因此，您可以使用表单创建ajax调用。您有两种选择：

在grails 3.x上使用远程标记（out of the box on 1.x and 2.x grails版本或remote tags plugin。使用远程表单，您可以使用动作的响应更新一段html代码，该动作呈现模板。
为井代码实现推荐实现自己的ajax方法会导致远程ajax grails标记在HTML上附加js代码。它根本不好（前端开发人员会杀了你，还有一只小猫猫:)），并且已被弃用。

此ajax请求必须返回一个新的数据模型，可以采用JSON格式，您可以使用js setData方法更新甜甜圈。

<g:form name="form" controller="blankTest">
    <input type="submit" value="Update"/>
</g:form>
<div id="myfirstchart" style="height: 250px;"></div>

<g:javascript id="test">
    //we will need this reference for updating it
    var donut = new Morris.Donut({
        // ID of the element in which to draw the chart.
        element: 'myfirstchart',

        label: 'Test',

        resize: true,

        colors : ['#00ff00', '#ff0000', '#ffff00'],

        data: [
            { label: 'Number1', value: ${number}},
            { label: 'Number2', value: ${number1}},
            { label: 'Number3', value: ${number2}}
        ],
    });

$(document).ready(function(){
   $('#form').submit(function(event){
       event.preventDefault(); //blocks native form submit

       $.ajax('${createLink(controller: 'blankTest', action: 'action')}', {
           success: function (data) {
               var response = $.parseJSON(data);
               donut.setData(response); //updating the donut with json response
           }
       });
   });   

});
</g:javascript>

你的行动应该是这样的

def action() {
    number++
    List result = [
       [label: 'Number1', value: number],
       [label: 'Number2', value: number1],
       [label: 'Number3', value: number2]
    ]

    render result as JSON
}

对于更复杂的JSON，如果您使用的Grails大于v.3.1，请考虑使用JSON views

Grails刷新图表

1 个答案: