过滤 Dojo 数据网格答案

【问题标题】：Filtering a Dojo DataGrid过滤 Dojo 数据网格
【发布时间】：2010-12-03 04:23:04
【问题描述】：

我已经建立了一个数据网格，连接到一个 XMLStore。当用户从下拉列表中选择一个月时，我希望网格仅过滤该月份的数据。应该很简单，并且根据每个示例都是如此。我不知道为什么它不起作用，也不知道为什么 IE 告诉我 dataGrid 对象不支持任何方法（filter、sort、setQuery）。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        @import "StyleSheet.css";
        @import "js/dojotoolkit/dijit/themes/pfga/pfga.css";
        @import "js/dojotoolkit/dojo/resources/dojo.css";
        @import "js/dojotoolkit/dojox/grid/resources/pfgaGrid.css";
    </style>

    <script src="js/dojotoolkit/dojo/dojo.js" type="text/javascript" djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">
        dojo.require("dojo.parser");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojox.data.XmlStore");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.form.FilteringSelect");
        dojo.require("dojo.data.ItemFileReadStore");

        theMonth = new Date();

        var month_name=new Array(12);
        month_name[0]="January"
        month_name[1]="February"
        month_name[2]="March"
        month_name[3]="April"
        month_name[4]="May"
        month_name[5]="June"
        month_name[6]="July"
        month_name[7]="August"
        month_name[8]="September"
        month_name[9]="October"
        month_name[10]="November"
        month_name[11]="December"

        dojo.addOnLoad(function(){dojo.byId('monthInput').value=month_name[theMonth.getMonth()]});

        var eventStore = new dojox.data.XmlStore({url: "events.xml", rootItem: "event", keyAttribute: "dateSort"});

        function monthClick() {
            var ctr, test, rtrn, grid;

            test = dojo.byId('monthInput').value;

            for (ctr=0;ctr<=11;ctr++)
            {
                if (test==month_name[ctr])
                {
                    rtrn = ctr +1;
                }
            }
            eventGrid.filter({month:rtrn});
        }
    </script>
</head>
<body class="pfga">
    <div id="content" style="width:800px; overflow:visible" dojoType="dijit.layout.ContentPane" region="center" class="pfga">
        <div dojotype="dojo.data.ItemFileReadStore" url="months.json" jsID="monthStore"></div>
        <div id="pagehead" class="Heading1" >Upcoming Range Events - PF&amp;GA</div>
        <p>
        <input dojoType="dijit.form.FilteringSelect" store="monthStore" searchAttr="month" name="id" id="monthInput" class="pfga" onChange="monthClick()" />
        </p>
        <table dojoType="dojox.grid.DataGrid" store="eventStore" query="{month:'5'}" class="pfga" style="height:500px" clientSort="false" id="eventGrid" >
          <thead>
            <tr>
              <th field="dateSort" hidden="true">DateSort</th>
              <th field="date" width="80px">Date</th>
              <th field="description" width="600">Description</th>
            </tr>
            <tr>
                <th field="time" colspan="3">Details</th>
            </tr>
          </thead>
        </table>
    </div>
</body>
</html>

除此之外，虽然单击事件可以完美运行，但当我尝试在加载此页面时应用过滤器时，当第一次加载网格时它不会过滤网格。

我尝试添加过滤器，将其添加到我在上面创建的现有 addOnLoad 函数中，甚至尝试将下拉列表的值替换为加载时网格的起始查询。

【问题讨论】：

标签： datagrid dojo filter

【解决方案1】：

您可以通过设置 jsId 属性 (jsId="eventGrid") 使您的网格在全局范围内可访问，或者您可以通过 id 找到它：

dijit.byId("eventGrid").filter({month:rtrn});

【讨论】：

【解决方案2】：

我认为您希望 id="eventGrid" 读取 jsId="eventGrid" 或为 jsId="eventGrid" 添加另一个属性

【讨论】：

我收到了来自dojo-interest 邮件组的答复，并试图在昨晚发布它，但该站点似乎已关闭。感谢两位回答