CRUD（21）：新增-下拉框显示部门信息

一、写获取部门信息的ajax请求

             //点击新增按钮



             $("#emp_add_modal_btn").click(function() {



                    



                    //发送ajax请求，显示部门信息，出现在下拉列表中



                    



                    



                    //弹出模态框



                    $("#empAddModal").modal({



                           backdrop : "static"



                    });



             });



             



             function getDepts(){



                    $.ajax({



                           url:"${APP_PATH}/depts",



                           type:"GET",



                           success:function result({



                                 console.log(result)



                           });



                    });



             }

二、在com.amel.crud.controller包下创建DepartmentController.java。

package com.amel.crud.controller;







import java.util.List;







import org.springframework.beans.factory.annotation.Autowired;



import org.springframework.stereotype.Controller;



import org.springframework.web.bind.annotation.RequestMapping;



import org.springframework.web.bind.annotation.ResponseBody;







import com.amel.crud.bean.Department;



import com.amel.crud.bean.Msg;



import com.amel.crud.service.DepartmentService;







/**



 * 处理和部门有关的请求



 * 



 * @author lenovo



 *



 */



@Controller



public class DepartmentController {







       @Autowired



       DepartmentService departmentService;







       @RequestMapping("/depts")



       @ResponseBody



       public Msg getDepts() {







             List<Department> list = departmentService.getDepts();



             return Msg.success().add("depts", list);







       }







}

三、在com.amel.crud.service包下创建DepartmentService.java。

package com.amel.crud.service;







import java.util.List;







import org.springframework.beans.factory.annotation.Autowired;



import org.springframework.stereotype.Service;







import com.amel.crud.bean.Department;



import com.amel.crud.dao.DepartmentMapper;











@Service



public class DepartmentService {



       



       @Autowired



       private DepartmentMapper departmentMapper;



       



       //查询所有员工



       public List<Department> getDepts() {



             return departmentMapper.selectByExample(null);



       }











}

四、这时候F2刷新网页可以看到一个dept.js文件。

五、回去给下拉框命名一个id。

<select class="form-control" name="dId" id="dept_add_select">

六、绑定一下标签

             //点击新增按钮



             $("#emp_add_modal_btn").click(function() {







                    //发送ajax请求，显示部门信息，出现在下拉列表中



                    getDepts();



                    //弹出模态框



                    $("#empAddModal").modal({



                           backdrop : "static"



                    });



             });







             function getDepts() {



                    $.ajax({



                           url : "${APP_PATH}/depts",



                           type : "GET",



                           success : function(result) {



                                 //显示部门信息在下拉列表中



                                 $.each(result.extend.depts, function() {



                                        var optionEle = 

$("<option></option>").append(



                                                     this.deptName).attr("value", this.deptId);



                                        optionEle.appendTo("#dept_add_select");



                                 });



                           }



                    });



             }