dojo 增强网格未正确显示答案

【问题标题】：dojo enhanced grid not displaying properlydojo 增强网格未正确显示
【发布时间】：2013-03-07 13:01:46
【问题描述】：

// dojo 网格未完全显示.... // 只显示页眉和页脚，但不显示内容.... //我无法发布图片 // 这里是代码 */ //请尽快帮助我

<html>
<head>
<link href="DC_OrderReceipts.css" rel="stylesheet" type="text/css" />
    <style type="text/css">@import "../js/dojo/resources/dojo.css";
@import "../js/dijit/themes/claro/claro.css";
@import "../js/dojox/grid/enhanced/resources/claro/EnhancedGrid.css";
@import "../js/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";

/*Grid need a explicit width/height by default*/
#grid {
    width: 76em;
    height: 20em;
}</style>
<script src='../js/dojo/dojo.js'></script>


<script type="text/javascript">
$('a.orderReceiptsHead').click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
      $(".tab_container #Dashboard").hide("");
    $(".tab_container #OrderHeader").load(href);
    //$(".orderHead").fadeIn("fast"); 
    //$('.orderHead a:hover').css('text-decoration','none');
});
</script>
<script type="text/javascript">
var prevRow = null;
function toggle(it) {

  if (it.className.substring(0, 3) == "sel")
    {it.className = it.className.substring(3, 6);
     prevRow = null;}
  else
    {it.className = "sel" + it.className;
     if (prevRow != null)
       {prevRow.className = prevRow.className.substring(3, 6);}
     prevRow = it;}
}
</script>
<script>
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.data.ItemFileWriteStore");

dojo.ready(function(){
    /*set up data store*/
    var subData = {
      identifier: 'id',
      items: []
    };
    var sub_data_list = [
      { col1: "normal", col2: '20', col3: '98*154-303', col4: '98*154-303', col5: '20-11-2012', col6: '10', col7: '20',col8: '10',col9: 'ST2890GT'},
      { col1: "normal", col2: '20', col3: '98*154-303', col4: '98*154-303', col5: '20-11-2012', col6: '10', col7: '20',col8: '10',col9: 'DHY33OOP'},
      { col1: "normal", col2: '20', col3: '98*154-303', col4: '98*154-303', col5: '20-11-2012', col6: '10', col7: '20',col8: '10',col9: 'ST2880GT'}
    ];
    var rows = 100;
    for(var i=0, l=sub_data_list.length; i<rows; i++){
      subData.items.push(dojo.mixin({ id: i+1 }, sub_data_list[i%l]));
    }
    var subStore = new dojo.data.ItemFileWriteStore({data: subData});

    /*set up layout*/
    var subLayout = [[
      {name: 'Line Number', field: 'id'},
      {name: 'Status', field: 'col2'},
      {name: 'Product Received', field: 'col3',width: "14%"},
      {name: 'Customer Product Received', field: 'col4'},
      {name: 'Date Received', field: 'col5'},
      {name: 'Quantity Expected', field: 'col6'},
      {name: 'Discrepent', field: 'col7'},
      {name: 'Credited', field: 'col8'},
      {name: 'Model Number', field: 'col9'}
    ]];

    /*create a new grid:*/
    var grid2 = new dojox.grid.EnhancedGrid({
        id: 'grid2',    
        query : {}, 
        store: subStore,
        structure: subLayout,
        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(grid2.domNode);

    /*Call startup() to render the grid*/
    grid2.startup();
});

</script>
</head>
<body class="claro">

<div id="gridDiv"></div>

</body>        
</html>

// 如果我更改了 id:'grid' 它工作正常！[在此处输入图像描述][1]

【问题讨论】：

如果我从 id:'grid2' 更改为 id:'grid' 它工作正常...是否必须将 id 指定为 'grid'

标签： javascript grid dojo

【解决方案1】：

嘿，我找到了解决方案，

错误就在该行中，

#grid {
    width: 76em;
    height: 20em;
}

如果我更改了 id:'grid2'，我忘记在上面的行中更改.....

【讨论】：

【解决方案2】：

试试这个：

/*create a new grid:*/
var grid2 = new dojox.grid.EnhancedGrid({    
    query : {}, 
    store: subStore,
    structure: subLayout,
    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"
      }
    }
}, "gridDiv"); //give div id here

/*Call startup() to render the grid*/
grid2.startup();

【讨论】：

有人可以回复吗:(
你包含所有的css文件吗
你错过了css文件点击这个链接http://jsfiddle.net/mkr9/9zmSK/你必须使用claro.css和EnhancedGrid.css