Question

如何在不将细胞倒在固定宽度的tbody容器上的情况下使这些表格单元格可以排序？当我将一个单元格移动到上方或下方的行中时，第3列中的单元格将倒在容器上，而不是向下到达下方或上方的列.....这是我的代码......

的jQuery

$document.ready(function(){
    $(function() {
        $( "#sortable_grid" ).sortable({
            items: 'td'
            //helper: "clone"
        });

        $( "#sortable_grid" ).disableSelection();
    });
});

CSS

#sortable_grid { 
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 450px;
}
#sortable_grid td {
  margin: 3px 3px 3px 0;
  padding: 1px;
  float: left;
  width: 100px;
  height: 90px;
  font-size: 4em;
  text-align: center;
}

.ui-state-default{
  width:100px;
}

HTML

<table id="sortable" border="1" width="300">
<tbody id="sortable_grid">
    <tr width="300">
        <td width="100" class="ui-state-default">1</td>
        <td width="100" class="ui-state-default">2</td>
        <td width="100" class="ui-state-default">3</td>
    </tr>
    <tr>
        <td width="100" class="ui-state-default">4</td>
        <td width="100" class="ui-state-default">5</td>
        <td width="100" class="ui-state-default">6</td>
    </tr>
    <tr>
        <td width="100" class="ui-state-default">7</td>
        <td width="100" class="ui-state-default">8</td>
        <td width="100" class="ui-state-default">9</td>
    </tr>   
    <tr>    
        <td width="100" class="ui-state-default">10</td>
        <td width="100" class="ui-state-default">11</td>
        <td width="100" class="ui-state-default">12</td>
    </tr>
</tbody>

Answer 1

这是一个css问题：边距单元格，填充，边框表在300 px div中发生，所以你的3 100 px td没有占用空间。

你应该使用

public static class TransparentComboBoxTableCell<S, T> extends ComboBoxTableCell<S, T> {
    public TransparentComboBoxTableCell() {
        this(FXCollections.observableArrayList());
    }
    public TransparentComboBoxTableCell(ObservableList<T> startingItems) {
        super(startingItems);
        try {
            Field f = ComboBoxTableCell.class.getDeclaredField("comboBox");
            f.setAccessible(true);
            f.set(this, new ComboBox<>());
            comboBox = (ComboBox<T>) f.get(this);
            // Setup out of javafx.scene.control.cell.CellUtils.createComboBox
            // comboBox.converterProperty().bind(converter);
            comboBox.setMaxWidth(Double.MAX_VALUE);
            comboBox.getSelectionModel().selectedItemProperty().addListener((ov, oldValue, newValue) -> {
                if (this.isEditing()) {
                    this.commitEdit((T) newValue);
                }
            });
        } catch (NoSuchFieldException | SecurityException | IllegalArgumentException | IllegalAccessException ex) {
            Logger.getLogger(FXMLDocumentController.class.getName()).log(Level.SEVERE, null, ex);
            throw new Error("Error extracting 'comboBox' from ComboBoxTableCell", ex);
        }
        tableValue = () -> (S) this.getTableRow().getItem();
    }

    public final ComboBox<T> comboBox;
    public final Supplier<S> tableValue;
}

而不是

 #sortable_grid td {
...
  width: 91px;
...
}

Answer 2

这不是关于您的代码的直接答案，但也许您使用List JS可能会有更多的运气。

如何使这些表格单元格可以排序？

2 个答案: