Question

如何在Spring MVC应用程序的DataTable的最后一列中添加从数据库填充的下拉列表？

问题：下拉列表位于表格上方，而不在表格内，下拉列表应位于每一行。

模特：

@Entity
@Table(name = "myDatabaseTable")
public class DropdownList {

    @Id
    @Column(name = "ID")
    private Integer id;

    @Column(name = "CODE")
    private String code;

    {...getters and setters here...}

查看：

<div>
    <input type="submit" value="Find" id="goToDetails" />
</div>

<!--Display Table -->
<div class="rows">
    <div class="col-lg-12">
        <table id="Orders" class="display select">
            <thead>
                <tr>
                    <th>Model</th>
                    <th>Order</th>
                    <th>Description</th>
                    <th>DropDown List</th>
                </tr>
            </thead>
                    <ul class="list-group" id="info-list-box">
                        <li class="list-group-item control-label">
                            <form:select path ="dropdownList" name="selectedCode">
                                <form:option value="" label="-- Select --" />
                                    <c:forEach var="dropdownList" items="${dropdownLists}" >
                                        <form:option value="${dropdownList.id}" label = "${dropdownList.code}"> </form:option>
                                    </c:forEach>
                            </form:select>
                        </li></ul></table>
                    </div>
               </div>

控制器：

@RequestMapping(value = "/", method = RequestMethod.GET)
    public ModelAndView index() { 
        ModelAndView model = new ModelAndView("index");

        List<DropdownList> dropdownList = (List<DropdownList>) dropdownListRepo.findAll(); 

        model.addObject("dropdownLists", dropdownLists);
        model.addObject("dropdownList", new DropDownList());
        model.setViewName("index");
        return model;
        }

注意：当我在上面的代码中使用<tbody>标记时，我收到了一个DataTable错误：Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined。

Answer 1

基本上你没有生成有效的table标记。如果您希望select位于每行的最后一个单元格中，则需要向表格主体（tr）添加一行（tbody），行的4个单元格（td）的集合（以匹配表头中的列（thead）），然后将select添加到最后一个单元格。如果您为select填充的内容对于每一行都是相同的，那么最好将其作为最后一列的render函数。只要标记是有效的html，Datatables应该能够应对。它并不神奇，但它并不遥远; - ）。

一个工作示例是here，但这是基本标记：

<div class="rows">
    <div class="col-lg-12">
        <table id="Orders" class="display select">
            <thead>
                <tr>
                    <th>Model</th>
                    <th>Order</th>
                    <th>Description</th>
                    <th>DropDown List</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Model #</td>
                    <td>Order #</td>
                    <td>Description #</td>
                    <td>
                        <select name="selectedCode">
                            <option value="">-- Select --</option>
                            <option value="1">Option 1</option>
                            <option value="2">Option 2</option>
                            <option value="3">Option 3</option>
                            <option value="N">Option N</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

我有点混淆为什么你要添加一个无序列表（ul），其中select是唯一的列表项（li），也许它是＆＃39; s将填充其他列表项的东西？如果是这样，请将其添加回来。

希望有所帮助。

如何向DataTable添加下拉列表 - Spring MVC

1 个答案: