在引导程序弹出窗口中显示光滑的网格行编辑器

Displaying a slick grid row editor in bootstrap popover

本文关键字：网格 编辑器 显示 引导程序 窗口      更新时间：2023-09-26

我在光滑网格的一列中有一个编辑和删除链接。当我点击编辑按钮时，我想要一个带有行详细信息的引导弹出窗口。

我之所以成功，是因为我能够渲染popover，但看起来它隐藏在桌子后面。我尝试设置z-index，但没有成功。以下代码：

    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);
    })

请帮助

我正在做类似的事情。当我双击光滑网格中的一行时，会出现一个引导模式。模态显示我使用AJAX获取的行的详细信息（加上一些更多信息）。这工作得很好，z索引没有问题。

也许我们的方法有点太不同了，但我希望下面的代码能有所帮助。

引导模式

<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>

滑动网格设置

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()
    )

显示模式

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()
    )

我遇到了与操作相同的问题。不确定为什么这被标记为答案，因为最初的问题是关于引导弹出的，而答案是关于模态的。我猜这篇专栏文章变成了模态。

无论如何，如果其他人在slickgrid中尝试使用bootstrap popover时有同样的问题，就发布这个。要解决这个问题，只需将容器设置为body。。。数据容器="正文"

相关文章：