Post
Ask Question

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.
  1. < !DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"  
  2. "http://struts.apache.org/dtds/struts-2.1.dtd" > < struts > < package name = "default"  
  3. extends = "json-default" > < action name = "product"  
  4. class = "com.javatpoint.Product"  
  5. method = "execute" > < result name = "success" > welcome.jsp < /result></action > < action name = "save"  
  6. class = "com.javatpoint.DatabaseConnection"  
  7. method = "save" > < result type = "json"  
  8. name = "success" > index.jsp < /result></action > < action name = "update"  
  9. class = "com.javatpoint.DatabaseConnection"  
  10. method = "update" > < result type = "json"  
  11. name = "success" > index.jsp < /result></action > < action name = "view"  
  12. class = "com.javatpoint.DatabaseConnection"  
  13. method = "view" > < result type = "json"  
  14. name = "success" > index.jsp < /result></action > < action name = "delete"  
  15. class = "com.javatpoint.DatabaseConnection"  
  16. method = "delete" > < result type = "json" > /index.jsp</result > < /action></package > < /struts>   
Second step for creating action class.
  1. import java.sql.Connection;  
  2. import java.sql.DriverManager;  
  3. import java.sql.PreparedStatement;  
  4. import java.sql.ResultSet;  
  5. import java.util.ArrayList;  
  6. import javax.servlet.http.HttpServletRequest;  
  7. import org.apache.struts2.convention.annotation.Action;  
  8. import com.Bean.UserDetails;  
  9. import com.opensymphony.xwork2.ActionSupport;  
  10. import org.apache.struts2.convention.annotation.Result;  
  11. import org.apache.struts2.interceptor.ServletRequestAware;  
  12. public class DatabaseConnection extends ActionSupport {  
  13.  private static final long serialVersionUID = 1 L;  
  14.  ArrayList < UserDetails > list = new ArrayList < UserDetails > ();  
  15.  Connection con = null;  
  16.  private String mess = null;  
  17.  public DatabaseConnection() {  
  18.   con = new GetConnectionClass().getConnection();  
  19.  }  
  20.  public String view() {  
  21.   try {  
  22.    PreparedStatement ps = con.prepareStatement("select * from ifsapp.user_roles where rownum<50");  
  23.    ResultSet rs = ps.executeQuery();  
  24.    while (rs.next()) {  
  25.     UserDetails user = new UserDetails();  
  26.     user.setUserID(rs.getString("USERID"));  
  27.     user.setUserName(rs.getString("NAME"));  
  28.     user.setLocation(rs.getString("LOCATION"));  
  29.     list.add(user);  
  30.    }  
  31.    con.close();  
  32.   } catch (Exception e) {  
  33.    e.printStackTrace();  
  34.   }  
  35.   return "success";  
  36.  }  
  37.  public String save() {  
  38.   mess = "successfully Save";  
  39.   return "success";  
  40.  }  
  41.  public String update() {  
  42.   System.out.println("update");  
  43.   mess = "successfully Update";  
  44.   return "success";  
  45.  }  
  46.  @Action(value = "delete", results = {  
  47.   @Result(name = "success", location = "index.jsp")  
  48.  })  
  49.  public String delete() {  
  50.   System.out.println("delete");  
  51.   mess = "successfully deleted";  
  52.   return "success";  
  53.  }  
  54.  public String getMess() {  
  55.   return mess;  
  56.  }  
  57.  public void setMess(String mess) {  
  58.   this.mess = mess;  
  59.  }  
  60.  public ArrayList < UserDetails > getList() {  
  61.   return list;  
  62.  }  
  63.  public void setList(ArrayList < UserDetails > list) {  
  64.   this.list = list;  
  65.  }  
  66. }   
Now We create JSP Files
  1. <%@ taglib uri="/struts-tags" prefix="s" %>  
  2. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"    
  3. pageEncoding="ISO-8859-1"%>  
  4.  <  
  5.  link rel = "stylesheet"  
  6. type = "text/css"  
  7. href = "css/jquery-ui.custom.css" / >  
  8.  <  
  9.  link href = "css/Style.css"  
  10. rel = "stylesheet"  
  11. type = "text/css" / >  
  12.  <  
  13.  link rel = "stylesheet"  
  14. type = "text/css"  
  15. href = "css/ui.jqgrid.css" / >  
  16.  <  
  17.  script type = 'text/javascript'  
  18. src = "js/jquery-1.7.2.min.js" > < /script>   <  
  19.  script type = 'text/javascript'  
  20. src = "js/grid.locale-en.js" > < /script>   <  
  21.  script type = "text/javascript" >  
  22.  $.jgrid.no_legacy_api = true;  
  23. $.jgrid.useJSON = true; <  
  24. /script>   <  
  25. script type = 'text/javascript'  
  26. src = "js/jquery-ui-1.8.14.custom.js" > < /script>   <  
  27.  script type = 'text/javascript'  
  28. src = "js/jquery.jqGrid.min.js" > < /script>   <  
  29.  script type = 'text/javascript'  
  30. src = "js/CRUD.js" > < /script>     
  31.  <  
  32.  script type = "text/javascript" >   
  33.  $(document).ready(function() {  
  34.   view();  
  35.  });  
  36. <  
  37. /script>    
  38. <  
  39. div style = "float: left;"  
  40. align = "center" >  
  41.  <  
  42.  div id = "userDetailsDiv" > < /div>   <  
  43.  table id = "userDetailsTable" > < /table>   <  
  44.  /div>    
  45.  <  
  46.  script type = "text/javascript" >  
  47.  jQuery("#userDetailsTable").jqGrid({  
  48.   datatype: "local",  
  49.   colNames: ['UserID', 'Name', 'Location'],  
  50.   colModel: [{  
  51.     name: 'userID',  
  52.     index: 'userID',  
  53.     width: 150  
  54.    },  
  55.    {  
  56.     name: 'userName',  
  57.     index: 'userName',  
  58.     width: 300  
  59.    },  
  60.    {  
  61.     name: 'location',  
  62.     index: 'location',  
  63.     width: 150  
  64.    }  
  65.   ],  
  66.   rowNum: 30,  
  67.   rowList: [10, 20, 30],  
  68.   pager: jQuery('#userDetailsDiv'),  
  69.   sortname: 'id',  
  70.   viewrecords: true,  
  71.   sortorder: "asc",  
  72.   caption: "User Details ",  
  73.   width: 750,  
  74.   multiselect: true,  
  75.   shrinkToFit: false,  
  76.   height: 260,  
  77.  });  
  78. jQuery("#userDetailsTable").jqGrid('navGrid', '#userDetailsDiv', {  
  79.  edit: false,  
  80.  add: false,  
  81.  del: false,  
  82.  search: false,  
  83.  refresh: false  
  84. }, {}, {}, {}, {});  
  85. jQuery("#userDetailsTable").jqGrid('navButtonAdd', '#userDetailsDiv', {  
  86.  caption: "ADD",  
  87.  buttonicon: "ui-icon-plus",  
  88.  title: "Add Row",  
  89.  onClickButton: function() {  
  90.   saveUser();  
  91.  }  
  92. });  
  93. jQuery("#userDetailsTable").jqGrid('navButtonAdd', '#userDetailsDiv', {  
  94.  caption: "Delete",  
  95.  buttonicon: "ui-icon-trash",  
  96.  title: "Delete Row",  
  97.  onClickButton: function() {  
  98.   deleteUser();  
  99.  }  
  100. });  
  101. jQuery("#userDetailsTable").jqGrid('navButtonAdd', '#userDetailsDiv', {  
  102.  caption: "Update",  
  103.  buttonicon: "",  
  104.  title: "Update Row",  
  105.  onClickButton: function() {  
  106.   updateUser();  
  107.  }  
  108. });  
  109. <  
  110. /script>     
History
 
Keep a running update of any changes or improvements you've made here.