jQuery-ui에서 선택된 항목 만 Java 스프링 컨트롤러로 선택하는 방법

일부 컨트롤러의 모든 요소를 컨트롤러로 제출하는 양식의 컨트롤러 및 JSP가 있습니다.jQuery-ui에서 선택된 항목 만 Java 스프링 컨트롤러로 선택하는 방법

스프링 컨트롤러에 선택된 jQuery-UI 선택 항목 만 제출하고 싶습니다. 컨트롤러에 다시 선택된 항목을 제출하는 방법이 있나요

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

: 컨트롤러 여기

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

그리고 :

내 .jsp로는 다음과 같다?

출처

2014-11-17 Miljac

jQuery와 JSTL에 대해 많이 읽은 후 선택되지 않은 DOM 요소를 지우는 jQuery 함수를 추가하는 것이 가장 좋습니다. 빈 함수를 사용했지만 .remove()도 트릭을 수행합니다.

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

"#categorySubmit는"이름을 가진 버튼을 제출 지정된 ID이고 당신이 마지막으로 선택한 요소보다 큰 인덱스 요소 만 제거되기 때문에, 힘든 조심해야

요소 "카테고리 삭제" 하위 색인은 선택되지 않은 속성 값이 .empty() 및 .remove() 둘 다에 대해 null (또는 0)으로 설정됩니다.

출처

2014-11-26 10:03:54 Miljac

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>

출처

2014-11-17 12:38:18

jQuery-ui에서 선택된 항목 만 Java 스프링 컨트롤러로 선택하는 방법

답변

관련 문제