jtable CRUD Operations
我正在使用带有JSP和servlet的CRUD应用程序的jTable jQuery插件
我的要求是，如果记录的状态是活动的，那么它应该是可更新的，如果状态是非活动的，则记录不能是可更新的
JSP
<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="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>
<!-- validation -->
<link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#StudentTableContainer').jtable({
title : 'Students List',
paging:true,
pageSize:10,
sorting: true,
defaultSorting: 'studentId desc',
actions : {
listAction : '<%=request.getContextPath()%>/Controller?action=list',
createAction : '<%=request.getContextPath()%>/Controller?action=create',
updateAction : '<%=request.getContextPath()%>/Controller?action=update',
deleteAction : '<%=request.getContextPath()%>/Controller?action=delete'
},
fields : {
studentId : {
title : 'Student Id',
width : '5%',
key : true,
list : true,
edit : false,
create : true
},
name: {
title : 'Name',
width : '20%',
edit : true,
inputClass: 'validate[required]'
},
department : {
title : 'Department',
width : '10%',
edit : true,
inputClass: 'validate[required, maxSize[5]]'
},
email : {
title : 'Email',
width : '15%',
edit : true,
inputClass: 'validate[required,custom[email]]'
},
gender: {
title: 'Gender',
width: '5%',
options: { 'M': 'Male', 'F': 'Female' }
},
city: {
title: 'City',
width: '20%',
options: '<%=request.getContextPath()%>/Controller?action=getCity'
},
status: {
title: 'Status',
width: '5%',
options: {'Active':'Active','Inactive':'Inactive'}
},
birthDate: {
title: 'Birth date',
width: '25%',
type: 'date'
, displayFormat: 'yy-mm-dd'
}
},
//Initialize validation logic when a form is created
formCreated: function (event, data) {
data.form.validationEngine();
},
//Validate form when it is being submitted
formSubmitting: function (event,data) {
//data.formType:
//data.form:
//data.row:
// alert("FormType(edit or create) ="+data.formType);
if(data.formType=='edit'){
// alert("101 data.row is "+data.row.record);
}
if (!confirm(" Do you want to save the records ?")) {
return false ;
}
return data.form.validationEngine('validate');
},
//Dispose validation logic when form is closed
formClosed: function (event, data) {
data.form.validationEngine('hide');
data.form.validationEngine('detach');
}
});
$('#StudentTableContainer').jtable('load');
});
</script>
</head>
<body>
<div style="width: 80%; margin-right: 10%; margin-left: 10%; text-align: center;">
<h4>AJAX based CRUD operations using jTable in J2ee</h4>
<div id="StudentTableContainer"></div>
</div>
<a href="jTableIndex.jsp" style="font-size: 14px">|Back|</a>
</body>
</html>