Question

我想从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>

JS

$(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');       



});

我可以获取所选记录的列表。我想添加一个按钮，将该列表发送给控制器。但我不知道该怎么做。有谁知道答案？

Answer 1

在使用按钮单击事件处理程序然后使用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
        }
    });
  }
}

从jquery jtable向控制器发送选定的记录

1 个答案: