在引導彈出窗口中顯示光滑的網格行編輯器

我在光滑網格的列中有一個編輯和刪除鏈接。當我點擊編輯按鈕時，我想要一個帶有行詳細信息的引導程序彈出窗口。在引導彈出窗口中顯示光滑的網格行編輯器

我成功了，我能夠呈現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); 
    })

請幫

來源

2013-02-22 user1368258

我在做類似的事情。當我在光滑的網格中雙擊一行時，我會看到一個引導模式。該模式顯示我使用AJAX獲取的行的細節（加上一些更多的信息）。這工作得很好，沒有z-index的問題。

也許我們的方法有點太不同了，但我希望下面的代碼有所幫助。

引導程序模態

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

來源

2013-03-11 11:14:29 biofractal

我遇到了與操作相同的問題。不知道爲什麼這是標記的答案，因爲原來的問題是關於引導彈出，答案是關於模態。我猜測操作已改爲模態。

反正只是張貼這一點，如果任何人有試圖利用引導酥料餅在slickgrid要解決剛纔設置的容器體...數據容器=「身體」

當同樣的問題

來源

2013-06-10 09:15:13 shai

在引導彈出窗口中顯示光滑的網格行編輯器

回答

相關問題