0

我所拥有的是一个在 ComboBox 中包含一百多年列表的选择(使用 dojo 1.8)。而不是滚动浏览大列表,我不得不让每个显示内联块在一个网格状的显示中(这有效。)

新的要求是不要像这样水平显示它们:

2013 2012 2011 2010
2009 2008 2007 2006
2005 2004 2003 2002
2001 2000

我需要像这样垂直显示它们:

2013 2009 2005 2001
2012 2008 2004 2000
2011 2007 2003
2010 2006 2002

我基本上想将组合框的菜单项分组为每 10 个项目,将它们包装在另一个 div 中,我可以用 CSS 将其变成列(不使用 CSS3。)

我在操作菜单列表的呈现方式时遇到了一些麻烦,因为它是在最初选择选择后在 DOM 中创建的。

这是一个快速的 HTML 参考,包括 data dojo 类型:

<select name="year" id="year" value="1942" data-dojo-type="dijit/form/ComboBox">
    <option value="2013">2013</option>
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    <option value="2007">2007</option>
    <option value="2006">2006</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
    <option value="1997">1997</option>
    <option value="1996">1996</option>
    <option value="1995">1995</option>
    <option value="1994">1994</option>
    <option value="1993">1993</option>
    <option value="1992">1992</option>
    <option value="1991">1991</option>
    <option value="1990">1990</option>
    <option value="1989">1989</option>
    <option value="1988">1988</option>
    <option value="1987">1987</option>
    <option value="1986">1986</option>
    <option value="1985">1985</option>
    <option value="1984">1984</option>
    <option value="1983">1983</option>
    <option value="1982">1982</option>
    <option value="1981">1981</option>
    <option value="1980">1980</option>
    <option value="1979">1979</option>
    <option value="1978">1978</option>
    <option value="1977">1977</option>
    <option value="1976">1976</option>
    <option value="1975">1975</option>
    <option value="1974">1974</option>
    <option value="1973">1973</option>
    <option value="1972">1972</option>
    <option value="1971">1971</option>
    <option value="1970">1970</option>
    <option value="1969">1969</option>
    <option value="1968">1968</option>
    <option value="1967">1967</option>
    <option value="1966">1966</option>
    <option value="1965">1965</option>
    <option value="1964">1964</option>
    <option value="1963">1963</option>
    <option value="1962">1962</option>
    <option value="1961">1961</option>
    <option value="1960">1960</option>
    <option value="1959">1959</option>
    <option value="1958">1958</option>
    <option value="1957">1957</option>
    <option value="1956">1956</option>
    <option value="1955">1955</option>
    <option value="1954">1954</option>
    <option value="1953">1953</option>
    <option value="1952">1952</option>
    <option value="1951">1951</option>
    <option value="1950">1950</option>
    <option value="1949">1949</option>
    <option value="1948">1948</option>
    <option value="1947">1947</option>
    <option value="1946">1946</option>
    <option value="1945">1945</option>
    <option value="1944">1944</option>
    <option value="1943">1943</option>
    <option value="1942">1942</option>
    <option value="1941">1941</option>
    <option value="1940">1940</option>
    <option value="1939">1939</option>
    <option value="1938">1938</option>
    <option value="1937">1937</option>
    <option value="1936">1936</option>
    <option value="1935">1935</option>
    <option value="1934">1934</option>
    <option value="1933">1933</option>
    <option value="1932">1932</option>
    <option value="1931">1931</option>
    <option value="1930">1930</option>
    <option value="1929">1929</option>
    <option value="1928">1928</option>
    <option value="1927">1927</option>
    <option value="1926">1926</option>
    <option value="1925">1925</option>
    <option value="1924">1924</option>
    <option value="1923">1923</option>
    <option value="1922">1922</option>
    <option value="1921">1921</option>
    <option value="1920">1920</option>
    <option value="1919">1919</option>
    <option value="1918">1918</option>
    <option value="1917">1917</option>
    <option value="1916">1916</option>
    <option value="1915">1915</option>
    <option value="1914">1914</option>
    <option value="1913">1913</option>
    <option value="1912">1912</option>
    <option value="1911">1911</option>
    <option value="1910">1910</option>
    <option value="1909">1909</option>
    <option value="1908">1908</option>
    <option value="1907">1907</option>
    <option value="1906">1906</option>
    <option value="1905">1905</option>
    <option value="1904">1904</option>
    <option value="1903">1903</option>
    <option value="1902">1902</option>
    <option value="1901">1901</option>
    <option value="1900">1900</option>
</select>

更简单地说:我希望它跳过第一个“Previous Choices”div(.dijitMenuItem),然后添加一个父div,放入10个项目,添加另一个,再放入10个......像这样:

<div class="dijitMenuItemGroup">
    <div class="dijitReset dijitMenuItem" role="option" item="0" id="year_popup0">2013</div>
    <div class="dijitReset dijitMenuItem" role="option" item="1" id="year_popup1">2012</div>
    <div class="dijitReset dijitMenuItem" role="option" item="2" id="year_popup2">2011</div>
    <div class="dijitReset dijitMenuItem" role="option" item="3" id="year_popup3">2010</div>
    <div class="dijitReset dijitMenuItem" role="option" item="4" id="year_popup4">2009</div>
    <div class="dijitReset dijitMenuItem" role="option" item="5" id="year_popup5">2008</div>
    <div class="dijitReset dijitMenuItem" role="option" item="6" id="year_popup6">2007</div>
    <div class="dijitReset dijitMenuItem" role="option" item="7" id="year_popup7">2006</div>
    <div class="dijitReset dijitMenuItem" role="option" item="8" id="year_popup8">2005</div>
    <div class="dijitReset dijitMenuItem" role="option" item="9" id="year_popup9">2004</div>
</div>
<div class="dijitMenuItemGroup">
    <div class="dijitReset dijitMenuItem" role="option" item="10" id="year_popup10">2003</div>
    ...
</div>
...

可以做到吗?有没有类似的 dijit 道具?

4

1 回答 1

0

这对我来说似乎不可能使用 dijit/form/ComboBox(但也许我错了),原因是 dijit/form/ComboBox 不支持选项组。请参阅https://bugs.dojotoolkit.org/ticket/10761

我建议您改用 dgrid 构建自定义小部件。如果您不知道,您可以在此处查看一个示例,说明如何将其用作下拉选择的替代品(为您呈现选项的方式增加了一些灵活性):http: //dojofoundation.org/packages /dgrid/tutorials/drop_down/

于 2013-06-03T21:57:28.737 回答