[英]Displaying a slick grid row editor in bootstrap popover
I have an an edit and a delete link in a column in the slick grid. 我在光滑网格的列中有一个编辑和删除链接。 When i click on the edit button i want to a bootstrap popover with the row details in it. 当我点击编辑按钮时,我想要一个带有行详细信息的bootstrap popover。
I was successful to the extent that i am able to render the popover but looks like it hides behind the table. 我成功的程度,我能够呈现弹出窗口,但看起来它隐藏在桌子后面。 I tried setting the z-index
but to no avail. 我尝试设置z-index
但无济于事。 Code below: 代码如下:
var popoverReference = $(".growthGridActions_edit").popover({
'title': 'Edit Record',
'html' : true,
'placement' : 'left',
'template': popOverTemplate
});
popoverReference.click(function(e) {
var me = $(this), rowid = me.attr('rowId');
var editGrowthRecordView = new WTG.view.GrowthEditView({
template:$("#GROWTH-RECORD-EDIT").html(),
model: new WTG.Model(growthGridRef.getDataItem(rowid))
});
editGrowthRecordView.render();
$("#"+me.attr('id')).attr('data-content', editGrowthRecordView.$el.html());
var popover = $("#"+me.attr('id')).data('popover');
popover.setContent();
popover.$tip.addClass(popover.options.placement);
})
Please help 请帮忙
I am doing something similar. 我正在做类似的事情。 I have a bootstrap modal appearing when I double-click a row in my slick grid. 当我在我的光滑网格中双击一行时,我出现了一个引导模式。 The modal displays the details of the row (plus some more info) which I fetch using AJAX. 模态显示我使用AJAX获取的行的详细信息(以及更多信息)。 This works just fine, no problems with z-index. 这工作得很好,没有z-index的问题。
Maybe our approaches are a bit too different but I hope the code below helps. 也许我们的方法有点太不同但我希望下面的代码有所帮助。
The Bootstrap Modal Bootstrap模态
<div id="user-details-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 650px">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">User View</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" action="/user/update" method="POST">
<input type="hidden" id="userId" name="userId"/>
<div class="control-group">
<label class="control-label" for="firstName">First Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input class="input-xlarge" type="text" required id="firstName" name="firstName" placeholder="First Name">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lastName">Last Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input class="input-xlarge" type="text" required id="lastName" name="lastName" placeholder="Last Name">
</div>
</div>
</div>
... more fields
<div class="modal-footer">
<button type="submit" class="btn btn-info">Save Changes</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
Slick Grid Setup 光滑网格设置
setupGrid:(onDblClick)->
grid = new Slick.Grid(@gridId, dataView, @columns, options)
grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }))
grid.onDblClick.subscribe((e, args)->
onDblClick(dataView.getItem(args.row).id);
)
$(window).resize(->
grid.resizeCanvas()
)
Displaying the Modal 显示模态
onDblClick = (id) =>
$userDetails = $('#user-details-modal')
$.get('/user/' + id + '/details')
.success((results)->
$userDetails.find('#userId').val(results.id)
$userDetails.find('#firstName').val(results.FirstName)
$userDetails.find('#lastName').val(results.LastName)
$userDetails.find('#userName').val(results.UserName)
$userDetails.find('#email').val(results.Email)
$userDetails.find('#password').val(results.Password)
$userDetails.modal()
)
I had the same problem as the op. 我和op有同样的问题。 Not sure why this was marked the answer since the original question was about bootstrap pop over and the answer is about a modal. 不知道为什么这是标记答案,因为最初的问题是关于bootstrap pop over和答案是关于模态的。 I am guessing the op changed to a modal. 我猜测op改为模态。
Anyways just posting this if anyone else has the same issue when trying to use bootstrap popover in slickgrid To resolve that just set the container to body... data-container='body' 无论如何只是发布这个,如果其他人有同样的问题,当试图在slickgrid中使用bootstrap popover要解决这个问题,只需将容器设置为body ... data-container ='body'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.