2011-08-23 54 views
3

我在學習如何在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加載?

回答

2

試圖slickgrid後和道場& dojango,我結束了終於找到與jQuery的成功和django-jqgrid(儘管不無沮喪)。

儘管這不是問題的答案,但對於這個問題,這是一個解決方案。我說解決方案,而不是解決方法,因爲我不需要slickgrid,只需要任何可編輯的網格。

2

直到我開始使用已更新到更新的jQuery版本(即使用更新的jQuery調用)的slickgrid分支並且使用ajax的文檔略好時,我在Ajax + slickgrid方面遇到了很多麻煩。

見我回答另一個問題在這裏:Simple jQuery SlickGrid JSON example or documentation

+0

我必須檢查一下。猜這意味着很多發現和替換媒體網址哈哈。我得到了[dojango](http://code.google.com/p/dojango/),但它看起來需要一些調整纔能有可編輯的網格。 –