gridx的使用

最新推荐文章于 2024-06-06 10:03:22 发布

原创最新推荐文章于 2024-06-06 10:03:22 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

dojo 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何利用gridx库给Grid分页插件绑定事件，实现动态更新分页栏的功能。

gridx的使用，主要是绑定事件，给grid的pagination插件绑定事件。

效果如下：

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'gridxTest.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    
    <link rel="stylesheet" type="text/css" href="js/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="js/gridx/resources/claro/Gridx.css" />
    <style type="text/css">
        /*applied to a single gridx instance by ID*/
        #gridContainer {
            width: 600px;
            height: 300px;
        }
    </style>
    <script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
    require([
             "dojo/on",
             "gridx/Grid",
             "gridx/core/model/cache/Async",
             "gridx/modules/VirtualVScroller",
             "gridx/modules/ColumnResizer",
             "gridx/modules/extendedSelect/Row",
             "gridx/modules/SingleSort",
             "gridx/modules/RowHeader",
             "gridx/modules/IndirectSelect",
             "gridx/modules/Pagination",
             "gridx/modules/pagination/PaginationBar",
             "dojo/store/JsonRest",
             "dojo/data/ItemFileWriteStore",
             'dojo/_base/lang',
             "dojo/domReady!"
         ], function(on, Grid, Cache,
             VirtualVScroller, ColumnResizer, SelectRow,
             SingleSort, RowHeader, IndirectSelect,
             Pagination, PaginationBar, Store, ItemFileWriteStore, lang){

             //Create store here...
             //var store = new Store({
             //    target:"student/list"
             //});
             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 = 60;
                 for(var i = 0, l = data_list.length; i < rows; i++){
                     data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
                 }
             var store = new ItemFileWriteStore({
                 data: data
             });

             var grid = new Grid({
                 store: store,
                 cacheClass: Cache,
                 structure:[
                     //{field:"id", name:"id", width:"50px"},
                     //{field:"name", name:"用户名", width:"50px"},
                     {'name': 'Column 1', 'field': 'id', 'width': '100px'},
                  {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
                  {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
                  {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
                 ],
                 selectRowTriggerOnCell: true,
                 modules: [
                     VirtualVScroller,
                     ColumnResizer,
                     SelectRow,
                     SingleSort,
                     RowHeader,
                     IndirectSelect,
                     Pagination,
                     PaginationBar,
                 ]
             });
             
             grid.placeAt("gridContainer");
             grid.startup();
             
             //这段代码可行，但感觉方法不够合适
             //grid.pagination.onSwitchPage = function(currentPage, originalPage){
             //    this.grid.paginationBar.refresh();
             //}
             
             //console.log(grid);
             //on(grid, "switchPage", function(){
             //    alert("123456");
             //});
             
             //console.log(grid);
             
             //console.log(grid);
             //console.log("Pagination.grid::::::"+grid.pagination.grid);
             //grid.pagination.connect("onSwitchPage", function(){
             //    alert("5555555");
             //});
             //console.log(grid);
             
             //这段代码会好点，但是换成on的话就更好了
             grid.pagination.connect(grid.pagination, "onSwitchPage", function(){
                 alert("aaaaaaaa");
             });
             
         });
    </script>
    
  </head>
 
  <body class="claro">
    <div id="gridContainer"></div>
  </body>
</html>