Dojo DataGrid Not Showing

本文关键字：Showing Not DataGrid Dojo 更新时间：2023-09-26

在我的dojo.xhrGet中，我指定了这个load::

load: function (data) {
    // reset data display containers
    dojo.addClass("search_results", "hide_on_load");
    dojo.byId("search_results_found").innerHTML = "";
    // populate table with new results.
    dojo.byId("search_results_found").innerHTML = "" + data.length + " search result(s) found.";
    // when data is from an XHR request, you must transform it into a store.
    // See: http://stackoverflow.com/questions/2423459/datagrid-in-dojo-with-json-data-from-a-servlet
    var items = dojo.map(data, function (res_row) {
        return {
            'Id': res_row.Id,
            'Name': res_row.Name,
            'VisitType': res_row.VisitType,
            'VisitDate': res_row.VisitDate
        };
    });
    var store = new dojo.data.ItemFileReadStore({
        data: {
            items: items
        }
    });
    var res_layout = [
        {field: 'Id',        name: 'ID',         width: '10%'},
        {field: 'Name',      name: 'Site Name',  width: '50%'},
        {field: 'VisitType', name: 'Visit Type', width: '20%'},
        {field: 'VisitDate', name: 'Visit Date', width: '20%'}
        ];
    // create a new grid:
    var res_grid = new dojox.grid.DataGrid({
        store: store,
        structure: res_layout,
        rowsPerPage: 10
    }, document.createElement('div'));
    // append the new grid to the div "search_results_table":
    dojo.byId("search_results_table").appendChild(res_grid.domNode);
    // Call startup, in order to render the grid:
    res_grid.startup();
    dojo.removeClass("search_results", "hide_on_load");
    standby.hide();
},

html是:

<!-- Search Results Table -->
<div id="search_results" class="hide_on_load">
    <div id="search_results_found"></div>
    <div id="search_results_table"></div>
</div>

在这个脚本的末尾，网格没有显示。

我删除了hide_on_load css类选择器，这样我就可以排除它作为一个问题。但是，这并没有帮助。

查看控制台，没有错误记录。

同样，写入各种对象(res_grid, store等)都会产生看起来正确的输出。

谁能提供一些帮助，如何得到它的显示?

谢谢!

更新:

当我检查DOM后，这段代码已经运行，我看到与标题创建的表，但当我去寻找实际的表与搜索结果(在div class=dojoxGridContent下)，它不存在。

更新2:

我也有指定的样式:

<style type="text/css">
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
    .dojoxGrid table { margin: 0; }
</style>

确保通过放置网格的div的style属性设置大小，并且不要忘记为网格导入CSS文件，如:

<style type="text/css">
    @import "dojoroot/dojox/grid/resources/Grid.css";
    @import "dojoroot/dojox/grid/resources/soriaGrid.css";
    .dojoxGrid table {
        margin: 0;
    }
</style>

注意:用你使用的任何主题替换soria…

…不要忘记设置网格的dom节点的大小:

<div id="gridnode" style="width:100%; height:500px;"></div>

如果您不想要固定高度，您可以使用autoHeight: true声明网格。

var res_grid = new dojox.grid.DataGrid({
        store: store,
        structure: res_layout,
        rowsPerPage: 10,
        autoHeight: true
    }, document.createElement('div'));

使用此属性，您不需要为父容器添加样式来显示它。