问题
I created a dojo dgrid however i used a form wizard to seprate the fields on the form, however with the current structure i am having an issue with the select all feature on the grid.
I cannot select all however if i remove the div Page2 and it content from the form it works.
In firebug i also inspected the DOM and i saw the 'aria-checked = mixed' when i check the select all box when it should be 'aria-checked = true'.
How can i get the header checkbox to allow all records to be selected when it is checked and the grid is in a Wizard form.
Under is some screen shots and code:
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>
The code is rendered
If i remove the div and it contents for div id= Page2 it works
Layout without dojox.widget.Wizard
Js Code Creating Grid
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);
});
回答1:
You should not be mixing selector and editor into your constructor - they are not designed to be used that way. They are designed to wrap column definition objects (which you are already doing for selector column, though I'd note that selectorType: "checkbox" is unnecessary since that's already the default).
Also, unrelated, selectionMode starts with a lowercase s.
Not sure if this will solve your problem but it will definitely prevent some weird behaviors in general.
来源：https://stackoverflow.com/questions/22463142/dojo-dgrid-header-checkbox-to-select-all-does-not-work