Servlet: Controller.java
Java Web 2016
<!DOCTYPE> <html> <head> <title>CRUD operations using jTable in J2EE</title> <!-- Include one of jTable styles. --> <!--<link href="css/metro/blue/jtable.css" rel="stylesheet" type="text/css" />--> <link href="jtable.2.4.0/themes/metro/green/jtable.css" rel="stylesheet" type="text/css"/> <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" /> <!-- Include jTable script file. --> <script src="js/jquery-1.8.2.js" type="text/javascript"></script> <script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script> <script src="js/jquery.jtable.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#StudentTableContainer').jtable({ title: 'Students List', paging: true, //Enable paging pageSize: 10, //Set page size (default: 10) sorting: true, //Enable sorting defaultSorting: 'id ASC', selecting: true, //Enable selecting multiselect: true, //Allow multiple selecting selectingCheckboxes: true, //Show checkboxes on first column selectOnRowClick: false, //Click row on check box actions: { listAction: 'Controller?action=list', createAction: 'Controller?action=create', updateAction: 'Controller?action=update', deleteAction: 'Controller?action=delete' }, toolbar: { items: [{ icon: 'css/images/excel.png', text: 'Export to Excel', click: function () { //perform your custom job... } }, { icon: 'css/images/pdf.png', text: 'Export to Pdf', click: function () { //perform your custom job... } }] }, fields: { //CHILD TABLE DEFINITION FOR "PHONE NUMBERS" Phones: { title: '', width: '5%', sorting: false, edit: false, create: false, display: function (studentData) { //Create an image that will be used to open child table var $img = $('<img src="css/metro/phone_metro.png" title="Edit phone numbers" />'); //Open child table when user clicks the image $img.click(function () { $('#StudentTableContainer').jtable('openChildTable', $img.closest('tr'), { title: studentData.record.Name + ' - Phone numbers', actions: { listAction: '/Demo/PhoneList?StudentId=' + studentData.record.StudentId, deleteAction: '/Demo/DeletePhone', updateAction: '/Demo/UpdatePhone', createAction: '/Demo/CreatePhone' }, fields: { StudentId: { type: 'hidden', defaultValue: studentData.record.StudentId }, PhoneId: { key: true, create: false, edit: false, list: false }, PhoneType: { title: 'Phone type', width: '30%', options: {'1': 'Home phone', '2': 'Office phone', '3': 'Cell phone'} }, Number: { title: 'Phone Number', width: '30%' }, RecordDate: { title: 'Record date', width: '20%', type: 'date', displayFormat: 'yy-mm-dd', create: false, edit: false } } }, function (data) { //opened handler data.childTable.jtable('load'); }); }); //Return image to show on the person row return $img; } }, //CHILD TABLE DEFINITION FOR "List Note" Exams: { title: '', width: '5%', sorting: false, edit: false, create: false, display: function (studentData) { //Create an image that will be used to open child table var $img = $('<img src="css/metro/list_metro.png" title="Edit exam results" />'); //Open child table when user clicks the image $img.click(function () { $('#StudentTableContainer').jtable('openChildTable', $img.closest('tr'), //Parent row { title: studentData.record.Name + ' - Exam Results', actions: { listAction: '/Demo/ExamList?StudentId=' + studentData.record.StudentId, deleteAction: '/Demo/DeleteExam', updateAction: '/Demo/UpdateExam', createAction: '/Demo/CreateExam' }, fields: { StudentId: { type: 'hidden', defaultValue: studentData.record.StudentId }, StudentExamId: { key: true, create: false, edit: false, list: false }, CourseName: { title: 'Course name', width: '40%' }, ExamDate: { title: 'Exam date', width: '30%', type: 'date', displayFormat: 'yy-mm-dd' }, Degree: { title: 'Degree', width: '10%', options: ["AA", "BA", "BB", "CB", "CC", "DC", "DD", "FF"] } } }, function (data) { //opened handler data.childTable.jtable('load'); }); }); //Return image to show on the person row return $img; } }, id: { title: 'ID Product', width: '30%', key: true, list: true, edit: true, create: true }, name: { title: 'Name', width: '30%', edit: true }, detail: { title: 'Detail', width: '30%', type: 'textarea', edit: true, sorting: false //This column is not sortable! }, price: { title: 'Price', width: '30%', edit: true }, image: { title: 'Image', width: '30%', edit: true, sorting: false //This column is not sortable! } }, //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>id</b>: ' + record.id + '<b> name</b>:' + record.name + '<br /><br />'); }); } else { //No rows selected $('#SelectedRowList').append('No row selected! Select rows to see here...'); } }, rowInserted: function (event, data) { if (data.record.name.indexOf('Andrew') >= 0) { $('#StudentTableContainer').jtable('selectRows', data.row); } } }); //Load student list from server $('#StudentTableContainer').jtable('load'); //Delete selected students $('#DeleteAllButton').button().click(function () { var $selectedRows = $('#StudentTableContainer').jtable('selectedRows'); $('#StudentTableContainer').jtable('deleteRows', $selectedRows); }); }); </script> </head> <body> <div style="width: 70%; margin-right: 10%; margin-left: 14%; text-align: center;"> <div id="StudentTableContainer"></div> <!--Output--> <div id="DeleteAllButton">Delete All</div><!--Button delete all--> </div> </body> </html>
0 nhận xét:
Post a Comment