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

星期五

明天不上班

 
 
 

日志

 
 
关于我

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

网易考拉推荐

如何在gridx 加入checkbox column  

2014-03-19 17:49:59|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
说到给gridx加checkbox column时,很多人会想到IndirectSelect模块,但是IndirectSelect模块与Row和RowHeader模块绑定死了,在使用中非常的不灵活,例如不能排序,不能单独使用checkbox事件(例如你不想和Row Select绑死)。
这时候就需要实现自己的checkbox column。
实现checkbox column有两种方式
  • 使用Cell Widget(或者装饰器)
  • 实现自己的module (我更倾向于这种方式)
在看源码前,我们需要了解的知识:
1. 使用div或span元素加样式模拟checkbox三种状态,直接使用
IndirectSelect模块中的code.(捡现成的∩_∩)
2. 搞清楚Body模块上的onAfterCell和onAfterRow的意思
  •       onAfterCell(cell) Fired when a cell is updated by cell editor (or store data change), or by cell refreshing.
  •       onAfterRow(row) Fired when a row is created, data is filled in, and its node is inserted into the dom tree.

3. 需要在声明struct时加入checkBox列,并在store中加入数据

4. 通过onAfterCell事件,我们修改store中的值去更新checkbox状态。

CheckBoxColumn.js

define([
"dojo/_base/declare",
"gridx/core/_Module",
"dojo/_base/array",
"dojo/dom-class",
"dojo/_base/lang"
], function(declare, _Module, array, domClass, lang){
// summary:
// module name: checkBoxColumn
return declare(_Module, {
name: 'checkBoxColumn',

constructor: function(){
this._handlers = [];

//指定那一列是checkBox column, 那一个Field是checkBox所需数据, 默认都是checkBox

this.checkBoxColumnId = this.arg("checkBoxColumnId", "checkBox");
this.checkBoxField = this.arg("checkBoxField", "checkBox");
this.STATUS = {
checked: 2,
partial: 1,
unChecked: 0
}
},

_createCheckBox: function(row){
var cell = row.cell(this.checkBoxColumnId, true);
this._updateCheckBox(cell)
},

_updateCheckBox: function(cell){
var cStatus = cell.rawData();
var cDomNode = cell.node();
if(cStatus === 1){
cDomNode.innerHTML = "<div class='rbacCellContent'>" +
"<span class=\"gridxIndirectSelectionCheckBox dijitReset dijitInline dijitCheckBox dijitCheckBoxPartial\"></span>" +
"</div>";
}else if(cStatus === 2){
cDomNode.innerHTML = "<div class='rbacCellContent'>" +
"<span class=\"gridxIndirectSelectionCheckBox dijitReset dijitInline dijitCheckBox dijitCheckBoxChecked\"></span>" +
"</div>";
}else if(cStatus === 0){
cDomNode.innerHTML = "<div class='rbacCellContent'>" +
"<span class=\"gridxIndirectSelectionCheckBox dijitReset dijitInline dijitCheckBox\"></span>" +
"</div>";
}
},

load: function(args, startup){
var t = this;
startup.then(function(){

var afterRowHandler = t.grid.connect(t.grid.body, 'onAfterRow', lang.hitch(t, t._createCheckBox));
var afterCellHandler = t.grid.connect(t.grid.body, 'onAfterCell',lang.hitch(t, t._updateCheckBox));

t._handlers.push(afterRowHandler);
t._handlers.push(afterCellHandler);
//注册checkBoxClick事件, 当你在点击checkBox时, 对checkBox进行打钩
var checkBoxClickHandler = t.grid.connect(t.grid, 'onCellClick', function(evt){
//evt.originalTarget.className
var target = evt.originalTarget||evt.srcElement;
if(domClass.contains(target, "gridxIndirectSelectionCheckBox")){
var row = t.grid.row(evt.rowId, 1);
var rowData = row.rawData();
var cStatus = rowData[t.checkBoxField];
rowData[t.checkBoxField] = (cStatus === 2? 0 : 2);
t.grid.model.store.put(rowData);
}
});

t._handlers.push(checkBoxClickHandler);

t.loaded.callback();
});
},
/*
* status: "checked, unChecked, partial"

* 提供API修改checkBox状态

*/
updateCheckBoxStatus: function(rowId, status){
var row = this.grid.row(rowId, 1);
var rowData = row.rawData();
var cStatus = rowData[this.checkBoxField];
rowData[this.checkBoxField] = this.STATUS[status];
this.grid.model.store.put(rowData);
},

destroy: function(){
this.inherited(arguments);
//remove event
array.forEach(this._handlers, function(handler){
handler.remove();
});
}
});
});


实际使用

var struct = [
{id: "checkBox", name: "&nbsp;&nbsp;", field: "checkBox", width:"18px"},
{id: "group", name: "Roles/Contexts", field: "group", width:"240px"}
];

var store = new Memory({
data: [
{ id: 0, group: 'Administrator', checkBox: 0},
{ id: 11, group: 'hurry', checkBox: 0},
{ id: 111, group: 'xxxxxxxx', checkBox: 0},
{ id: 21, group: 'XL', checkBox: 0},
{ id: 31, group: 'XXL', checkBox: 0}
]
});

省略 gridx实例化 ... ...

实际效果:(第一列是IndirectSelect, 第二列是CheckBoxColumn)
如何在gridx 加入checkbox column - 星期五 - 星期五

 更多信息可以参考我的github上的issue: https://github.com/oria/gridx/issues/196
  评论这张
 
阅读(627)| 评论(0)
推荐

历史上的今天

评论

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

页脚

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