javascript - Dojo dGrid 标题复选框选择全部不起作用

Question

我创建了一个 dojo dgrid，但是我使用表单向导来分隔表单上的字段，但是使用当前结构，我在网格上选择所有功能时遇到问题。

但是，如果我从其工作的表单中删除 div Page2 及其内容，我无法选择全部。

在firebug中，我还检查了DOM，当我选中全选框时，我看到了“aria-checked = mix”，而它应该是“aria-checked = true”。

如何获取标题复选框以允许在选中该复选框且网格处于向导形式时选择所有记录。

下面是一些屏幕截图和代码:

jsp

 <div data-dojo-type="dojox.widget.Wizard" hideDisabled="true"
            data-dojo-props="style:'height:300px; width:600px'">        



    <div dojoType="dojox.widget.WizardPane" id="Page2">
        <div data-dojo-type="dojox.layout.TableContainer"
                    data-dojo-props="cols:1,customClass:'employee_labels', labelWidth:180"
                    id="EmployeeBirthNameContainer">
                    <label>2. Is you name on your Birth Certificate is 
                        different from (1) above ?(e.g. Changed by Deed Poll / Marriage)</label>

                    <s:textfield type="text" required="true" name="birth_surname"
                        id="birth_surname" placeholder="Your SurName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your Surname On Your Birth Certificate!"
                        title="(a). Surname :"
                        style="width: 25em;" />

                    <s:textfield type="text" required="true" name="birth_firstname"
                        id="birth_firstname" placeholder="Your FirstName"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your FirstName On Your Birth Certificate!"
                        title="(b). FirstName :" 
                        style="width: 25em;"/>

                    <s:textfield type="text" required="false" name="birth_other_names"
                        id="birth_other_names" placeholder="Other Names"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        title="(c). Other Names :"
                        style="width: 25em;" />                     

        </div>
    </div>  


    <div dojoType="dojox.widget.WizardPane" id= "Page3">
         <div data-dojo-type="dojox.layout.TableContainer"
            data-dojo-props="cols:2,customClass:'employee_labels', labelWidth:250"
            id="EmployeeIdentificationContainer">

            <label>3. Please Enter At Least Two Forms Of Identification</label> 

            <s:select data-dojo-type="dijit/form/FilteringSelect" id="id"
                        name="id" title= "Identification Type"
                        list="#{'':'Select Your I.D Type','1':'Passport','2':'Drivers Permit','3':'Electoral Identification'}"/>

            <s:textfield type="text" required="true" name="idNumber"
                        id="idNumber" placeholder="Your Identification Number"
                        data-dojo-type="dijit/form/ValidationTextBox"
                        missingMessage="Please Enter Your Identification Number"
                        title="(a). Identification Number :"
                        style="width: 25em;" />  

        </div>
            <div id="grid"></div>   
    </div>  

</div>

代码已渲染

如果我删除 div 及其 div id= Page2 的内容，它就可以工作

没有dojox.widget.Wizard的布局

创建网格的 Js 代码

require([  

  "dijit/form/CheckBox",
  "dijit/dijit",
    "dijit/form/Textarea",
    "dijit/form/FilteringSelect",
    "dijit/form/TextBox",
    "dijit/form/ValidationTextBox",
    "dijit/form/DateTextBox",
    "dijit/form/TimeTextBox",
    "dijit/form/Button",
    "dijit/form/RadioButton",
    "dijit/form/Form", 




]);

require([  
       "dojox/validate/us",
       "dojox/validate/web", 
       "dojox/layout/TableContainer",
       "dojox/layout/GridContainer",
       "dojox/widget/Wizard",
      "dojox/widget/Portlet",
       "dojox/widget/WizardPane",
       "dojox/grid/_CheckBoxSelector"




       ]);

require([  
  "dojo/parser",  
  "dojo/_base/declare",
  "dojo/store/Memory",




  "dgrid/OnDemandGrid",
  "dgrid/ColumnSet",
  "dgrid/Selection",
  "dgrid/selector",
  "dgrid/Keyboard",  
  "dgrid/extensions/DijitRegistry",
  "dgrid/editor",
  "dgrid/extensions/ColumnHider",


  "dojo/domReady!" 

], function(parser, declare, MemoryStore, OnDemandGrid, ColumnSet, Selection, 
            selector,Keyboard, DijitRegistry,editor,ColumnHider){
      parser.parse();


      var data = [
            { id:"1", idType: "Passport", idNumber: "12121545WWW" },
            { id:"2",idType: "Drivers Permit", idNumber: "11212154515 FF"},
            { id:"3",idType: "Electoral Identification", idNumber: "425123123121"}
        ];
    var store = new MemoryStore({

        data: data

    });
      var columns =     [
                         [[
                           {label:"Id", field:"Id"},
                           editor({label: "", field: "select", sortable: false, autoSave:true},"checkbox"),
                           { field: "idType", label: "Identification Type" },
                           { field: "idNumber", label: "Identification Number" }]]
                        ];           

      var CustomGrid = declare([OnDemandGrid, selector,Selection, Keyboard, editor,DijitRegistry,ColumnHider]);




      var grid = new CustomGrid ({
          store: store,
            columns: {
                col1:{
                    label:"Id",
                    field:"Id",
                    hidden:true
                },

                selector: selector( {selectorType: "checkbox"}),

                col3:{
                    label:"ID Type",
                    field:"idType"
                },

                col4:{
                    label:"ID Number",
                    field:"idNumber"
                }

            } ,
            SelectionMode:"none",
            class:'grid',
          allowSelectAll: true
        }, "grid");


     grid.renderArray(data);   
});

Answer 1

您不应该将selector 和editor 混合到您的构造函数中 - 它们不是为这样使用而设计的。它们旨在包装列定义对象(您已经在 selector 列中执行此操作，但我注意到 selectorType: "checkbox" 是不必要的，因为这已经是默认值)。

此外，不相关的，selectionMode 以小写 s 开头。

不确定这是否能解决您的问题，但它肯定会防止一些奇怪的行为。