gridx的使用

来源：互联网发布：mac是什么档次化妆品编辑：程序博客网时间：2024/06/02 10:27
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>
0 0