django、slickgrid 和 json 加载

Question

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

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

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

这是一个简化的示例。

我使用以下视图“提供”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 的文档。

请参阅我对另一个问题的回答：简单的 jQuery SlickGrid JSON 示例或文档

Answer 2

在尝试了 slickgrid 和 dojo & 之后dojango，我最终在 JQuery 和 django-jqgrid 上取得了成功（尽管并非没有挫败感）。

虽然这不是问题的答案，但对我来说这是解决这个问题的方法。我说的是解决方案，而不是解决方法，因为我不需要 slickgrid，只需要任何可编辑的网格。