отправка выбранных записей в контроллер из jquery jtable

Я хочу выбрать несколько записей из jtable и отправить на контроллер весны. До сих пор я сделал:отправка выбранных записей в контроллер из jquery jtable

HTML

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%> 
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>jtable integration</title> 

<%-- JQuery --%> 
<script src="<c:url value="/js/jquery-1.8.2.js" />"></script> 
<script src="<c:url value="/js/jquery-ui-1.10.4.custom.js" />"></script> 

<%-- Jtable --%> 

<script src="<c:url value="/js/Utility.js" />"></script> 
<script src="<c:url value="/js/jTable/jquery.jtable.js" />"></script> 
<script src="<c:url value="/js/jTable/jquery.jtable.min.js" />"></script> 
<script src="<c:url value="/js/StudentJtable.js" />"></script> 

<link href="<c:url value="/css/jquery-ui-1.10.4.custom.css" />" 
    rel="stylesheet"> 
<link href="<c:url value="/js/jTable/Themes/Metro/blue/jtable.css" />" 
    rel="stylesheet"> 


</head> 
<body> 
    <h1>hi</h1> 
    <div> 
     <div id="StudentTableContainer" style="width: 99%;"></div> 
    </div> 
    <div id="SelectedRowList"></div> 


    <button onclick="myFunction()"></button> 
    <label id="test">tttt</label> 

</body> 
</html>

$(document).ready(function() {    
    //setup the jtable that will display the results 
    $('#StudentTableContainer').jtable({ 
     title: 'Table of Student', 
     paging: true, //Enable paging 
     pageSize: 10, //Set page size (default: 10) 
     sorting: true, //Enable sorting 
     selecting: true, //Enable selecting 
     multiselect: true, //Allow multiple selecting 
     selectingCheckboxes: true, //Show checkboxes on first column 
     actions: { 
      listAction: 'datatable/getAllStudents', 
      createAction: 'datatable/CreateStudent' 
     }, 
     fields: { 
      id: { 
       title: 'iD', 
       key: true, 
       list: true, 
       create: false, 
       edit: false 
      }, 
      name: { 
       title: 'name', 
       width: '50%' 
      }, 
      age: { 
       title: 'age', 
       width: '30%' 
      } 

     }, 

     //Register to selectionChanged event to hanlde events 
     selectionChanged: function() { 
      //Get all selected rows 
      var $selectedRows = $('#StudentTableContainer').jtable('selectedRows'); 

      $('#SelectedRowList').empty(); 
      if ($selectedRows.length > 0) { 
       //Show selected rows 
       $selectedRows.each(function() { 
        var record = $(this).data('record'); 
        $('#SelectedRowList').append(
         '<b>StudentId</b>: ' + record.id + 
         '<br /><b>Name</b>:' + record.name + '<br /><br />' 
         ); 
       }); 
      } else { 
       //No rows selected 
       $('#SelectedRowList').append('No row selected! Select rows to see here...'); 
      } 
     }, 


     recordsLoaded: function() { 

      $(".jtable tbody").sortable({ 
       cursor: 'move', 
       opacity: 0.9, 
       axis: 'y', 
       start: function (event, ui) { 
        if ($.browser.webkit) { 
         wscrolltop = $(window).scrollTop(); // bug fix 
        } 
       }, 
       sort: function (event, ui) { 
        if ($.browser.webkit) { 
         ui.helper.css({ 'top': ui.position.top + wscrolltop + 'px' }); // bug fix 
        } 
       }, 
       update: function(event, ui) { 

        // do jquery HERE on sort 

       } 

      }).disableSelection(); 

     }, 

    }); 
    $('#StudentTableContainer').jtable('load');  



});

я могу получить список записей, которые будут выбраны. Я хочу добавить кнопку, которая отправит этот список на контроллер. но я не уверен, как это сделать. Кто-нибудь знает ответ?

источник

2015-11-23 mona

Я реализовал что-то вроде этого, прежде чем использовать обработчик события нажатия кнопки, а затем используется Ajax, чтобы отправлять обратно к контроллеру:

$('#YourButton').on('click', function(e) { 
    e.preventDefault(); 
    var selectedRows = $('#YourJTable').jtable('selectedRows'); 
    if (selectedRows.length > 0) { 
    // build array of records 
    var arrayRecords = new Array(); 
    selectedRows.each(function (index, element) { 
     arrayRecords[index] = $(this).data('record'); 
    }); 

    // array to JSON 
    var dataModel = JSON.stringify(arrayRecords); 

    // use ajax to post back to controller 
    $.ajax({ 
     url: 'YourControllerAction', 
     type: 'POST', 
     dataType: 'json', 
     data: dataModel, 
     contentType: 'application/json; charset=utf-8', 
     success: function (data) { 
      // handle success case 
     }, 
     error: function (err) { 
      // handle error case 
     } 
    }); 
    } 
}

источник

2016-02-10 22:08:45 cindyr

отправка выбранных записей в контроллер из jquery jtable

ответ

Смежные вопросы