Jquery 如何向DataTable添加下拉列表-Spring MVC_Jquery_Spring_Spring Mvc_Drop Down Menu_Datatables

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

jquery spring spring-mvc drop-down-menu datatables

Jquery 如何向DataTable添加下拉列表-Spring MVC,jquery,spring,spring-mvc,drop-down-menu,datatables,Jquery,Spring,Spring Mvc,Drop Down Menu,Datatables,在Spring MVC应用程序中，如何在数据表的最后一列中添加从数据库填充的下拉列表问题：下拉列表位于表格上方，而不是表格内部，下拉列表应位于每行型号： @Entity @Table(name = "myDatabaseTable") public class DropdownList { @Id @Column(name = "ID") private Integer id; @Column(name = "CODE") private Stri

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

问题：下拉列表位于表格上方，而不是表格内部，下拉列表应位于每行

型号：

@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;
        }


模型
命令
描述
下拉列表

控制器：

<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;
        }

@RequestMapping（value=“/”，method=RequestMethod.GET）
公共模型和视图索引（）{
ModelAndView模型=新的ModelAndView（“索引”）；
List dropdownList=（List）dropdownlisterpo.findAll（）；
addObject（“dropdownLists”，dropdownLists）；
addObject（“dropdownList”，新的dropdownList（））；
model.setViewName（“索引”）；
收益模型；
}

注意：当我在上面的代码中使用

标记时，我得到一个DataTable错误：

未捕获的TypeError:无法设置未定义的属性“\u DT\u CellIndex”

基本上，您没有生成有效的

表

标记。如果希望

select

位于每行的最后一个单元格中，则需要将一行（

tr

）添加到表体（

tbody

），将4个单元格的集合（

td

）添加到行中（以匹配表头（

thead

）中的列），然后将

select

添加到最后一个单元格中。如果为每一行填充

select

的内容相同，则最好将其作为最后一列的

render

函数。只要标记是有效的html，Datatables就应该能够处理。这不是魔法，但并不遥远；-）

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

<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>


模型
命令
描述
下拉列表
模型#
命令#
描述#
--挑选--
选择1
选择2
选择3
选项N

我有点困惑，为什么你想添加一个无序列表（

ul

），而select是唯一的列表项（

li

），也许它会被其他列表项填充？如果是，请重新添加

希望能有所帮助。