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); };
评一波