Javascript dojo增强网格未正确显示
//dojo网格未满，无法显示。。。。 //仅显示页眉和页脚，但不显示内容。。。。 //我无法发布图像 //这是密码*/ //请尽快帮助我Javascript dojo增强网格未正确显示,javascript,grid,dojo,Javascript,Grid,Dojo,//dojo网格未满，无法显示。。。。 //仅显示页眉和页脚，但不显示内容。。。。 //我无法发布图像 //这是密码*/ //请尽快帮助我 <html> <head> <link href="DC_OrderReceipts.css" rel="stylesheet" type="text/css" /> <style type="text/css">@import "../js/dojo/resources/dojo.css"; @imp
<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>
@导入“./js/dojo/resources/dojo.css”；
@导入“./js/dijit/themes/claro/claro.css”；
@导入“./js/dojox/grid/enhanced/resources/claro/EnhancedGrid.css”；
@导入“./js/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css”；
/*默认情况下，栅格需要显式的宽度/高度*/
#网格{
宽度：76em；
高度：20em；
}
$（'a.orderReceiptsHead'）。单击（函数（e）{
e、 预防默认值（）；
var href=$（this.attr（'href'）；
$（“.tab_容器#仪表板”）.hide（“”）；
$（“.tab_容器#OrderHeader”）.load（href）；
//美元（“.orderHead”）.fadeIn（“快速”）；
//$（'.orderHead a:hover'）.css（'text-decoration'，'none'）；
});
var-prevRow=null；
功能切换（it）{
if（it.className.substring（0，3）=“sel”）
{it.className=it.className.substring（3,6）；
prevRow=null；}
其他的
{it.className=“sel”+it.className；
if（prevRow！=null）
{prevRow.className=prevRow.className.substring（3,6）；}
prevRow=it；}
}
require（“dojox.grid.EnhancedGrid”）；
require（“dojox.grid.enhanced.plugins.Pagination”）；
require（“dojo.data.ItemFileWriteStore”）；
ready（function（））{
/*设置数据存储*/
变量子数据={
标识符：“id”，
项目：[]
};
变量子数据列表=[
{col1:“正常”，col2:'20'，col3:'98*154-303'，col4:'98*154-303'，col5:'20-11-2012'，col6:'10'，col7:'20'，col8:'10'，col9:'ST2890GT'}，
{col1:“正常”，col2:'20'，col3:'98*154-303'，col4:'98*154-303'，col5:'20-11-2012'，col6:'10'，col7:'20'，col8:'10'，col9:'DHY33OOP'}，
{col1:“正常”，col2:'20'，col3:'98*154-303'，col4:'98*154-303'，col5:'20-11-2012'，col6:'10'，col7:'20'，col8:'10'，col9:'ST2880GT'}
];
var行=100；
对于（var i=0，l=sub_data_list.length；i尝试以下方法：
/*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();
嘿，我找到解决办法了
错误就在那条线上
#grid {
width: 76em;
height: 20em;
}
如果我更改id:'grid2'，我忘了在上面几行中更改…如果我从id:'grid2'更改为id:'grid'，它工作正常…是否必须将id指定为'grid'任何人都可以回答：（你是否包括所有css文件？你错过的css文件遵循此链接你必须使用claro.css和EnhancedGrid.css