Struts 2 CRUD Operation Using JQuery

Introduction

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

Background

We using Oracle for data storing in backgroud process.

Using the code

Please follow below steps for create struds 2 crud operation application.

First we create XML file

//
//

<?xml version="1.0" encoding="UTF-8" ?>
<!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">
         <!-- <interceptor-ref name="timer" /> -->
         <result type="json" name="success">index.jsp</result>
      </action>


      <action name="delete" class="com.javatpoint.DatabaseConnection" method="delete">
         <!-- <param name="time1">viewBookingDtls</param> -->
         <result type="json">/index.jsp</result>
      </action>

   </package>
</struts>

//

Second step for create 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 = 1L;
   ArrayList<UserDetails> list=new ArrayList<UserDetails>();
   //private javax.servlet.http.HttpServletRequest request;

   Connection con = null;

   private String mess=null;

   public DatabaseConnection(){
      con = new GetConnectionClass().getConnection();

   }

   /*Here array list will directly accessible into jsp page*/
   //@Action(value="view",results={@Result(name="success",location="index.jsp")})
   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";
      }

      /*Here you can insert data into the database*/
      public String save(){
         mess = "successfully Save";
         return "success";
      }

      /*Here you can Update data into the database*/
      public String update(){
      System.out.println("update");
      mess = "successfully Update";
      return "success";
   }

   /*Here you can delete data into the database*/
   @Action(value="delete",results={@Result(name="success",location="index.jsp")})
   public String delete(){
      //System.out.println(request.getParameter("time"));
      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;
   }

   /*@Override
   public void setServletRequest(HttpServletRequest request) {
   this.request = request;

   }*/

}

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.