用于全选的 Dojo dGrid 标题复选框不起作用

Question

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

但是，如果我删除 div Page2 并将其内容从它的工作表单中删除，我将无法选择所有内容。

在萤火虫中，我还检查了 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 开头。

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