Struts 2 CRUD Operation Using JQuery

Introduction

This article is using for creating an example of struct 2 crud operation using JQuery and Oracle.

Background

We are using Oracle for data storing in the background ebb process.

Using the code

Please follow the below steps for creating struds 2 crud operation application.

First, we create an XML file.

< !DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
"http://struts.apache.org/dtds/struts-2.1.dtd" > < struts > < package name = "default"
extends = "json-default" > < action name = "product"
class = "com.javatpoint.Product"
method = "execute" > < result name = "success" > welcome.jsp < /result></action > < action name = "save"
class = "com.javatpoint.DatabaseConnection"
method = "save" > < result type = "json"
name = "success" > index.jsp < /result></action > < action name = "update"
class = "com.javatpoint.DatabaseConnection"
method = "update" > < result type = "json"
name = "success" > index.jsp < /result></action > < action name = "view"
class = "com.javatpoint.DatabaseConnection"
method = "view" > < result type = "json"
name = "success" > index.jsp < /result></action > < action name = "delete"
class = "com.javatpoint.DatabaseConnection"
method = "delete" > < result type = "json" > /index.jsp</result > < /action></package > < /struts>

Second step for creating action class.

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.convention.annotation.Action;
import com.Bean.UserDetails;
import com.opensymphony.xwork2.ActionSupport;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.interceptor.ServletRequestAware;
public class DatabaseConnection extends ActionSupport {
private static final long serialVersionUID = 1 L;
ArrayList < UserDetails > list = new ArrayList < UserDetails > ();
Connection con = null;
private String mess = null;
public DatabaseConnection() {
con = new GetConnectionClass().getConnection();
}
public String view() {
try {
PreparedStatement ps = con.prepareStatement("select * from ifsapp.user_roles where rownum<50");
ResultSet rs = ps.executeQuery();
while (rs.next()) {
UserDetails user = new UserDetails();
user.setUserID(rs.getString("USERID"));
user.setUserName(rs.getString("NAME"));
user.setLocation(rs.getString("LOCATION"));
list.add(user);
}
con.close();
} catch (Exception e) {
e.printStackTrace();
}
return "success";
}
public String save() {
mess = "successfully Save";
return "success";
}
public String update() {
System.out.println("update");
mess = "successfully Update";
return "success";
}
@Action(value = "delete", results = {
@Result(name = "success", location = "index.jsp")
})
public String delete() {
System.out.println("delete");
mess = "successfully deleted";
return "success";
}
public String getMess() {
return mess;
}
public void setMess(String mess) {
this.mess = mess;
}
public ArrayList < UserDetails > getList() {
return list;
}
public void setList(ArrayList < UserDetails > list) {
this.list = list;
}
}

Now We create JSP Files

<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<
link rel = "stylesheet"
type = "text/css"
href = "css/jquery-ui.custom.css" / >
<
link href = "css/Style.css"
rel = "stylesheet"
type = "text/css" / >
<
link rel = "stylesheet"
type = "text/css"
href = "css/ui.jqgrid.css" / >
<
script type = 'text/javascript'
src = "js/jquery-1.7.2.min.js" > < /script> <
script type = 'text/javascript'
src = "js/grid.locale-en.js" > < /script> <
script type = "text/javascript" >
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true; <
/script> <
script type = 'text/javascript'
src = "js/jquery-ui-1.8.14.custom.js" > < /script> <
script type = 'text/javascript'
src = "js/jquery.jqGrid.min.js" > < /script> <
script type = 'text/javascript'
src = "js/CRUD.js" > < /script>
<
script type = "text/javascript" >
$(document).ready(function() {
view();
});
<
/script>
<
div style = "float: left;"
align = "center" >
<
div id = "userDetailsDiv" > < /div> <
table id = "userDetailsTable" > < /table> <
/div>
<
script type = "text/javascript" >
jQuery("#userDetailsTable").jqGrid({
datatype: "local",
colNames: ['UserID', 'Name', 'Location'],
colModel: [{
name: 'userID',
index: 'userID',
width: 150
},
{
name: 'userName',
index: 'userName',
width: 300
},
{
name: 'location',
index: 'location',
width: 150
}
],
rowNum: 30,
rowList: [10, 20, 30],
pager: jQuery('#userDetailsDiv'),
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption: "User Details ",
width: 750,
multiselect: true,
shrinkToFit: false,
height: 260,
});
jQuery("#userDetailsTable").jqGrid('navGrid', '#userDetailsDiv', {
edit: false,
add: false,
del: false,
search: false,
refresh: false
}, {}, {}, {}, {});
jQuery("#userDetailsTable").jqGrid('navButtonAdd', '#userDetailsDiv', {
caption: "ADD",
buttonicon: "ui-icon-plus",
title: "Add Row",
onClickButton: function() {
saveUser();
}
});
jQuery("#userDetailsTable").jqGrid('navButtonAdd', '#userDetailsDiv', {
caption: "Delete",
buttonicon: "ui-icon-trash",
title: "Delete Row",
onClickButton: function() {
deleteUser();
}
});
jQuery("#userDetailsTable").jqGrid('navButtonAdd', '#userDetailsDiv', {
caption: "Update",
buttonicon: "",
title: "Update Row",
onClickButton: function() {
updateUser();
}
});
<
/script>

History

Keep a running update of any changes or improvements you've made here.