注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

实例1: show/hide row header cell content  

2014-01-25 17:40:24|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

前提:
将rowHeader,selectRow和indirectSelect这三个模块引入,gridx会出现一列checkbox或radiobox column
实例1, - 星期五 - 星期五
需求:
提供show和hide方法,将rowHeader中的checkbox或radiobox显示和隐藏动态控制起来

分析indirectSelect模块,这个模块依赖rowHeader和selectRow模块,它提供了rowHeader的headerProvider和cellProvider方法,去创建checkbox或者radiobox,我们只需要使用aspect的after方法修改这两个方法的最终输出,让它们隐藏掉就行。

rowHeader模块在它的构造函数中提供了headerNode和bodyNode,用来放置headerProvider和cellProvider方法输出的Dom元素。

rowHeader代码片段

// headerProvider: Function
// A functionn that returns an HTML string to fill the header cell of row headers.
headerProvider: null,

// cellProvider: Function
// A function that returns an HTML string to fill the body cells of row headers.
cellProvider: null


return declare(_Module, {
name: 'rowHeader',

constructor: function(){
this.headerNode = domConstruct.create('div', {
'class': 'gridxRowHeaderHeader',
role: 'row',
innerHTML: ['<table role="presentation" border="0" cellspacing="0" cellpadding="0" style="width: ',
this.arg('width'),
';"><tr><td class="gridxRowHeaderHeaderCell" role="rowheader" tabindex="-1"></td></tr></table>'
].join('')
});
this.bodyNode = domConstruct.create('div', {
'class': 'gridxRowHeaderBody'
});
},



直接看代码吧!对它进行分析:

define([
"dojo/_base/declare",
"gridx/core/_Module",
"dojo/aspect",
"dojo/_base/array",
"dojo/query",
"dojo/NodeList-dom"
], function(declare, _Module, aspect, array, query){
// summary:
// module name: hiddenRowHeaderCell
return declare(_Module, {
name: 'hiddenRowHeaderCell',
required: ['rowHeader','selectRow','indirectSelect'],

_handlers: [],


hide: function(){
//将gridx中存在的checkbox隐藏
query("td > span", this.grid.rowHeader.bodyNode)
.style("display", "none");
query("td > span", this.grid.rowHeader.headerNode)
.style("display", "none");
//修改cellProvider输出,使得新生成的rowHeader隐藏
var cAdvice = aspect.after(this.grid.rowHeader, "cellProvider", function(innerHTML){
return innerHTML.replace('class="gridxIndirectSelectionCheckBox', 'style="display:none;" class="gridxIndirectSelectionCheckBox');
});
if(this.grid.indirectSelect.all){
var hAdvice = aspect.after(this.grid.rowHeader, "headerProvider", function(innerHTML){

return innerHTML.replace('class="gridxIndirectSelectionCheckBox', 'style="display:none;" class="gridxIndirectSelectionCheckBox');
});
this._handlers.push(hAdvice);
}

this._handlers.push(cAdvice);

},

show: function(){
//恢复样式, 让其显示
query("td > span", this.grid.rowHeader.bodyNode)
.style("display", "");
query("td > span",this.grid.rowHeader.headerNode)
.style("display", "");
//删除advices
array.forEach(this._handlers, function(advice){
advice.remove();
});

}

});
});

这样我们便可以通过API控制rowHeader中的checkbox或radiobox的显示和隐藏

API
gridx.hiddenRowHeaderCell.show()
gridx.hiddenRowHeaderCell.hide()


参考资料:
https://github.com/oria/gridx/wiki/What-is-a-Gridx-module%3F
http://oria.github.io/gridx/doc/gridx/core/_Module.html
  评论这张
 
阅读(370)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017