Java 从jquery jtable向控制器发送所选记录
我想从jtable中选择多个记录并发送到我的spring控制器。 到目前为止,我已经做了: HTML JS 我可以得到所选记录的列表。我想添加一个按钮,将此列表发送到控制器。但我不知道怎么做。Java 从jquery jtable向控制器发送所选记录,java,jquery,spring-mvc,jquery-jtable,Java,Jquery,Spring Mvc,Jquery Jtable,我想从jtable中选择多个记录并发送到我的spring控制器。 到目前为止,我已经做了: HTML JS 我可以得到所选记录的列表。我想添加一个按钮,将此列表发送到控制器。但我不知道怎么做。 有人知道答案吗?在使用按钮单击事件处理程序之前,我已经实现了类似的功能,然后使用ajax发回控制器: $('#YourButton').on('click', function(e) { e.preventDefault(); var selectedRows = $('#YourJTable')
有人知道答案吗?在使用按钮单击事件处理程序之前,我已经实现了类似的功能,然后使用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
}
});
}
}
$(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');
});
$('#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
}
});
}
}