用于道场增强网格的垂直滚动条

时间:2017-08-18 16:30:57

标签: dojo dojox.grid.datagrid

第一次加载时在网格上显示所需的滚动条...它在chrome中工作,但在IE中没有...

为此,我需要一个事件,当加载到网格的数据完成时。

我尝试了onFetchComplete'事件,它被多次调用,因为它使用延迟加载方法......

也改变了dojoxGridContent'的css。要应用overflow-y的类:滚动...

但是不起作用......

任何人都可以帮我解决这个问题。

源代码:



var mygrid = new EnhancedGrid({
    id: "grid",
    store: gridStore, //Data store passed as input
    structure: gridStructure, //Column structure passed as input
    autoHeight: true,
    autoWidth: true,
    initialWidth: width,
    canSort : true,
    plugins: {
        filter: {
          //Filter operation
          isServerSide: true,
          disabledConditions : {"anycolumn" : ["equal","less","lessEqual","larger","largerEqual","contains","startsWith","endsWith","equalTo","notContains","notEqualTo","notStartsWith","notEndsWith"]},
          setupFilterQuery: function(commands, request){
              if(commands.filter && commands.enable){
                  //filter operation
                }
              }
            }
}, dojo.byId("mydatagrid"));   


mygrid.startup();

 #grid {
    height: 20em;
}

<div id="container" class="claro">
    <div id="mydatagrid" style="height:200px"></div>
</div>
&#13;
&#13;
&#13;

由于

1 个答案:

答案 0 :(得分:0)

在“网格”选项中,您只需要为autoHeight属性选项指定一个值(要显示的行数),例如autoHeight: 10将显示10行的范围(带滚动)

您可以查看此工作Fiddle

或参见下面的代码段(阻止过滤器iFrame的问题)

require(["dojox/grid/EnhancedGrid", 
         "dojo/data/ItemFileWriteStore",
         "dojox/grid/enhanced/plugins/Filter",
         "dojo/parser", 
         "dojo/on", 
         'dojo/domReady!'], 
  function(EnhancedGrid, ItemFileWriteStore, Filter, parser, on) {
    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(dojo.mixin({
        id: i + 1
      }, data_list[i % l]));
    }


    var gridStore = new ItemFileWriteStore({
      data: data
    });

    var gridStructure = [
      [{
          'name': 'Column 1',
          'field': 'id'
        },
        {
          'name': 'Column 2',
          'field': 'col2'
        },
        {
          'name': 'Column 3',
          'field': 'col3',
          'width': '230px'
        },
        {
          'name': 'Column 4',
          'field': 'col4',
          'width': '230px'
        }
      ]
    ];
    
    var mygrid = new EnhancedGrid({
      id: "grid",
      store: gridStore, //Data store passed as input
      structure: gridStructure, //Column structure passed as input
      autoHeight: 10,
      autoWidth: true,
      initialWidth: 100,
      canSort: true,
      plugins: {
        filter: {
          //Filter operation
          isServerSide: true,
          disabledConditions: {
            "anycolumn": ["equal", "less", "lessEqual", "larger", "largerEqual", "contains", "startsWith", "endsWith", "equalTo", "notContains", "notEqualTo", "notStartsWith", "notEndsWith"]
          },
          setupFilterQuery: function(commands, request) {
            if (commands.filter && commands.enable) {
              //filter operation
            }
          }
        }
      }
    },"mydatagrid");


    mygrid.startup();  
                  

         
  }
);        
#grid {
    height: 20em;
}
html, body {
    height: 100%;
    padding: 0;	
    margin: 0;
    font-family: Lucida Sans,Lucida Grande,Arial !important;
    font-size: 13px !important;
    background: white;
    color: #333;
}
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" rel="stylesheet"/>

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>


<div id="container" class="claro">
    <div id="mydatagrid" style="height:200px"></div>
</div>

相关问题