ajax - django、slickgrid 和 json 加载

Question

我正在尝试学习如何在 Django 中使用基于 javascript 的可编辑网格系统。对于刚接触 javascript 以及 django 中的 ajax 和 json 处理的人来说，这非常令人困惑。

我一直在看SlickGrid因为它似乎也做了我想要的事情，主要是快速排序、过滤和搜索的可编辑字段。我愿意接受具有类似功能的其他软件包。

我一直坚持用我的 json 填充网格。我什至不确定是 js 还是 json 的格式有问题。

这是一个简化的示例。

我使用以下 View “提供”json:

from django.core.serializers import serialize

def json_testing(request):
    json = serialize("json", FooBar.objects.all())
    return HttpResponse(json, mimetype='application/json')
# urls.py is configured to access this at /json_testing/

这是 www.example.com/json_testing/上 json 的输出:

[
  - {
        pk: 1
        model: "myapp.foobar"
      - fields: {
            foo: "test"
            bar: "test"
        }
    },
  - {
        pk: 2
        model: "myapp.foobar"
      - fields: {
            foo: "test2"
            bar: "test2"
        }
    }
]    

这是我的模板:

{% extends 'base.html' %}
{% block head %}
<title>SlickGrid example 1: Basic grid</title>
<link rel="stylesheet" href="/static/SlickGrid/slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="/static/SlickGrid/css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="/static/SlickGrid/examples/examples.css" type="text/css" media="screen" charset="utf-8" />
{% endblock %}
{% block content %}
<div width="100%">
    <div id="myGrid" style="width:600px;height:500px;display:none;"></div>
</div>
<script src="/static/SlickGrid/lib/jquery-1.4.3.min.js"></script>
<script src="/static/SlickGrid/lib/jquery.event.drag-2.0.min.js"></script>
<script src="/static/SlickGrid/slick.core.js"></script>
<script src="/static/SlickGrid/slick.grid.js"></script>

<script type="text/javascript">
var grid;

var columns = [
    {id:"foo", name:"Foo", field:"foo"},
    {id:"bar", name:"Bar", field:"bar"}
];

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
};

$(function() {
    var data = [];
    for (var i = 0, i < 50; i++) {
        data[i] = {
            foo: "foo_" + i,
            bar: "bar_" + i,
        };
    }

// I want to replace the loop to generate code above with json
// I think something along the lines of this
//    $.get_json('/json_testing/')

    grid = new Slick.Grid("#myGrid", data, columns, options);

    $("#myGrid").show();
})
</script>
{% endblock %}

我知道这个问题的答案可能非常基本。也许它是如此基础，这就是为什么很难在网络上找到现有答案的原因。

我从其他答案、博客等中尝试过的每种加载 json 的方法都会导致呈现空白网格。 我需要做什么才能加载我的 json？

Answer 1

我在 Ajax + slickgrid 方面遇到了很多麻烦，直到我开始使用 slickgrid 分支，该分支已更新到较新的 jQuery 版本(即使用较新的 ajax 调用)，并且有更好的使用 ajax 的文档。

请参阅我对另一个问题的回答:Simple jQuery SlickGrid JSON example or documentation