Jquery ui 可排序表行与特定静态列

问题描述 投票:0回答:1

我在表上的 jquery 可排序方面遇到问题。我的桌子是这样的:

<table>
 <thead>
   <th>Number</th>
   <th>Text</th>
   <th>Order</th>
 </thead>
 <tbody id="sortable" data-bind="foreach: fruits">
  <tr class="ui-state-default">
   <td data-bind="text: number"></td>
   <td data-bind="text: fruit"></td>
   <td data-bind="text: order"></td>
  <tr>

我希望它可以排序,除了在订单列上,我有这个代码,但它不起作用

$( function() {
$( "#sortable" ).sortable({
    items: 'td:not(:nth-child(3))' }
});

例如,如果我有

jquery jquery-ui jquery-ui-sortable
1个回答
0
投票

考虑替代方法。

$(function() {
  $("#sortable").sortable();
});
.sidebyside {
  float: left;
  margin: 0;
  margin-right: -1px;
  padding: 0;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
<div style="width: 400px;">
  <table class="sidebyside" style="width: 66%;">
    <thead>
      <th>Number</th>
      <th>Text</th>
    </thead>
    <tbody id="sortable" data-bind="foreach: fruits">
      <tr class="ui-state-default">
        <td data-bind="text: number">1</td>
        <td data-bind="text: fruit">Banana</td>
      </tr>
      <tr class="ui-state-default">
        <td data-bind="text: number">2</td>
        <td data-bind="text: fruit">Apple</td>
      </tr>
      <tr class="ui-state-default">
        <td data-bind="text: number">3</td>
        <td data-bind="text: fruit">peach</td>
      </tr>
    </tbody>
  </table>
  <table class="sidebyside" style="width: 33%;">
    <thead>
      <th>Order</th>
    </thead>
    <tbody data-bind="foreach: fruits">
      <tr class="ui-state-default">
        <td data-bind="text: order">5</td>
      </tr>
      <tr class="ui-state-default">
        <td data-bind="text: order">10</td>
      </tr>
      <tr class="ui-state-default">
        <td data-bind="text: order">10</td>
      </tr>
    </tbody>
  </table>
  <table>
</div>

填充表格会需要更多工作,但它确实实现了您的目标。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.