カスタム・ソートが拡張グリッド・ビューに適用されているときにdojoを使用して既存のクラスにクラスを追加する

Question

カスタム・ソートを使用してDojo拡張グリッドを作成しました。既存のクラスにソートの矢印（上/下）をコードで追加し、cssを使用しない方法。

var mygrid = new EnhancedGrid({ 
 
    id: "grid", 
 
    store: gridStore, 
 
    structure: gridStructure, 
 
    canSort : function(index){ 
 
     alert(index); 
 
    } 
 
}, dojo.byId("mydatagrid"))

私は、道場でdomclassを場所を作成して使用して試してみました。しかし、それは期待どおりに働いています。

<div hidefocus="hidefocus" role="grid" dojoattachevent="onmouseout:_mouseOut" tabindex="0" aria-multiselectable="true" class="dojoxGrid" id="grid" widgetid="grid" style="width: 680px; height: auto; -moz-user-select: none;" aria-readonly="true" align="left"> 
 
\t <div class="dojoxGridMasterHeader" dojoattachpoint="viewsHeaderNode" role="presentation" style="display: block; height: 24px;"><div class="dojoxGridHeader" dojoattachpoint="headerNode" role="presentation" style="width: 679px; left: 1px; top: 0px;"> 
 
\t \t <div dojoattachpoint="headerNodeContainer" style="width:9000em" role="presentation"> 
 
\t \t \t <div dojoattachpoint="headerContentNode" role="row"><table class="dojoxGridRowTable" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr><th tabindex="-1" aria-readonly="true" role="columnheader" id="gridHdr0" class="dojoxGridCell dojoDndItem" idx="0" style="width:200px;" dndtype="gridColumn_grid"><div class="dojoxGridSortNode">COLUMNVALUE</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="gridHdr1" class="dojoxGridCell dojoDndItem" idx="1" style="width:200px;" dndtype="gridColumn_grid"><div class="dojoxGridSortNode">RULEEXECUTABLENAME</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="gridHdr2" class="dojoxGridCell dojoDndItem" idx="2" style="width:200px;" dndtype="gridColumn_grid"><div class="dojoxGridSortNode">SYSTEMTIMESTAMP</div></th></tr></tbody></table></div> 
 
\t \t </div> 
 
\t </div></div><table class="dojoxGridFBar" role="presentation" dojoattachevent="onclick:_onClickFilterBar, onmouseenter:_onMouseEnter, onmouseleave:_onMouseLeave, onmousemove:_onMouseMove" id="dojox_grid_enhanced_plugins_filter_FilterBar_0" widgetid="dojox_grid_enhanced_plugins_filter_FilterBar_0" cellspacing="0" border="0"><tbody><tr><td class="dojoxGridFBarBtnTD"><span class="dijit dijitReset dijitInline dijitButton dojoxGridFBarBtn" role="presentation" widgetid="dijit_form_Button_6" title="Define filter" aria-label="Filter the table"><span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation"><span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_6_label" tabindex="0" id="dijit_form_Button_6" style="-moz-user-select: none;"><span class="dijitReset dijitInline dijitIcon dojoxGridFBarDefFilterBtnIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar">●</span><span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_6_label" data-dojo-attach-point="containerNode">...</span></span></span><input value="" class="dijitOffScreen" data-dojo-attach-event="onclick:_onClick" tabindex="-1" aria-hidden="true" data-dojo-attach-point="valueNode" type="button"></span></td><td class="dojoxGridFBarInfoTD"><span class="dojoxGridFBarInner"><span class="dojoxGridFBarStatus" dojoattachpoint="statusBarNode">No filter applied</span><span class="dijit dijitReset dijitInline dijitButton dojoxGridFBarClearFilterBtn" role="presentation" widgetid="dijit_form_Button_7" style="display: none;" aria-label="Clear the filter"><span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation"><span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_7_label" tabindex="0" id="dijit_form_Button_7" style="-moz-user-select: none;"><span class="dijitReset dijitInline dijitIcon dojoxGridFBarClearFilterBtnIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar">●</span><span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_7_label" data-dojo-attach-point="containerNode">Clear filter</span></span></span><input value="" class="dijitOffScreen" data-dojo-attach-event="onclick:_onClick" tabindex="-1" aria-hidden="true" data-dojo-attach-point="valueNode" type="button"></span><span class="dijit dijitReset dijitInline dijitButton dojoxGridFBarCloseBtn" role="presentation" widgetid="dijit_form_Button_8" style="display: none;"><span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation"><span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_8_label" tabindex="0" id="dijit_form_Button_8" title="Close filter bar" style="-moz-user-select: none;"><span class="dijitReset dijitInline dijitIcon dojoxGridFBarCloseBtnIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar">●</span><span class="dijitReset dijitInline dijitButtonText dijitDisplayNone" id="dijit_form_Button_8_label" data-dojo-attach-point="containerNode">Close filter bar</span></span></span><input value="" class="dijitOffScreen" data-dojo-attach-event="onclick:_onClick" tabindex="-1" aria-hidden="true" data-dojo-attach-point="valueNode" type="button"></span></span></td></tr></tbody></table> 
 
\t <div class="dojoxGridMasterView" dojoattachpoint="viewsNode" role="presentation" style="height: 220px;"><div class="dojoxGridView" role="presentation" id="dojox_grid__View_1" widgetid="dojox_grid__View_1" style="width: 679px; left: 1px; top: 0px;"> 
 
\t 
 
\t <input class="dojoxGridHiddenFocus" dojoattachpoint="hiddenFocusNode" role="presentation" type="checkbox"> 
 
\t <input class="dojoxGridHiddenFocus" role="presentation" type="checkbox"> 
 
\t <div class="dojoxGridScrollbox" dojoattachpoint="scrollboxNode" role="presentation"> 
 
\t \t <div class="dojoxGridContent" dojoattachpoint="contentNode" hidefocus="hidefocus" role="presentation" style="height: 220px; width: 679px;"><div role="presentation" style="position: absolute; left: 0px; top: 0px;"><div class="dojoxGridRow" role="row" aria-selected="false" style=""><table class="dojoxGridRowTable" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="0" style="width:200px;">Ellen</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="1" style="width:200px;">RuleCheck3</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="2" style="width:200px;">2017-05-09 18:27:11.0</td></tr></tbody></table></div><div class="dojoxGridRow dojoxGridRowOdd" role="row" aria-selected="false" style=""><table class="dojoxGridRowTable" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="0" style="width:200px;">Sundar</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="1" style="width:200px;">RuleCheck3</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="2" style="width:200px;">2017-05-09 18:27:11.0</td></tr></tbody></table></div><div class="dojoxGridRow" role="row" aria-selected="false" style=""><table class="dojoxGridRowTable" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="0" style="width:200px;">Sarah</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="1" style="width:200px;">RuleCheck3</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="2" style="width:200px;">2017-05-09 18:27:11.0</td></tr></tbody></table></div><div class="dojoxGridRow dojoxGridRowOdd" role="row" aria-selected="false" style=""><table class="dojoxGridRowTable" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="0" style="width:200px;">Alana</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="1" style="width:200px;">RuleCheck3</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="2" style="width:200px;">2017-05-09 18:27:11.0</td></tr></tbody></table></div><div class="dojoxGridRow" role="row" aria-selected="false" style=""><table class="dojoxGridRowTable" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="0" style="width:200px;">Martha</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="1" style="width:200px;">RuleCheck3</td><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="2" style="width:200px;">2017-05-09 18:27:11.0</td></tr></tbody></table></div><div class="dojoxGridRow dojoxGridRowOdd" role="row" aria-selected="false" style=""><table class="dojoxGridRowTable" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="0" style="width:200px;">Eleni</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="1" style="width:200px;">RuleCheck3</td><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="2" style="width:200px;">2017-05-09 18:27:11.0</td></tr></tbody></table></div><div class="dojoxGridRow" role="row" aria-selected="false" style=""><table class="dojoxGridRowTable" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="0" style="width:200px;">dtfy</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="1" style="width:200px;">RuleCheck3</td><td tabindex="-1" role="gridcell" class="dojoxGridCell" idx="2" style="width:200px;">2017-05-09 18:27:11.0</td></tr></tbody></table></div><div class="dojoxGridRow dojoxGridRowOdd" role="row" aria-selected="false" style=""><table class="dojoxGridRowTable" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="0" style="width:200px;">dryhy</td><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="1" style="width:200px;">RuleCheck3</td><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="2" style="width:200px;">2017-05-09 18:27:11.0</td></tr></tbody></table></div><div class="dojoxGridRow" role="row" aria-selected="false" style=""><table class="dojoxGridRowTable" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="0" style="width:200px;">David</td><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="1" style="width:200px;">RuleCheck3</td><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="2" style="width:200px;">2017-05-09 18:27:11.0</td></tr></tbody></table></div><div class="dojoxGridRow dojoxGridRowOdd" role="row" aria-selected="false" style=""><table class="dojoxGridRowTable" role="presentation" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="0" style="width:200px;">Laura</td><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="1" style="width:200px;">RuleCheck3</td><td tabindex="-1" role="gridcell" class="dojoxGridCell " idx="2" style="width:200px;">2017-05-09 18:27:11.0</td></tr></tbody></table></div></div></div> 
 
\t </div> 
 
</div></div> 
 
\t <div class="dojoxGridMasterMessages" style="display: none;" dojoattachpoint="messagesNode"></div> 
 
\t <span dojoattachpoint="lastFocusNode" tabindex="0"></span> 
 
</div>

Answer 1

canSort : function(index){ 
     alert(index); 
    } 

EXのためにソートされてから列（複数可）を防ぐために使用されています。あなたはグリッド上で、いくつかの理由のために3つの列を持っている場合、あなたはのいずれかをしたくありません並べ替える列を次にこの関数を使用して制限します。あなたが列をソートしたい場合、これはあなたが

canSort: function(column) { return !(Math.abs(column) === 3); }, 

ここでは3列の並べ替えのために制限されているソート列を制限する方法であるプラグインdojox.grid.enhanced.plugins.NestedSorting

に見てください。これが役に立ちますようにお願いします。