在jtable中编辑记录时如何使用DB值填充下拉列表

时间:2016-04-01 12:31:51

标签: jsp servlets jquery-jtable

我已经使用jtable,jsp和servlets编写了一个关于crud操作的代码。

在编辑记录时,我需要一个drop down按钮,可以自动填充数据库中的其他数据字段。

任何人都可以帮助我。请参考屏幕截图

Issue Screenshot

我的HTML代码,

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Welcome</title>
<!-- Include one of jTable styles. -->
<link href="css/metro/crimson/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>
<script type="text/javascript">
    $(document).ready(function () {
        $('#PersonTableContainer').jtable({
            title: 'Usecase Information',
            paging: true,
            pageSize: 100,
            sorting: true,
            defaultSorting: 'Name ASC',
            actions: {
                listAction: 'CRUDController?action=list',
                createAction:'CRUDController?action=create',
                updateAction: 'CRUDController?action=update',
                deleteAction: 'CRUDController?action=delete'
            },
            fields: {
                  usecase_keyname: {
                      title: 'Usecase Name',
                      list : true
                               },
                   is_custom_activity: {
                      title: 'IS Custom Usecase'
                                }, 
                  tower_name: {
                      title: 'Tower Name'
                          },
                   activity_name: {
                        title: 'Activity Name'
                            },
                      is_custom_activity: {
                        title: 'IS Custom Activity'
                                   }, 
                    status_name: {
                       title: 'Status Name'
                       },
                    start_date: {
                        title: 'Start Date'
                           },
                    end_date: {
                        title: 'End Date'
                         },
                    actual_end_date: {
                        title: 'Actual End Date'
                          },
                     comments: {
                       title: 'Comments'
                        }               
            }
        });
        $('#PersonTableContainer').jtable('load');
    });
</script>
</head>
<body>
<div id="PersonTableContainer">
</div>
</body>
</html>

我的Servlet代码,

package ignio.controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonElement;
import com.google.gson.reflect.TypeToken;

import ignio.dao.CrudDao;
import ignio.model.User;


public class CRUDController extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private CrudDao dao;

    public CRUDController() {
        dao=new CrudDao();
    }


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        if(request.getParameter("action")!=null){
            List<User> lstUser=new ArrayList<User>();
            String action=(String)request.getParameter("action");
            Gson gson = new Gson();
            response.setContentType("application/json");

            if(action.equals("list")){
                try{                        
                //Fetch Data from User Table
                lstUser=dao.getAllUsers();          
                //Convert Java Object to Json               
                JsonElement element = gson.toJsonTree(lstUser, new TypeToken<List<User>>() {}.getType());
                JsonArray jsonArray = element.getAsJsonArray();
                String listData=jsonArray.toString();               
                //Return Json in the format required by jTable plugin
                listData="{\"Result\":\"OK\",\"Records\":"+listData+"}";            
                response.getWriter().print(listData);
                }catch(Exception ex){
                    String error="{\"Result\":\"ERROR\",\"Message\":"+ex.getMessage()+"}";
                    response.getWriter().print(error);
                    ex.printStackTrace();
                }               
            }
            /*else if(action.equals("create") || action.equals("update")){
                User user=new User();
                if(request.getParameter("userid")!=null){                  
                   int userid=Integer.parseInt(request.getParameter("userid"));
                   user.setUserid(userid);
                }
                if(request.getParameter("firstName")!=null){
                    String firstname=(String)request.getParameter("firstName");
                    user.setFirstName(firstname);
                }
                if(request.getParameter("lastName")!=null){
                   String lastname=(String)request.getParameter("lastName");
                   user.setLastName(lastname);
                }
                if(request.getParameter("email")!=null){
                   String email=(String)request.getParameter("email");
                   user.setEmail(email);
                }
                try{                                            
                    if(action.equals("create")){//Create new record
                        dao.addUser(user);                  
                        lstUser.add(user);
                        //Convert Java Object to Json               
                        String json=gson.toJson(user);                  
                        //Return Json in the format required by jTable plugin
                        String listData="{\"Result\":\"OK\",\"Record\":"+json+"}";                                          
                        response.getWriter().print(listData);
                    }else if(action.equals("update")){//Update existing record
                        dao.updateUser(user);
                        String listData="{\"Result\":\"OK\"}";                                  
                        response.getWriter().print(listData);
                    }
                }catch(Exception ex){
                        String error="{\"Result\":\"ERROR\",\"Message\":"+ex.getStackTrace().toString()+"}";
                        response.getWriter().print(error);
                }
            }else if(action.equals("delete")){//Delete record
                try{
                    if(request.getParameter("userid")!=null){
                        String userid=(String)request.getParameter("userid");
                        dao.deleteUser(Integer.parseInt(userid));
                        String listData="{\"Result\":\"OK\"}";                              
                        response.getWriter().print(listData);
                    }
                }catch(Exception ex){
                String error="{\"Result\":\"ERROR\",\"Message\":"+ex.getStackTrace().toString()+"}";
                response.getWriter().print(error);
            }               
        }
     }*/
  }}
}

1 个答案:

答案 0 :(得分:1)

要在下拉列表中从数据库中获取值,您需要像这样设计字段(例如margin-top: 250px),

Status Name

并且URL应以下面的格式返回值(样本),

status_name: {
    title: 'Status Name',
    options: '@Url.Action("fetch_status")'
},

您需要设计servlet部分以返回上述数据。

更新:

你的servlet应该是这样的,

options: { '1': 'Active', '2': 'Pending', '3': 'Failed' }

希望这会有所帮助。有关详细信息,请参阅Sample。如果这有帮助,请告诉我。