天天看點

dojo分頁

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="../dojo/dojo.js"
        djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dojox.grid.EnhancedGrid");
            dojo.require("dojox.grid.enhanced.plugins.Pagination");
            dojo.require("dojo.data.ItemFileWriteStore");

            dojo.addOnLoad(function() {
                /*set up data store*/
                var data = {
                    identifier: 'id',
                    items: []
                };
                var data_list = [{
                    col1: "normal",
                    col2: false,
                    col3: 'But are not followed by two hexadecimal',
                    col4: 29.91
                },
                {
                    col1: "important",
                    col2: false,
                    col3: 'Because a % sign always indicates',
                    col4: 9.33
                },
                {
                    col1: "important",
                    col2: false,
                    col3: 'Signs can be selectively',
                    col4: 19.34
                }];
                var rows = 200;
                for (var i = 0, l = data_list.length; i < rows; i++) {
                    data.items.push(dojo.mixin({
                        id: i + 1
                    },
                    data_list[i % l]));
                }
                var store = new dojo.data.ItemFileWriteStore({
                    data: data
                });

                /*set up layout*/
                var layout = [
                    [{
                    name: 'Column 1',
                    field: 'id'
                },
                {
                    name: 'Column 2',
                    field: 'col2'
                },
                {
                    name: 'Column 3',
                    field: 'col3',
                    width: "230px"
                },
                {
                    name: 'Column 4',
                    field: 'col4'
                }]];

                /*create a new grid:*/
                var grid = new dojox.grid.EnhancedGrid({
                    id: 'grid',
                    store: store,
                    structure: layout,
                    rowSelector: '20px',
                    plugins: {
                        pagination: {
                            pageSizes: ["25", "50", "100", "All"],
                            description: true,
                            sizeSwitch: true,
                            pageStepper: true,
                            gotoButton: true,
                            /*page step to be displayed*/
                            maxPageStep: 4,
                            /*position of the pagination bar*/
                            position: "bottom"
                        }
                    }
                },
                document.createElement('div'));

                /*append the new grid to the div*/
                dojo.byId("gridDiv").appendChild(grid.domNode);

                /*Call startup() to render the grid*/
                grid.startup();
            });
        </script>
        <link rel="stylesheet" type="text/css" href="../dijit/themes/claro/claro.css" target="_blank" rel="external nofollow" 
        />
        <style type="text/css">
            @import "../dojo/resources/dojo.css";
            @import "../dijit/themes/claro/claro.css";
            @import "../dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
            @import "../dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
            /*Grid need a explicit width/height by default*/ #grid { width: 43em; height:
            20em; }
        </style>
    </head>
    
    <body class=" claro ">
        <div id="gridDiv">
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>

</html>