我正在创建一个表,在表中动态添加行。我想通过提供上下文菜单来隐藏所选行。
我创建了html和模型来显示上下文菜单,但是我不怎么称呼双击。我可以用它创建一个上下文菜单,但是现在可以将选定的行索引传递到函数中,这样我就可以使用该索引来显示或隐藏。
表行中的数据是2种类型,如果我从后端获取数据,那么我将在行中显示该数据,但数据不存在,那么我将在表行的单元格中添加输入元素。因此,我想创建2个不同的上下文菜单,以在2个不同的行上工作,一个包含来自数据库的数据,另一个包含输入文本框。
我想在具有隐藏选项的背景色灰色的行上添加上下文菜单,而在具有背景的行上的上下文菜单会将该行添加到其他页面。
HTML
<table id="phaseTable" class="table table-bordered">
<thead id="phaseHead">
<tr>
<th id="phase" scope="col" class="textSize grey t-space th-border">{{'eox.label.phases.phase'| localize}}</th>
<th id="description" scope="col" class="textSize grey th-border">{{'eox.label.phases.description'| localize}}</th>
<th id="knowHow" scope="col" class="textSize grey th-border">{{'eox.label.phases.how'| localize}}</th>
</tr>
</thead>
<tbody id="phaseBody">
<tr context-menu data-target="phase-row-hide" data-ng-repeat="pointCle in jes.listePointCle" id="{{$parent.$id+'-'+$index}}"
data-ng-click="setRowSelected($parent.$id,$index)">
<td id="phaseData" nowrap="nowrap" align="center" class="textSize grey t-space td-border"
data-ng-if="pointCle.type.length > 0">{{pointCle.type}}
</td>
<td id="phaseData" nowrap="nowrap" align="center" class="t-space td-border"
data-ng-if="pointCle.type == undefined || pointCle.type.length == 0 || pointCle.type.length == ''">
<input type="text" name="phaseData" maxlength="10" size="5" value="100" style="text-align: center;" class="input-how">
</td>
<td id="descriptionData" class="textSize grey t-space td-border"
data-ng-if="pointCle.designation.length > 0">{{pointCle.designation}}
</td>
<td id="descriptionData" class="t-space td-border"
data-ng-if="pointCle.designation == undefined || pointCle.designation.length == 0 || pointCle.designation.length == ''">
<input id="descriptionData{{$index}}"type="text" name="descriptionData" maxlength="50" size="50" value="OC BLA BLA" class="input-how"
data-ng-keypress="addRowPhaseOnPress($index)">
</td>
<td id="knowHowData" class="textSize grey t-space td-border"
data-ng-if="pointCle.risque.length > 0">{{pointCle.risque}}
</td>
<td id="knowHowData" class="t-space td-border"
data-ng-if="pointCle.risque == undefined || pointCle.risque.length == 0 || pointCle.risque.length == ''">
<input type="text" name="knowHowData" id="knowHowData" size="50" maxlength="50" class="input-how">
</td>
</tr>
</tbody>
</table>
型号
<div class="position-fixed" id="phase-row-hide">
<ul class="dropdown-menu" role="menu">
<li>
<a class="pointer" role="menuitem" tabindex="1" data-ng-click="setRowSelected()">
Hide Row
</a>
</li>
</ul>
JS-选择行的代码
$scope.setRowSelected = function(id,index){
alert('id = '+id);
alert('index = '+index);
alert('rowId = '+id+'-'+index);
$scope.selectedRow = index;
}
屏幕显示
上下文菜单指令:
app.directive("contextMenu", function() {
return {
link: postLink
};
function postLink(scope, elem, attrs) {
elem.on("contextmenu", function (e) {
scope.$apply(function() {
var locals = {$event: e, $scope: scope, $element: elem};
scope.$eval(attr.contextMenu, locals);
});
};
}
})
用法:
<tr context-menu="onContext($event, $index)" ...
$scope.onContext = function(ev, index) {
ev.preventDefault();
console.log(index);
//...
};
有关更多信息,请参阅