我在學習如何在Django中使用基於javascript的可編輯網格系統。對於一些新的javascript以及django中的ajax和json處理來說,這非常令人困惑。django,slickgrid和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/
這裏的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加載?
我必須檢查一下。猜這意味着很多發現和替換媒體網址哈哈。我得到了[dojango](http://code.google.com/p/dojango/),但它看起來需要一些調整纔能有可編輯的網格。 –