jsp Method of Obtaining Data from Database and Filling Drop down Box to Realize Two level Linkage Menu

  • 2021-09-11 20:56:34
  • OfStack

In this paper, the method of jsp to obtain data from database and fill the drop-down box to realize two-level linkage menu is described as an example. Share it for your reference, as follows:

Project 1 paragraph, will now encounter more practical things down, written many times, remember here, to see for future reference!

1. First, get the data of the first drop-down box in the database:


<s:select listKey="tsFrom" id="t_tsfrom" cssClass="required" 
listValue="tsFrom" cssStyle="width:90" list="tsfrom1" 
name="tsFrom" theme="simple" headerKey="" 
onchange="getTsFromDescribe(this);" headerValue="-- Please select --" />

Background processing:


@Autowired 
private CustomMaManager custommamanager;// Annotations are quite easy to use, and the code is saved 1 Big cut  
tsfrom1 = custommamanager.getTsFrom(); 

Service:


// Get the source of complaint  
public List<CustomManage> getTsFrom(){ 
  return custommanagedao.getTsFrom(); 
}

dao:


/** Get the product type **/ 
public List<CustomManage> getTsFrom(){ 
  return this.find("SELECT distinct new CustomManage(tsFrom,'2') FROM CustomManage C WHERE C.tsFrom IS NOT NULL ORDER BY tsFrom ASC");
}

Note: Oracle takes out duplicate values in java code, which is different from SqlServer. It must use:

SELECT distinct new CustomManage(tsFrom,'2') FROM CustomManage C WHERE C.tsFrom IS NOT NULL ORDER BY tsFrom ASC

First, new entity bean (CustomManage) and then set the construction method for the corresponding fields in the entity bean, otherwise, the background has returned the value, but it is not displayed in the foreground drop-down box, and the drop-down box is blank.


public CustomManage(String khname,int s){ 
  this.khname=khname; 
} 
public CustomManage(String cpname,String type){ 
  if("1".equals(type)){ 
   this.cpname=cpname; 
  }else if("2".equals(type)){ 
   this.tsFrom=cpname; 
  }else if("3".equals(type)){ 
   this.khname=cpname; 
  } 
}

Here, we need to add the corresponding constructor in the entity class of bean, so as to use it for de-duplication.

At this point, the data preparation of Level 1 is almost done. Use the list collection of the S tag to get the value passed in the background.

2. Cascade of Level 2 drop-down menus = = = = Use Ajax to get data

Write in the onchange event of the Level 1 list:


// Complaint information source information cascade  
function getTsFromDescribe(ts_describe){ 
 var tsfrom = $("#t_tsfrom").val(); 
 var tstsFrom = $("#ts_tsFrom").val(); 
 Ext.Ajax.request( { 
  url : '${ctx}/complaints/complaints!getTsFrom.action', 
  params : { 
   tsfrom : tsfrom// Pass json Pass the value obtained by the foreground to the background every time  
  }, 
  success : function(response) { 
   var json = Ext.util.JSON.decode(response.responseText); 
   if (json.success) { 
    var data = json.<strong>cmList</strong>; 
    if ("" == data) { 
     alert(" Please select a complaint type "); 
     inputForm.t_tsfrom.focus(); 
     $("#ts_tsFrom").empty();// Every time you need to go to 1 Empty the data of the second time  
    } else { 
     $("#ts_tsFrom").empty(); 
     // Iterate the acquired data  
    for ( var i = 0; i < data.length; i++) { 
     var id = data[i]; 
     var name = data[i]; 
     $("#ts_tsFrom").append( 
       "<option value='" + id + "'>" + name + "</option>"); 
    } 
    dwr.util.removeAllOptions('tstsFrom'); 
    dwr.util.addOptions('tstsFrom', data); 
 } 
} 
} 
}); 
}

Background return data:


public void getTsFrom() throws Exception { 
  HttpServletResponse response = ServletActionContext.getResponse(); 
  String ts_names = tsfrom; 
  List<CustomManage> list = complaintsmanager.getTsDescribe(ts_names); 
  response.setContentType("text/javascript"); //  Background control code  
  PrintWriter writer = response.getWriter(); 
  //  What you will get list Set conversion JSON Object to the foreground for processing  
  JSONArray j = JSONArray.fromObject(list); 
  writer.println("{'success':true,'<strong>cmList</strong>':" + j.toString() + "}"); 
}

To this one from the database dynamic access to values, and the realization of the 2-level menu cascade function is almost done. I hope it will be good for you and me.

Note 1 here means that the value of the drop-down box will not be saved when modifying, that is, the value saved in the database when clicking Submit last time cannot be filled into the drop-down box.

Treatment method:


var op1 = document.getElementById("op1").value; 
if(op1!=null){ 
  $("#cp_validity").val(op1); // Plug the fetched value into the drop-down box. 1 A radish 1 A pit  
} 
<input type="hidden" id="op1" value="${compDisposal.validity}">// Use expressions to take out the values stored in the database and put them in hidden fields  

I hope this article is helpful to everyone's jsp programming.


Related articles: