Dojo / Dijit问题和表单选择中的空白选项

时间:2012-07-27 07:29:42

标签: select dojo option spring-roo

我是Dojo的新手,我遇到了以下问题。

我有以下表单选择由spring roo生成:

<div id="_f_trc_suivi_domain_Pli_conteneurNum_id">
            <label for="_conteneurNum_id">Conteneur Num : </label>
            <select id="_conteneurNum_id" name="conteneurNum">
            <option value="">Tous</option>
                <option value="1">951</option>
                <option value="2">753</option>
                <option value="3">753159</option></select><br />
            <script type="text/javascript">
                Spring.addDecoration(new Spring.ElementDecoration({
                    elementId : '_conteneurNum_id',
                    widgetType : 'dijit.form.FilteringSelect',
                    widgetAttrs : {
                        hasDownArrow : true
                    }
                }));
            </script>
        </div>

在firebug中产生以下结果:

    <div wairole="combobox" dojoattachpoint="comboNode"
        id="widget__conteneurNum_id"
        class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox dijitComboBox dijitTextBoxError dijitComboBoxError dijitError"
        role="combobox" widgetid="_conteneurNum_id"
        aria-labelledby="_conteneurNum_id_label" aria-expanded="false">
        <div dojoattachevent="onmousedown:_onArrowMouseDown"
            wairole="presentation" dojoattachpoint="downArrowNode"
            class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer"
            role="presentation">
            <input type="text" wairole="presentation" readonly="" tabindex="-1"
                value="? " class="dijitReset dijitInputField dijitArrowButtonInner"
                role="presentation">
        </div>
        <div class="dijitReset dijitValidationContainer">
            <input type="text" wairole="presentation" readonly="" tabindex="-1"
                value="? "
                class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner"
                role="presentation">
        </div>
        <div class="dijitReset dijitInputField dijitInputContainer">
            <input type="text" waistate="haspopup-true,autocomplete-list"
                wairole="textbox" dojoattachpoint="textbox,focusNode"
                dojoattachevent="onkeypress:_onKeyPress,compositionend"
                autocomplete="off" class="dijitReset dijitInputInner"
                role="textbox" aria-haspopup="true" aria-autocomplete="list"
                id="_conteneurNum_id" tabindex="0" aria-required="true"
                aria-invalid="true" value="" aria-owns="_conteneurNum_id_popup"><input
                type="hidden" name="conteneurNum" value="">
        </div>
    </div>

但不幸的是,它始终在空白选项上方显示白色选项,其值为“Tous”。

请参阅以下gif:

resulting form field

我错了什么?任何线索欢迎。

编辑:我确定问题在于:<option value="">Tous</option>尤其是value=""部分。我可以按如下方式重新措辞和改进我的问题:如何确保Dojo / Dijit正确处理:value="" ??

2 个答案:

答案 0 :(得分:0)

按预期将0值放在那里。我对以下代码没有任何问题:

<div id="_f_trc_suivi_domain_Pli_conteneurNum_id">
        <label for="_conteneurNum_id">Conteneur Num : </label>
        <select id="_conteneurNum_id" name="conteneurNum">
            <option value="0">Tous</option>
            <option value="1">951</option>
            <option value="2">753</option>
            <option value="3">753159</option>
          </select><br />
        <script type="text/javascript">
            Spring.addDecoration(new Spring.ElementDecoration({
                elementId : '_conteneurNum_id',
                widgetType : 'dijit.form.FilteringSelect',
                widgetAttrs : {
                    hasDownArrow : true
                }
            }));
        </script>
    </div>

答案 1 :(得分:0)

我刚刚在MyEclipse 2014,Spring 3.1和旧的Dojo / Dijit版本上进行了几个小时的摔跤后找到了一个解决方法,我知道这个版本已经过时了,但MyEclipse会打包这些旧版本的所有内容并让人发疯。

我尝试了FilteringSelect,选择了空值,带有值的html选项,以及替换了混乱了项目其余部分的dojo库。所以我会在这里发布,如果它可以帮助任何人:

这种情况很常见,如果你想在你的选择中使用虚拟提示选项,例如' - 选择项 - - ,使用空值。使用MyEclipse打包到Spring-js-2.3.1.RELEASE的Dojo / dijit版本,用下拉列表中显示的分隔符替换带有空值的选项。在Dojo / Dijit的一些最新版本中,这种行为似乎得到纠正,正如你在Craig Swing的小提琴中看到的那样。

如果绑定的属性不是字符串,则可以将单个espace指定为dummy选项的值而不是null,因为稍后将在控制器中绑定为null,因此将显示dummy选项。例如:

<option selected="selected" value="">Tous</option>

但是如果属性是一个String,那么你会发现你的控制器属性中有一个不想要的空格。

所以我最后选择直接修改Select.js

将它放在你的项目中的webapps / resources / dijit / form / Select.js注释这一行:

/*
if(!_1.value){
return new dijit.MenuSeparator();
}else{
*/
var _2=dojo.hitch(this,"_setValueAttr",_1);
var _3=new dijit.MenuItem({option:_1,label:_1.label,onClick:_2,disabled:_1.disabled||false});
dijit.setWaiRole(_3.focusNode,"listitem");
return _3;
/*
}
*/

并且不要忘记在web.xml中覆盖Resource Servlet的这个路径:

<servlet-mapping>
    <servlet-name>My Servlet</servlet-name>
    <url-pattern>/resources/dijit/form/Select.js</url-pattern>
</servlet-mapping>