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函数中编写使用jQuery并动态添加它。

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

jQuery UI可以使用表格和模态弹出窗口进行排序

1 个答案: