Using dojo DataGrid as a DOM object（更利于大家查资料，就转一下）-CSDN博客

本文详细介绍了如何在网页中使用Dojo DataGrid组件，并提供了加载数据、获取所有项、过滤数据、设置数据等关键功能的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Using dojo DataGrid as a DOM object

Meir Winston | Jun 29, 2009 | Comments (4)

Dojo DataGrid (dojo 1.3) Using DOM Object
Since I started using the dojo DataGrid I realized that there are some basic methods that are missing or hidden from the API. It is not so obvious how to achieve functionalities like setItems or getFilteredItems.

Prepare the web page:
Assuming the dojo library resides in the same directory as your web page, I will reference the necessary items inside theheader tag of the web page.

Import CSS stylesheets (in web page header)
<style>
    @import"dojo-release-1.3.1/dijit/themes/tundra/tundra.css";
    @import"dojo-release-1.3.1/dojo/resources/dojo.css";
    @import"dojo-release-1.3.1/dojox/grid/resources/Grid.css";
    @import"dojo-release-1.3.1/dojox/grid/resources/tundraGrid.css";
</style>

Include dojo.js (in web page header)
<script type="text/javascript"src="dojo-release-1.3.1/dojo/dojo.js"djConfig="parseOnLoad:true, isDebug:true"></script>

Include data grid files (in web page header)
<scripttype="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
</style>

Creating the DataGrid
Inside the body tag I will create a container to host my DataGrid widget:
<divid="container"></div>
, and than the DataGrid in few steps:

Create items
Create a grid data object with the items
Create a store containing the grid data
Create a layout for the grid
Create a configuration object for the DataGrid
Create the DataGrid object
Invoke the startup() function.

Get All Items
To get all items in the DataGrid it is not enough just to get the array of items from the store.
e.g.
function getAllItems(){
   return widget.store._arrayOfTopLevelItems;
}

The problem with this method might be visible when you have a large amount of rows in the DataGrid, then you will receive only the rows that are visible on the browser or a little bit more (loaded items only), the rest will be null references in the array. The DataGrid is smart enough to fetch onto the cash only the data that is visible to the user which sometimes can be a problem, but if you scroll slowly all the way down to the bottom, all rows will be cashed in the memory such that a call to getAllItems() will return all rows. Filtering the grid rows using the setQuery method or the filter method will cause the same problem when trying the get all items after applying a filter.
To handle this problem I explicitly fetched all rows prior to returning all items. After stumbling upon the dojo library I managed to extract the following code to load data grid items:

function loadItems(){
    widget.store.fetch({
        start: 0,
        count: widget.rowCount,
        query: widget.query,
        sort: widget.getSortProps(),
        queryOptions: widget.queryOptions,
        isRender: widget.isRender,
        onBegin: dojo.hitch(_widget, "_onFetchBegin"),
        onComplete: dojo.hitch(_widget,"_onFetchComplete"),
        onError: dojo.hitch(_widget, "_onFetchError")
    });
}

By setting the count to be the number of records in the DataGrid I'm forcing the widget to fetch all records.
The function below shows how to get all items ignoring filters.

function getItems(){
    var items = [];
    var count = _widget.rowCount;
    loadItems();
    for(var i = 0 ; i < count ; i++){
        var item = widget.getItem(i);
        items.push(item);
    }
    return items;
}

The method getDisplayedItems will return only the rows that are presented in the browser.

function getDisplayedItems(){
    var items = [];
    var count = _widget.rowCount;
    for(var i = 0 ; i < count ; i++){
        var item = widget.getItem(i);
        if(item !=null){
            items.push(item);
        }
    }
    return items;
}

Get Selected Items
function getSelectedItems(){
return widget.selection.getSelected();
}

Filter Rows
This example shows how to filter the rows in the DataGrid using the setQuery method:
function filter(query){//query example: {fieldName: 'regularExpression' }
widget.setQuery(query,{ignoreCase:true});
}

Connecting Dojo Events
The argument f is a function to be invoked on an event.

function connectOnMouseDown(f){
    return dojo.connect(widget, "onMouseDown", f);
}
function connectOnHeaderCellClick(f){
    return dojo.connect(widget, "onHeaderCellClick", f);
}
function connetcOnStyleRow(f){
    return dojo.connect(widget, "onStyleRow", f);
}
function connectOnRowSelected(f){
    return dojo.connect(widget, "onRowClick", f);
}

Set Data
To set the data I'm creating a new Store and invoke the setStore method

function setData(arr){
    var gridData = {label: "partNumber",items: arr};
    var fileWriteStore = new dojo.data.ItemFileWriteStore({data: gridData});
    widget.setStore(fileWriteStore);
}

Replace Items
In order to replace an Item I am removing the obsolete item and create a new one, this method might cause ordering problem, the previous row would not reside at the same index as the new one. Hence, a good alternative is to update each one of the row fields usingwidget.store.setValue(item,fieldName,newValue);
Remember the "partNumber" is the identifier of the grid

function replaceItem(item,newItem){
    widget.store.deleteItem(item);
    widget.store.save();
    newItem["partNumber"] = item["partNumber"];
    widget.store.newItem(newItem);
    widget.store.save();
}

Update Items
Here I am iterating over one's item fields and update each with the corresponding newItem's value
function updateItem(item,newItem){
    for(var k in newItem){
        if(k != "partNumber"){
            if(newItem[k].constructor == Object){
               //ignore object types
            }
            elseif(newItem[k].constructor == Array){
               //ignore array types
            }
            else{
                widget.store.setValue(item,k,newItem[k]);
            }
        }
    }
}