在dojo中的Ehancedgrid中使用jsonRest进行分页

时间:2013-09-19 06:32:49

标签: json dojo dojox.grid.datagrid dojox.grid

我在数据库中有100000条记录...我必须在增强网格中一次显示50条,当我向下滚动下一条请求进入服务器并获得下一条50时明智......

我发现这可以通过jsonRestStore来实现....我尝试了但是我没有得到那个..如何使用jsonRest为此目的???? .. plz sugggest me answer

我的代码是

require([
    "dojo/_base/lang", "dojox/grid/EnhancedGrid",
    "dojox/grid/enhanced/plugins/Search","dojox/grid/enhanced/plugins/Filter",
    "dojox/grid/enhanced/plugins/Pagination","dojo/data/ItemFileWriteStore", 
    "dojo/store/JsonRest","dijit/form/Button","dojo/request/xhr", "dojo/dom",
    "dojo/dom-construct", "dojo/json", "dojo/on", "dojox/grid/cells/dijit",
    "dojo/domReady!" 
], function(lang,EnhancedGrid,Search,Filter,Pagination,ItemFileWriteStore,JsonRest,Button,xhr, dom, domConst, JSON, on) {

    xhr("//myipaddress/GridExample/string", {
        handleAs : "json"
    }).then(function(dataa){

        /*  domConst.place("<p>response: <code>" + JSON.stringify(dataa) + "</code></p>", "output"); */

        /* domConst.place("<p>response: <code>" + JSON.stringify(dataa) + "</code></p>", "output"); */

        var mydata=dataa;
        var yourStore = new dojo.data.ItemFileWriteStore({
            data: {
                identifier: "sno",
                /* items: mydata.aa */
                items:mydata
            }
        });

        grid = new EnhancedGrid({
            id:'grid',
            store : yourStore,
            structure : layout,
            rowSelector: '20px',
            plugins: {
                search:true,
                pagination: {
                    pageSizes: ["50","100","500","1000"],
                    description: true,
                    sizeSwitch: true,
                    pageStepper: true,
                    gotoButton: true,
                    maxPageStep: 2,
                    position: "bottom"
                },
                filter: {
                    closeFilterbarButton: true,
                    ruleCount: 5,
                    itemsName: "rows"
                }
            }
        });
        grid.placeAt("myGrid");
        grid.startup();                 

    }, function(err) {
        alert("error");
    }, function(evt) {
    });

    var id=100000;
    var addbutton = new Button({
        onClick: function (){
            id++;
            /* alert(dojox.grid.scroller.firstVisibleRow);
            alert(dojox.grid.scroller.lastVisibleRow); */
            console.log(arguments);
            grid.store.newItem({
                sno:id,
                sname:'san',
                salary:'25000'
            });
            store.save();
            grid.render();
        }
    }, "addRow");

    var removebutton = new Button({
        onClick: function (){
            var items = grid.selection.getSelected();
            alert(items);

            if(items.length){                
                dojo.forEach(items, function(selectedItem){
                    if(selectedItem !== null){                        
                        store.deleteItem(selectedItem);
                        store.save();
                    } 
                }); 
            }
            grid.render();
        }            
    }, "removeRow");  

    var updatebutton = new Button({
        onClick: function (){
        }            
    }, "updateRow");  

    var store1 = new JsonRest({
        target: "http://localhost:7080/GridExample/string"
    });

    store.get(3).then(function(item){
        alert(item);
    });                                   
});

1 个答案:

答案 0 :(得分:0)

我相信你现在必须找到答案。但是为了帮助其他人,你没有将你的JsonRest商店(store1)绑定到网格。

以下是执行此操作的示例代码:

    //jsonstore
    var jsonStore = new dojo.store.Cache(new dojo.store.JsonRest({
        target : "http://localhost:7080/GridExample/string",
        idProperty : "id"
    }), dojo.store.Memory({
        idProperty : "id"
    }));

    grid = new dojox.grid.EnhancedGrid({
        store : dataStore = dojo.data.ObjectStore({
            objectStore : jsonStore
        }),
        id: "grid_id",
        structure : layout,
        rowSelector : '20px',
        selectionMode : "single",
        clientSort : true,
        plugins : {
            selector : true,
            /**nestedSorting : true,**/
            pagination : {
                defaultPageSize : 20,
                pageSizes : [ 20, 50, 100, "All" ],
                description : true, // display the current position 
                sizeSwitch : true, // display the page length menu 
                pageStepper : true, // display the page navigation choices 
                gotoButton : true, // go to page button   
                /*page step to be displayed*/
                maxPageStep : 4,
                /*position of the pagination bar*/
                position : "bottom"
            }

        }
    }, "search_results_grid"); // make sure you have a target HTML element with this id