dataTables中显示按钮可以参考onCellRender中设置
要显示更多操作的按钮可以用popMenu组件
dataTables中通过按钮显示更多操作按钮具体实现如下:
在.w中放一个popMenu,在dataTables的onCellRender中控制列显示按钮,按钮的click事件中打开popMenu
如果要在操作按钮的事件中操作数据可以在model的构造函数中定义实例变量,在onCellRender事件中的按钮的click事件中获取到row和rowID赋值给实例变量
popMenu中按钮事件中通过实例变量去操作,代码如下:
1.popMenu的定义:
<div component="$UI/system/components/justep/popMenu/popMenu" class="x-popMenu"
direction="auto" xid="popMenu1" opacity="0">
<div class="x-popMenu-overlay" xid="div8"/>
<ul component="$UI/system/components/justep/menu/menu" class="x-menu dropdown-menu x-popMenu-content"
xid="menu1">
<li class="x-menu-item" xid="item1">
<a component="$UI/system/components/justep/button/button" class="btn btn-link"
label="获取数据" xid="button7" onClick="button7Click">
<i xid="i10"/>
<span xid="span15">获取数据</span>
</a>
</li>
<li class="x-menu-item" xid="item2">
<a component="$UI/system/components/justep/button/button" class="btn btn-link"
label="删除数据" xid="button8" onClick="button8Click">
<i xid="i11"/>
<span xid="span16">删除数据</span>
</a>
</li>
</ul>
</div>
2.model的构造函数中定义实例变量:
var Model = function() {
this.callParent();
this.row, this.rowID = "";
};
3.dataTables的onCellRender事件中显示按钮,并定义按钮的click事件和传参:
Model.prototype.listDataCellRender = function(event) {
if (event.colName == 'relation0') {
event.html = "<button class='btn btn-default btnDel' onclick='justep.Bind.contextFor(this).$model.optionData(event,event.row,\"" + event.rowID + "\")'>操作</button>";
}
};
4.click事件的调用的optionData函数的定义:
Model.prototype.optionData = function(event, row, rowID) {
//给实例变量赋值
this.row = row;
this.rowID = rowID;
//打开popMenu
var popMenu = this.comp("popMenu1");
var dom = event.currentTarget;
popMenu.set({
'anchor' : dom
});
popMenu.show();
};
5.popMenu中的按钮事件:
Model.prototype.button7Click = function(event) {
var data = this.comp("mainData");
data.getValue("fCode", this.row);
};
Model.prototype.button8Click = function(event){
var data = this.comp("mainData");
data.deleteData(this.row);
};
评一波