jQuery UI 可排序的表格和模式弹出窗口

Question

一个：我需要一个带有可排序行的表（请参阅 jqueryui.com）。通常，这些示例会为您提供列表项，但很有可能使用表格行来执行此操作。这是我的作业http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/ 和他的 jsfiddle：http://jsfiddle.net/bgrins/tzYbU/ 他基本上解释了与使表格行可排序相关的修复。

两个：我需要这些可排序的表格行在悬停时弹出模式。看来我只能有一个或另一个。可排序的行移动，但弹出窗口不起作用（http://jsfiddle.net/anschwem/gAmnQ/2/ 它在我的末端排序/拖动，但不是小提琴）或模态弹出窗口工作和排序，但它是列表项目。 (http://jsfiddle.net/anschwem/gAmnQ/1/)。然后有一个奇怪的事件，一行被踢出表格，只有它的悬停工作（http://jsfiddle.net/anschwem/gAmnQ/2/）。无论如何，由于正确的间距以及我还需要动态创建新行的事实，我需要行。有任何想法吗？

这是我的可排序表格的 HTML：

<table class="table_177" id="sortable2" class="connectedSortable inputboxes">
<thead>
  <tr>
    <th>Vessel Name</th>
    <th>Hull/IMO No.</th>
  </tr>
</thead>  
  <tr>
    <a class="productsModal1" style="text-decoration:none">
    <td class="ui-state-highlight" style="border-right:none">SS Mary Mae</td>
    <td class="ui-state-highlight" style="border-left:none">12345</td></a>
  </tr>      
  <tr>
    <a class="productsModal1" style="text-decoration:none">
    <td class="ui-state-highlight" style="border-right:none">EMS 234</td>
    <td class="ui-state-highlight" style="border-left:none">12346</td></a>
  </tr> 
</table>

我的隐藏模式的 HTML 和 CSS：

<style>
div.productsModal1
{
    display:none;
    position:absolute;
    border:solid 1px black;
    padding:8px;
    background-color:white;
}
a.productsModal1:hover + div.productsModal1
{
    display:block;
/*  animation:fade-out .5s 1;
    animation-transition-property: opacity;*/
}
div.productsModal1:hover
{
    display:block;
/*  animation:fade-out .5s 1;
    animation-transition-property: opacity;*/
}
</style>
    <div class="productsModal1" style="top: 230px; left: 320px; z-index:9999" >
  <table id="menu1">
    <tr>
      <th>Vessel Name</th>
      <th>Vessel Type</th>
      <th>Hull/IMO No.</th>
    </tr>
    <tr>
      <td>SS Mary Mae</td>
      <td>Barge</td>
      <td>12345</td>
    </tr>
  </table>
  </div>
  <div class="productsModal1" style="top: 230px; left: 320px; z-index:9999" >
  <table id="menu1">
    <tr>
      <th>Vessel Name</th>
      <th>Vessel Type</th>
      <th>Hull/IMO No.</th>
    </tr>
    <tr>
      <td>EMS 234</td>
      <td>Barge</td>
      <td>67891</td>
    </tr>
  </table>
  </div>

还有我的代码：

$(window).load(function(){
// Return a helper with preserved width of cells
var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      $(this).width($originals.eq(index).width())
    });
    return $helper;
};
    $("#sortable2 tbody").sortable({helper: fixHelperModified}).disableSelection();
});//]]> 

Answer 1

• 首先，删除包裹td 的锚标记，因为那是无效的HTML.. 并将类添加到您的tr，还使用数据索引来存储默认索引，因为您将移动它们并且需要一种方法将它们与模态联系起来

把 tr 改成这个

<tr class="productsModal1" data-index=0>
  <td class="ui-state-highlight" style="border-right:none">SS Mary Mae</td>
  <td class="ui-state-highlight" style="border-left:none">12345</td>
</tr>
<tr class="productsModal1" data-index=1>
  <td class="ui-state-highlight" style="border-right:none">EMS 234</td>
  <td class="ui-state-highlight" style="border-left:none">12346</td>
</tr>

• 不知道为什么 $(window).load 函数不起作用..但是使用 document.ready 函数修复了排序不起作用的问题..

• 然后您可以使用 jQuery 显示/隐藏相关的 div

JS

$('#sortable2 tbody tr').on({
    mouseenter: function () {
      $('div.' + $(this).attr('class')) // <-- this gets the div.. though the share the same class so can probably just hardcode
            .eq($(this).data('index')) // <-- gets the correct one according to data-index
            .show();
    },
    mouseleave: function () {
      $('div.' + $(this).attr('class'))
            .eq($(this).data('index'))
            .hide();
    }
});

FIDDLE

另一件事是，如果您不想进入并硬编码数据属性。您可以在 document.ready 函数中编写 use jQuery 并动态添加它。

$('#sortable2 tbody tr').each(function(i,v){
     $(this).data('index',i);
});