在增強型網格視圖上應用自定義排序時，使用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); 
    } 

是用來防止柱（S）被分類爲例如：如果你有你的網格三列，由於某種原因，你不想要的一個要排序的列然後你使用這個函數來限制它。如果您想對列進行排序請看插件dojox.grid.enhanced.plugins.NestedSorting

這是你如何限制列排序

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

這裏第3列進行排序的限制。希望這可以幫助