代码之家 › 专栏 › 技术社区 › S.Lishanth

在增强的网格视图上应用自定义排序时,使用dojo将类添加到现有类中

dojo css javascript

S.Lishanth · 技术社区 · 9 年前

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

我已经尝试在dojo中使用create、place和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">
	<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;">
		<div dojoattachpoint="headerNodeContainer" style="width:9000em" role="presentation">
			<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>
		</div>
	</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>
	<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;">
	
	<input class="dojoxGridHiddenFocus" dojoattachpoint="hiddenFocusNode" role="presentation" type="checkbox">
	<input class="dojoxGridHiddenFocus" role="presentation" type="checkbox">
	<div class="dojoxGridScrollbox" dojoattachpoint="scrollboxNode" role="presentation">
		<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>
	</div>
</div></div>
	<div class="dojoxGridMasterMessages" style="display: none;" dojoattachpoint="messagesNode"></div>
	<span dojoattachpoint="lastFocusNode" tabindex="0"></span>
</div>

1 回复 | 直到 9 年前

bajji 9 年前

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

用于防止对列进行排序,例如:如果网格上有三列,并且由于某种原因,您不希望对其中一列进行排序时,则可以使用此函数来限制排序。如果你想对这些列进行排序,请查看插件 dojox.grid.enhanced.plugins.NestedSorting

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

此处第3列仅用于排序。希望这有帮助