загрузка django, slickgrid и json

Question

Я пытаюсь научиться использовать редактируемую сеточную систему на основе javascript с Django. Это немного сбивает с толку тех, кто плохо знаком с javascript, а также с обработкой ajax и json в django.

Я смотрел на 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/

Вот вывод json по адресу www.example.com/json_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 %}

Я знаю, что ответ на этот вопрос, вероятно, довольно простой. Может быть, это так просто, поэтому трудно найти существующий ответ в Интернете.

Каждый метод загрузки json, который я пробовал из других ответов, блогов и т. Д., Приводил к отображению пустой сетки. Что мне нужно сделать, чтобы загрузить мой json?

Answer 1

Попробовав slickgrid и dojo & dojango, я наконец-то добился успеха с JQuery и django-jqgrid (хотя и не без разочарований).

Хотя это не ответ на вопрос, для меня это было решением этой проблемы.Я говорю решение, а не обходной путь, потому что мне не нужна скользящая сетка, просто какая-либо редактируемая сетка.

Answer 2

У меня было много проблем с Ajax + slickgrid, пока я не начал использовать вилку slickgrid, которая была обновлена ​​до более новых версий jQuery (то есть с использованием более новых вызовов ajax), и у меня были немного лучшие документы для использования ajax.

Смотрите мой ответ на другой вопрос здесь: Простой пример JQuery SlickGrid JSON или документация