如何仅从可选择的 jQuery-ui 提交选定的项目到 java spring 控制器

我有工作控制器和jsp，其形式将某个列表的所有元素提交回控制器。

我只想提交可选择的 jQuery-ui 的选定项目到 spring 控制器。

我的.jsp如下所示：

<html>
  <head>
    ...
    <!-- jQuery rference -->
    <script src="<c:url value="/resources/jquery-2.1.1.js" />"></script>
    <!-- jQuery-ui reference -->
    <script src="<c:url value="/resources/jquery-ui-1.11.2.custom/jquery-ui.js" />"></script>
    <script>
      $(function() {$("#selectable").selectable();});       
    </script>
  </head>
  <body>
    ...
    <!-- context path -->
    <c:set var="contextPath" value="${pageContext.request.contextPath}" />
    <form:from action="${contextPath}/user/categories/delete" method="POST" modelAttribute="categoryList">
      <input type="submit" value="Delete Selected" />
      <ol id="selectable">
        <c:forEach items="${categoryList.catList}" var="category" varStatus="status">
          <li class="ui-widget-content" value="${category}">${category.name}</li>
          <input type="hidden" name="catList[${status.index}].id" value="${category.id}" />
          <input type="hidden" name="catList[${status.index}].name" value="${category.name}" />
        </c:forEach>
      </ol>
    </form:form>
  </body>
</html>

这是控制器：

@Controller
public class CategoriesController {
 @Autowired
 private CategoryDetailService categoryDetailService;
 @RequestMapping("user/categories/delete")
public String deleteCategory(@ModelAttribute("categoryList") CategoryList categoryList) {
    //do something
    return "redirect:/user/categories";
}

有没有办法仅将选定的项目提交回控制器？

在阅读了很多关于jQuery和JSTL的信息后，我想出的最好的事情是添加jQuery函数来清除未选择的dom元素。我使用了空函数，但 .remove（）也可以解决问题。

$(function() {
    $("#categorySubmit").button().click(function(event) {
        $(function() {
            $("#selectable li:not(.ui-selected)", this).each(function() {
                $(this).empty();
            });
        });
    });
});

其中"#categorySubmit"是用于提交按钮的id，名称为"删除类别"

您必须小心，因为只有索引大于上次选定元素的元素才会被删除，未选择索引较低的元素对于 .empty（）和 .remove（）的属性值都设置为 null（或 0）。

在 Ui 中添加一个隐藏变量，并将所选值附加到该隐藏变量，并在提交后在控制器中读取隐藏变量的值。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Selectable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>
  <script>
  $(function() {
      $( "#selectable" ).selectable({
         selected: function() {
            $( ".ui-selected", this ).each(function() {
                var hdnValue = $('#hdnFieldName').val();
                var selectedValue=$(this).text() ;
                if(hdnValue!='') {
                    $('#hdnFieldName').val(hdnValue +','+selectedValue);
                }
                alert(hdnValue);
            });
         }
      });
   });
  </script>
</head>
<body>
    <form action="${contextPath}/user/categories/delete" method="POST" >
      <input type="submit" value="Delete Selected" />
      <ol id="selectable">
        <li class="ui-widget-content">Item 1</li>
        <li class="ui-widget-content">Item 2</li>
        <li class="ui-widget-content">Item 3</li>
        <li class="ui-widget-content">Item 4</li>
        <li class="ui-widget-content">Item 5</li>
        <li class="ui-widget-content">Item 6</li>
        <li class="ui-widget-content">Item 7</li>
      </ol>
      <input type="hidden" id="hdnFieldName"/>
  </form>
</body>
</html>

相关内容

最新更新

热门标签：