问题描述
我正在使用Dojo DataGrid对象尝试一个简单的调整大小行为。 宽度按预期工作正常。但是,height不起作用,Grid仅显示初始渲染值。
这是一个HTML文件的超链接,其中转载了问题。 p>
这是源代码:
<!DOCTYPE html>
<! - https://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html - >
< html>
< head>
< script src =http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js> < /脚本>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css>
< style type =text / css>
@importhttp://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css;
/ *默认情况下,网格需要显式高度* /
#gridDiv {
height:100%;
width:100%;
}
< / style>
< script> dojoConfig = {async:true,parseOnLoad:false}< / script>
< script>
require(['dojo / _base / lang','dojox / grid / DataGrid','dojo / data / ItemFileWriteStore','dojo / dom','dijit / form / Button','dojo / domReady! '],
函数(lang,DataGrid,ItemFileWriteStore,dom,Button){
/ *设置数据存储* /
var data = {
identifier:id
items:[]
};
var data_list = [
{col1:normal,col2:false,col3:'但后面没有两个十六进制',col4 :29.91},
{col1:important,col2:false,col3:'因为一个%符号总是表示',col4:9.33},
{col1:important,col2: col3:'符号可以选择',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});
/ *设置布局* /
var layout = [[
{'name':'列1','field':'id' ':'100px'},
{ 'name':'column 2','field':'col2','width':'100px'},
{'name':'列3','field':'col3' ':'200px'},
{'name':'Column 4','field':'col4','width':'150px'}
]
/ *创建一个新的网格* /
var grid = new DataGrid({
id:'grid',
store:store,
structure:layout,
rowSelector:'20px'});
/ *将新网格附加到div * /
grid.placeAt(gridDiv);
/ *调用startup()来渲染网格* /
grid.startup();
//以编程方式创建一个按钮:
var myButton = new Button({
label:点击我!,
onClick:function(){
dom.byId(parentDiv)style.height =400px;
dom.byId(parentDiv)style.width =400px;
if(grid){
grid.resize();
//grid.update();
dom.byId(result1)。innerHTML =(h:+ dom.byId(parentDiv) .style.height +/ w:+ dom.byId(parentDiv)。style.width);
alert(网格调整大小?);
}
}
},progButtonNode)。startup();
});
< / script>
< / head>
< body class =claro>
< div id =parentDiv>
< div id =gridDiv>< / div>
< / div>
< button id =progButtonNodetype =button>< / button>
< div id =result1>< / div>
< / body>
< script language =javascript>
document.getElementById(parentDiv)。style.height =200px;
document.getElementById(parentDiv)。style.width =200px;
document.getElementById(parentDiv)。style.backgroundColor =blue;
< / script>
< / html>
谢谢,
CWLO。 p>
DataGrid初始化时会缓存其父内容框的大小,并且不会自动检测更改,因此请将网格大小:
grid.resize({w:400,h:400});
如果您想要更一般:
var parentDiv = dom.byId('parentDiv');
grid.resize({w:parentDiv.clientWidth,h:parentDiv.clientHeight});
通过设置 grid._parentContentBoxHeight 到
null
然后调用 grid.resize()
也可以工作,但这很可笑。
I'm trying a simple "resize" behavior with a Dojo DataGrid object. The "width" is working fine as expected. However "height" is not working, and the Grid is displayed only with the initial rendering value.
This is a hyperlink of a HTML file with the problem reproduced.
This is the source code:
<!DOCTYPE html>
<!-- https://dojotoolkit.org/reference-guide/1.10/dojox/grid/DataGrid.html -->
<html >
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"> </script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css";
/*Grid needs an explicit height by default*/
#gridDiv {
height: 100%;
width: 100%;
}
</style>
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script>
require(['dojo/_base/lang', 'dojox/grid/DataGrid', 'dojo/data/ItemFileWriteStore', 'dojo/dom', 'dijit/form/Button', 'dojo/domReady!'],
function(lang, DataGrid, ItemFileWriteStore, dom, Button){
/*set up data store*/
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});
/*set up layout*/
var layout = [[
{'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'}
]];
/*create a new grid*/
var grid = new DataGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px'});
/*append the new grid to the div*/
grid.placeAt("gridDiv");
/*Call startup() to render the grid*/
grid.startup();
// Create a button programmatically:
var myButton = new Button({
label: "Click me!",
onClick: function(){
dom.byId("parentDiv").style.height = "400px";
dom.byId("parentDiv").style.width = "400px";
if (grid){
grid.resize();
//grid.update();
dom.byId("result1").innerHTML = ("h: "+dom.byId("parentDiv").style.height+"/ w:"+dom.byId("parentDiv").style.width);
alert("Was grid resized ?");
}
}
}, "progButtonNode").startup();
});
</script>
</head>
<body class="claro">
<div id="parentDiv">
<div id="gridDiv"></div>
</div>
<button id="progButtonNode" type="button"></button>
<div id="result1"></div>
</body>
<script language="javascript">
document.getElementById("parentDiv").style.height = "200px";
document.getElementById("parentDiv").style.width = "200px";
document.getElementById("parentDiv").style.backgroundColor = "blue";
</script>
</html>
Thanks,
CWLO.
解决方案 DataGrid caches the size of its parent content box when it's initially rendered and it won't automatically detect changes, so give the grid a size:
grid.resize({ w: 400, h: 400 });
If you want to be a bit more general:
var parentDiv = dom.byId('parentDiv');
grid.resize({ w: parentDiv.clientWidth, h: parentDiv.clientHeight });
Erasing the cached value by setting grid._parentContentBoxHeight
to null
and then calling grid.resize()
will also work, but that's pretty hacky.
这篇关于Dojo DataGrid的高度调整大小不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!