zoukankan      html  css  js  c++  java
  • dojo grid 分页

    dojo很强大,也很方便,但是缺少文档,只能看源代码,也挺好的,就是费时间。。。

    网上找了一段代码(找不到原出处了,不好意思),也看了dojo自带的demo,放一段可以执行的页面代码这里。把ip换成自己架设的js服务器(esi的CDN貌似有点问题)即可

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      5 
      6 <title>dojo grid 分页</title>
      7 
      8 <link rel="stylesheet" href="http://192.168.30.86/arcgis_js_api/library/3.12/dojo/resources/dojo.css">
      9 <link rel="stylesheet" href="http://192.168.30.86/arcgis_js_api/library/3.12/dijit/themes/claro/claro.css">        
     10 <link rel="stylesheet" href="http://192.168.30.86/arcgis_js_api/library/3.12/dijit/themes/claro/document.css">
     11 <link rel="stylesheet" href="http://192.168.30.86/arcgis_js_api/library/3.12/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">
     12 <link rel="stylesheet" href="http://192.168.30.86/arcgis_js_api/library/3.12/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css">
     13 
     14 <style>
     15     #gridDiv{
     16     width: 60em;
     17     height: 35em;
     18     border: 1px solid #D5CDB5;
     19 }
     20 </style>
     21 <script src="http://192.168.30.86/arcgis_js_api/library/3.12/init.js"></script>
     22 <script>
     23 
     24 require([
     25         "dojo/parser", 
     26         "dojox/grid/EnhancedGrid", //表格
     27         "dojo/data/ItemFileWriteStore",//数据
     28         "dojox/grid/enhanced/plugins/DnD", //拖拽
     29         "dojox/grid/enhanced/plugins/Pagination",//分页
     30 "dojox/grid/enhanced/plugins/nestedSorting",//嵌套排序
     31         "dijit/form/Button","dojo/dom","dojo/on","esri/config","esri/lang","dojo/domReady!"
     32     ],
     33     function () {
     34     //获取数据    
     35     var data = {
     36         identifier : 'id',
     37         items : []
     38     };
     39     var data_list = [{
     40             col1 : "normal",
     41             col2 : false,
     42             col3 : 'But are not followed by two hexadecimal',
     43             col4 : 29.91
     44         }, {
     45             col1 : "important",
     46             col2 : false,
     47             col3 : 'Because a % sign always indicates',
     48             col4 : 9.33
     49         }, {
     50             col1 : "important",
     51             col2 : false,
     52             col3 : 'Signs can be selectively',
     53             col4 : 19.34
     54         }
     55     ];
     56     var rows = 60;
     57     for (var i = 0, l = data_list.length; i < rows; i++) {
     58         data.items.push(dojo.mixin({
     59                 id : i + 1
     60             }, data_list[i % l]));
     61     }
     62     var store = new dojo.data.ItemFileWriteStore({
     63             data : data
     64         });
     65 
     66     dojo.ready(function () {
     67         /*set up layout*/
     68         var layout = [[{
     69                     name : 'slector',
     70                     field : 'Sel',
     71                     editable : true,
     72                     width : '20px',
     73                     cellStyles : 'text-decoration: none; cursor:default; text-align: center;position: relative; left: -10px',
     74                     headerStyles : 'text-align: center;',
     75                     type : dojox.grid.cells.Bool//选择器
     76                 }, {
     77                     'name' : 'Column 1',
     78                     'field' : 'id'
     79                 }, {
     80                     'name' : 'Column 2',
     81                     'field' : 'col2'
     82                 }, {
     83                     'name' : 'Column 3',
     84                     'field' : 'col3',
     85                     'width' : '230px'
     86                 }, {
     87                     'name' : 'Column 4',
     88                     'field' : 'col4',
     89                     'width' : '230px'
     90                 }
     91             ]];
     92         /*create a new grid:*/
     93         var grid = new dojox.grid.EnhancedGrid({
     94                 id : 'grid',
     95                 store : store,
     96                 structure : layout,
     97                 plugins : {
     98                     nestedSorting:true,//嵌套排序
     99                     dnd : false,//数据拖拽
    100                     pagination : {//分页
    101                         pageSizes :[ "10", "20", "50","100", "ALL"],//最后一个只是标识,不显示的
    102                         //[10, 20, 50, Infinity],//或者换这种写法
    103                         //description: true,//描述,第1-20个,共60个。默认是true
    104                         //sizeSwitch: true,//分页大小切换,默认是true
    105                         maxPageStep : 8,
    106                         gotoButton : true,//转至第几页,默认为false
    107                         defaultPage : 1,
    108                         defaultPageSize : 20,
    109                         position: "bottom"//有三种方式,top, bottom, both,默认是bottom
    110                     },
    111                 },
    112                 rowSelector : '20px'
    113             },
    114                 document.createElement('div'));
    115         /*append the new grid to the div*/
    116         dojo.byId("gridDiv").appendChild(grid.domNode);
    117         /*Call startup() to render the grid*/
    118         grid.startup();
    119     });
    120 
    121 });
    122 </script>
    123 </head>
    124 <body class="claro">
    125 <div id="gridDiv">
    126 </div>
    127 </body>
    128 </html>
    gird分页

     效果如下图

    其他的再说吧

  • 相关阅读:
    批量新增百万条数据 十百万条数据
    sqlserver 组内排序
    EF ++属性会更新实体
    Entity Framework Core: A second operation started on this context before a previous operation completed
    abp Cannot access a disposed object. A common cause of this error is disposing
    abp xunit Can not register IHostingEnvironment. It should be a non-abstract class. If not, it should be registered before.”
    hangfire enqueued but not processing(hangfire 定时任务入队列但不执行)
    EF 更新实体 The instance of entity type 'BabyEvent' cannot be tracked because another instance
    datatable to entiy list 不支持可空类型和枚举类型
    webapi 设置不显示接口到swaggerUI
  • 原文地址:https://www.cnblogs.com/feedback/p/4789776.html
Copyright © 2011-2022 走看看