Struts 2 CRUD Operation Using JQuery

This blog describe the simple example of Struts 2 CRUD operation Using JQuery with Oracle.

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.