Ajax django、slickgrid和json加载

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

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

我一直在用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/

以下是json的输出，网址为www.example.com/json\u testing/：

[
  - {
        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 %}

{%extends'base.html%}
{%block head%}
SlickGrid示例1：基本网格
{%endblock%}
{%block content%}
var网格；
变量列=[
{id:“foo”，name:“foo”，字段：“foo”}，
{id:“bar”，name:“bar”，field:“bar”}
];
变量选项={
enableCellNavigation:true，
enableColumnReorder:false
};
$（函数（）{
var数据=[]；
对于（变量i=0，i<50；i++）{
数据[i]={
富：“富”+i，
酒吧：“酒吧”+i，
};
}
//我想用json替换上面生成代码的循环
//我想大概是这样的
//$.get_json（'/json_testing/'））
grid=new Slick.grid（“myGrid”，数据、列、选项）；
$（“#myGrid”）.show（）；
})
{%endblock%}

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

---

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

我在使用Ajax+slickgrid时遇到了很多麻烦，直到我开始使用slickgrid fork，该fork已更新到较新的jQuery版本（即使用较新的Ajax调用），并且有更好的文档来使用Ajax

---

请参见我对另一个问题的回答：

在尝试了slickgrid和dojo&dojango之后，我终于在JQuery和（尽管并非没有挫折感）上找到了成功

---

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

我必须检查它。我猜这意味着很多媒体URL需要重新查找和替换，哈哈。我也开始运行了，但它看起来需要一些调整才能有可编辑的网格。