如何仅从jQueryUI向JavaSpring控制器提交选定项_Java_Jsp_Jquery Ui_Spring Mvc_Jquery Ui Selectable

如何仅从jQueryUI向JavaSpring控制器提交选定项

java jsp jquery-ui spring-mvc

如何仅从jQueryUI向JavaSpring控制器提交选定项,java,jsp,jquery-ui,spring-mvc,jquery-ui-selectable,Java,Jsp,Jquery Ui,Spring Mvc,Jquery Ui Selectable,我有一个工作控制器和jsp，表单将一些列表的所有元素提交回控制器我只想将jQuery ui的选定项提交给spring控制器 My.jsp如下所示： <html> <head> ...  <script src="<c:url value="/resources/jquery-2.1.1.js" />"></script> <!-- j

我有一个工作控制器和jsp，表单将一些列表的所有元素提交回控制器

我只想将jQuery ui的选定项提交给spring控制器

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

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

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

在阅读了大量关于jQuery和JSTL的内容之后，我想到的最好的事情是添加jQuery函数，它清除未选中的dom元素。我已经使用了空函数，但是.remove也会起作用

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

其中categorySubmit的id被指定给名为Delete category的submit按钮

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

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