Dojo DataGrid的高度调整大小不起作用 [英] Dojo DataGrid height resize not working
本文介绍了Dojo DataGrid的高度调整大小不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用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的高度调整大小不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
