combobox使用

  利用select option方法展示的下拉选,里面的内容是在JSP文件里面写死的,如果想动态获取数据库里的数据放在下拉选里面要用到combobox。

combobox有get set方法:

获取值:$("#department").combobox('getText');
        $("#department").combobox('getValue');
赋值:  $("#department").combobox('setText',row.department);           
        $("#department").combobox('setValue',row.deptid);
           
          所属部门:
           
          
            
         

  网上关于使用combobox的方式有多种,我使用的是:

function getText(){
  $("#department").combobox({   
                    url:"suc/findAllDept", 
                    // 向服务器请求的模式   
                    method : "post", 
                    data: "jsonp",
                    valueField: 'id',  
                    textField: 'department'  
             }); 
}
valueField里放的是部门ID,textField里放的是部门名称,在数据库里的具体表信息为:

combobox使用_第1张图片

  通过url的地址到控制器里找对应的方法:

  @RequestMapping("findAllDept")
  @ResponseBody  
  public JSONArray findAllDept(HttpServletRequest req,HttpServletResponse res) throws IOException{
     JSONArray jsonArray=new JSONArray() ; 
     List> lists=new ArrayList>();
     lists=sysUserService.findAllDept();
     //System.out.println(lists);
     jsonArray =JSONArray.fromObject(lists);
     // res.setContentType("text/html;charset=utf-8");
     // PrintWriter pw = res.getWriter();
     // pw.write(jsonArray.toString());
     // pw.flush();
     // System.out.println(jsonArray);
     return jsonArray;
  }


  SQL语句:



  该方法将查找出的部门信息返回给前端。最终显示在网页上为:

  combobox使用_第2张图片

假如想对其内容进行修改,例如:所属部门原来是“研发中心”,现在想改为“呼叫中心”

combobox使用_第3张图片


想达到上图展示的效果的话,需要先调用getText()方法,然后取出现在的部门信息放在"#department"内。

     getText();
     $("#department").combobox('setText',row.department);           
     $("#department").combobox('setValue',row.deptid);


你可能感兴趣的:(前端)