开发者

dojo datagrid custom sorting server side

I am using dojo.data.ItemFileWriteStore to draw a dojo datagrid (which works fine) and the grid shows properly. I was using client side sorting and that was also working fine. but now I need to change the sorting and do that server side. For this I am trying to use onHeaderCellClick event, using which I am able to run a javascript function.. something like

 gridInfo = {
            store: myJsonStore,
            structure: myStructure
         开发者_如何学C   onHeaderCellClick:getSortedTable
         };

Now here is the getSortedTable function which I want to use to make another call to the server - passing the cell name, Table Name and the sort Order (asc or desc).

 function getSortedTable(e)
    {
  var cellName = e.cell.name;
            var tableName = ?
            var sortOrder = ?
          // getSortedTablefromServer(cellName, sortOrder, tablename)
    }

but the only thihng I am able to get out of from the 'e' parameter is the cell Name and may be the table Name.

  1. How can I get or keep a track of weather it will be ascending order required by the user or is it descending order.
  2. Also - how will I show the little arrow on the header of the column to show the user that the data is in descending or ascending?

Any help is highly appreciated!!

Thanks,


You will likely be better off modifying your data store to handle the server-side sorting rather than the grid (e.g. append the sort criteria as a query parameter to the XHR call triggered by fetch(), rather than sorting the result set client side). The grid should behave exactly as it does with client-side sorting, as it will just reflect the sort order of the data store.

From dojo.data.api.Read regarding fetch():

If a sort parameter is specified, this is a indication to the datastore to 
sort the items in some manner before returning the items.  The array is an array of 
javascript objects that must conform to the following format to be applied to the
fetching of items:
    {
        attribute: attribute || attribute-name-string,
        descending: true|false;   // Optional.  Default is false.
    }
Note that when comparing attributes, if an item contains no value for the attribute
(undefined), then it the default ascending sort logic should push it to the bottom 
of the list.  In the descending order case, it such items should appear at the top of the list.


I think you may change your store. I'm using the grid with the jsonRestStore instead. So the grid is starting a request every time I change the sorting by clicking on a column.

Here is my grid

require([
    "dojox/grid/EnhancedGrid",
    "dojox/data/JsonRestStore",
    "dojox/grid/enhanced/plugins/NestedSorting",
    "dojo/domReady!",
    "dojox/grid/cells/dijit"
], function(DataGrid, JsonRestStore) {
    dataStore = new JsonRestStore({
        target: "/url_to_your_be"
    });
    grid = new DataGrid({
        store: dataStore,
        plugins: {"nestedSorting": true},
        query: "?something=1",
        structure: [
            {
                defaultCell: { editable: false},
                cells: [
                    { name: "col 1", field: "col_1", width: "50px"},
                    { name: "col 2", field: "col_2", width: "50px"}
                ]
            }
        ],
        selectionMode: "single",
        sortFields: [{attribute: 'col_1', descending: false},{attribute: 'col_2', descending: false}]
    }, "yourGridId");
    grid.startup();
});

sortFields is for setting the sort on your first load and can be ignored if you don't need it.

Every time you click in the header it is sending a request like

http//www.yourwebsite.com/url_to_your_be/?something=1&sort(+col_1,+col_2)

Even if you are changing the query

var grid = dijitRegistry.byId('yourGridId');
grid.setQuery("?something=2");

the request will be

`http//www.yourwebsite.com/url_to_your_be/?something=2&sort(+col_1,+col_2)`

Now you can split the $_GET data in your BE and do the sort

My BE is sending the data as json object:

[{"col_1": 1, "col_2": "something"},...]

with the header of data range:

Content-Range: items=0-10/100
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜