showing all fields in a Dojo Data Grid with dojo.store.JsonRest_问答_开发者

showing all fields in a Dojo Data Grid with dojo.store.JsonRest

开发者 https://www.devze.com 2023-03-05 12:17 出处：网络

I have a Dojo Data Grid for displaying contact information that is showing values for only two columns: \"model\" and \"pk\".The other columns are blank, probably because the JSON response from the se

I have a Dojo Data Grid for displaying contact information that is showing values for only two columns: "model" and "pk". The other columns are blank, probably because the JSON response from the server puts the other name/value pairs inside of "fields":

[{"pk": 1, "model": "accounting.contacts", "fields": {"mail_name": "Andy", "city": "Grand Rapids", "zip": "49546", "country": "US", "state": "MI"}}]

What is the best way to get all my fields to show up in the grid?

Here's the relevant view in Django:

def contacts(request):  
    json_serializer = serializers.get_serializer("json")()  
    json_contacts = json_serializer.serialize(Contacts.objects.all(),    ensure_ascii=False)  
    return HttpResponse(json_contacts, mimetype="appl开发者_如何学Pythonication/json")

And here's my Dojo page:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
    data-dojo-config="isDebug: true,parseOnLoad: true">
</script>
<script type="text/javascript">
    dojo.require("dojo.store.JsonRest");
    dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ObjectStore");

    dojo.ready(function(){
        objectStore = new dojo.store.JsonRest({target:"/contacts/"});
        //alert(objectStore);
        dataStore = new dojo.data.ObjectStore({objectStore: objectStore});

        //alert(dataStore);

        layoutGridContacts = [{
            field: 'mail_name',
            name: 'Name',
            width: '200px'
        },
        {
            field: 'model',
            name: 'DB Table',
            width: '100px'
                    ...

        }];

        gridContacts = new dojox.grid.DataGrid({
            query: {
                name: '*'
            },
            store: dataStore,
            clientSort: true,
            structure: layoutGridContacts
        }, dojo.byId("containerGridContacts"));

        gridContacts.startup();
    });
</script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />

    <style type="text/css">
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
        .dojoxGrid table {margin: 0; } html, body { width: 100%; height: 100%;
        margin: 0;}         
    </style>
</head>

<body class="claro">
    <div id="containerGridContacts" style="width: 100%, height: 100%;">
    </div>
</body>

Thanks.

This is really a question of, "How do I interact with a javascript object?" Given the JSON in your question, and assuming you assigned it to the variable obj, you could access mail_name with obj[0]['fields']['mail_name'] or using dot notation, obj[0].fields.mail_name. I haven't used Dojo, but I'd wager you just need to set fields.mail_name as the field in layoutGridContacts.

I was able to get the server to produce a JSON response that does not contain nested objects, so the Dojo Store was able to use it. To do this I changed my view to:

def contacts(request):  
    all_contacts = list(iter(Contacts.objects.values()))  
    json_contacts = simplejson.dumps(all_contacts)  
    return HttpResponse(json_contacts, mimetype="application/json")

Use "fields." in front of your field identifier to access the properties inside fields:

layoutGridContacts = [{
        field: 'fields.mail_name',
        name: 'Name',
        width: '200px'
    },
   ...

You can use formatter method to retrieve the data. For your example it will be something like below

{name:"Name", 
 field: "fields", 
 width: "20%", 
 cellStyles:"background-color:#e3690b;",
 formatter: function(field){ 
             if(!field){return;}
       return field.mail_name;
 }
}