easyui下拉框easyui-combobox input class=easyui-combobox 及控制层代码

这是一个关于如何在JavaWeb项目中使用EasyUI库创建下拉框的示例。页面HTML部分展示了如何定义一个下拉框,其中包含多个角色选项。控制器部分包括了数据字典的查询和响应处理,如获取数据字典列表、删除和新增或修改操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
 
 var url;


 function searchDataDic(){
$("#dg").datagrid('load',{
"dataDicName":$("#s_dataDicName").combobox("getValue"),
"dataDicValue":$("#s_dataDicValue").val() 
});
 }


 function openDataDicAddDialog(){
$("#dlg").dialog("open").dialog("setTitle","添加数据字典信息");
url="${pageContext.request.contextPath}/DataDicController/addOrmodifyDataDic.do";
 }
 
 function openDataDicModifyDialog(){
var selectedRows=$("#dg").datagrid("getSelections");
if(selectedRows.length!=1){
$.messager.alert("系统提示","请选择一条要编辑的数据!");
return;
}
var row=selectedRows[0];
$("#dlg").dialog("open").dialog("setTitle","编辑数据字典信息");
$("#fm").form("load",row);
url="${pageContext.request.contextPath}/DataDicController/addOrmodifyDataDic.do?id="+row.id;
 }
 
 function saveDataDic(){
var dataDicName=$("#dataDicName").combobox("getText");
var dataDicValue=$("#dataDicValue").val();
if(dataDicName==""){
$.messager.alert("系统提示","数据字典名不能为空!");
return;
}
if(dataDicValue==""){
$.messager.alert("系统提示","数据字典值不能为空!");
return;
}
$.post(url,{dataDicName:dataDicName,dataDicValue:dataDicValue},function(result){
if(result.success){
$.messager.alert("系统提示","保存成功!");
$("#dlg").dialog("close");
$("#dg").datagrid("reload");
resetValue();
}else{
$.messager.alert("系统提示","保存失败!");
}
},"json");
 }
 
 function resetValue(){
$("#dataDicName").combobox("setValue","");
$("#dataDicValue").val("");
 }
 
 function closeDataDicDialog(){
$("#dlg").dialog("close");
resetValue();
 }
 
 function deleteDataDic(){
var selectedRows=$("#dg").datagrid("getSelections");
if(selectedRows.length==0){
$.messager.alert("系统提示","请选择要删除的数据!");
return;
}
var strIds=[];
for(var i=0;i<selectedRows.length;i++){
strIds.push(selectedRows[i].id);
}
var ids=strIds.join(",");
$.messager.confirm("系统提示","您确定要删除这<font color=red>"+selectedRows.length+"</font>条数据吗?",function(r){
if(r){
$.post("${pageContext.request.contextPath}/DataDicController/deleteDataDic.do",{ids:ids},function(result){
if(result.success){
$.messager.alert("系统提示","数据已成功删除!");
$("#dg").datagrid("reload");
}else{
$.messager.alert("系统提示","数据删除失败,请联系系统管理员!");
}
},"json");

});
 }
 
</script>
<title>Insert title here</title>
</head>
<body style="margin: 1px">
 <table id="dg" title="数据字典管理" class="easyui-datagrid"
   fitColumns="true" pagination="true" rownumbers="true"
   url="${pageContext.request.contextPath}/DataDicController/findDataDicList.do" fit="true" toolbar="#tb">
   <thead>
    <tr>
    <th field="cb" checkbox="true" align="center"></th>
    <th field="id" width="50" align="center">编号</th>
    <th field="dataDicName" width="100" align="center">数据字典名</th>
    <th field="dataDicValue" width="100" align="center">数据字典值</th>
    </tr>
   </thead>
 </table>
 <div id="tb">
  <div>
  <a href="javascript:openDataDicAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
  <a href="javascript:openDataDicModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
  <a href="javascript:deleteDataDic()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
  </div>
  <div>
  &nbsp;数据字典名:&nbsp;<input class="easyui-combobox" id="s_dataDicName" data-options="panelHeight:'auto',editable:true,valueField:'dataDicName',textField:'dataDicName',url:'${pageContext.request.contextPath}/DataDicController/findAllDataDicName.do'"/>
  &nbsp;数据字典值:&nbsp;<input type="text" id="s_dataDicValue" size="20" onkeydown="if(event.keyCode==13) searchDataDic()"/>

  <a href="javascript:searchDataDic()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
  </div>
 </div>
 
  <div id="dlg" class="easyui-dialog" style="width:620px;height:150px;padding: 10px 20px"
   closed="true" buttons="#dlg-buttons">
   
   <form id="fm" method="post">
    <table cellspacing="3px">
    <tr>
    <td>数据字典名:</td>
    <td><input class="easyui-combobox" id="dataDicName" name="dataDicName" data-options="panelHeight:'auto',valueField:'dataDicName',textField:'dataDicName',url:'${pageContext.request.contextPath}/DataDicController/findAllDataDicName.do'"/>&nbsp;<font color="red">*</font></td>
    <td>&nbsp;&nbsp;&nbsp;</td>
    <td>数据字典值:</td>
    <td><input type="text" id="dataDicValue" name="dataDicValue" class="easyui-validatebox" required="true"/>&nbsp;<font color="red">*</font></td>
    </tr>

    </table>
   </form>
 </div>
 
 <div id="dlg-buttons">
  <a href="javascript:saveDataDic()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
  <a href="javascript:closeDataDicDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
 </div>

</body>

--------------------------------------------------------------------------------------------------------------------

 <form id="fm" method="post">
    <table cellspacing="8px">
    <tr>
    <td>用户名:</td>
    <td><input type="text" id="userName" name="userName" class="easyui-validatebox" required="true"/>&nbsp;<font color="red">*</font></td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td>密码</td>
    <td><input type="text" id="password" name="password" class="easyui-validatebox" required="true"/>&nbsp;<font color="red">*</font></td>
    </tr>
    <tr>
    <td>真实姓名:</td>
    <td><input type="text" id="trueName" name="trueName" class="easyui-validatebox" required="true"/>&nbsp;<font color="red">*</font></td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td>邮箱:</td>
    <td><input type="text" id="email" name="email" class="easyui-validatebox" validType="email" required="true"/>&nbsp;<font color="red">*</font></td>
    </tr>
    <tr>
    <td>联系电话:</td>
    <td><input type="text" id="phone" name="phone" class="easyui-validatebox" required="true"/>&nbsp;<font color="red">*</font></td>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td>用户角色</td>
    <td>
    <select class="easyui-combobox" id="roleName" name="roleName" style="width: 154px" editable="false" panelHeight="auto">
    <option value="">请选择角色...</option>
    <option value="系统管理员">系统管理员</option>
    <option value="销售主管">销售主管</option>
    <option value="客户经理">客户经理</option>
    <option value="高管">高管</option>
    </select>
    &nbsp;<font color="red">*</font>
    </td>
    </tr>
    </table>
   </form>


----------------------------------------------------------------------

package ssmy.control;


import java.util.HashMap;
import java.util.List;
import java.util.Map;


import javax.servlet.http.HttpServletResponse;


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.RequestParam;


import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import ssmy.dto.DataDic;
import ssmy.page.PageBean;
import ssmy.page.ResponseUtil;
import ssmy.service.DataDicService;


@Controller
@RequestMapping("/DataDicController")
public class DataDicController {

@Autowired
private DataDicService dataDicService;


public void setDataDicService(DataDicService dataDicService) {
this.dataDicService = dataDicService;
}

   @RequestMapping("/findDataDicList")
public String findDataDicList(@RequestParam("page")String page,@RequestParam("rows")String rows,
DataDic dataDic,HttpServletResponse response) throws Exception{
PageBean pageBean =new PageBean(Integer.parseInt(page),Integer.parseInt(rows));
Map<String,Object> map =new HashMap<String,Object>();
map.put("dataDicName",dataDic.getDataDicName());
map.put("dataDicValue", dataDic.getDataDicValue());
map.put("start", pageBean.getStartRow());
map.put("size", pageBean.getEndRow());
List<DataDic> DataDicList=dataDicService.fundDataDicList(map);
int total =dataDicService.getTotalDataDicCount(map);
JSONObject result=new JSONObject();
JSONArray jsonArrays=JSONArray.fromObject(DataDicList);
result.put("rows", jsonArrays);
result.put("total", total);
ResponseUtil.write(response, result);
return null;
}
   
   /**
    * 根据数据字典名称查找,用户下拉框
    */
/*   @RequestMapping("/dataDicComboList")
   public String dataDicComboList(String dataDicName,HttpServletResponse response)
      throws Exception{
  
  JSONArray jsonArray =new JSONArray();
  Map<String,Object> map=new HashMap<String,Object>();
  map.put("dataDicName", dataDicName);
  List<DataDic> DataDicList=dataDicService.fundDataDicList(map);
  JSONArray rows=JSONArray.fromObject(DataDicList);
  jsonArray.addAll(rows);
  ResponseUtil.write(response, jsonArray);
  return null;
   }*/
   
   /**
    * 查询所有的数据字典名称,用户下拉框
    */
   @RequestMapping("/findAllDataDicName")
  public String findAllDataDicName(HttpServletResponse response)throws Exception{
 
 JSONArray jsonArray =new JSONArray();
 List<DataDic> DataDicList=dataDicService.findAllDataDic();
 JSONArray rows=JSONArray.fromObject(DataDicList);
 jsonArray.addAll(rows);
 ResponseUtil.write(response, jsonArray);
 return null;
  }
   
   /**
    * 新增或修改
    */
   @RequestMapping("/addOrmodifyDataDic")
   public String addOrmodifyDataDic(DataDic dataDic,HttpServletResponse response)throws Exception{
  
  int resultTotal =0;//记录行
  if(dataDic.getId()==null){
  resultTotal=dataDicService.addDataDic(dataDic);
  }else{
  resultTotal=dataDicService.updateDataDic(dataDic);
  }
  JSONObject result=new JSONObject();
  if(resultTotal>0){
  result.put("success", true);
  }else{
  result.put("success", false);
  }
  ResponseUtil.write(response, result);
  return null;
   }
   
   /**
    * 删除
    */
   @RequestMapping("/deleteDataDic")
   public String deleteDataDic(@RequestParam(value="ids")String ids,HttpServletResponse response)throws Exception{
  
  String[] str=ids.split(",");
  if(str.length>0){
  for (int i = 0; i < str.length; i++) 
  {
  dataDicService.deleteDataDic(Integer.parseInt(str[i]));
 }
  }
  JSONObject result=new JSONObject();
  result.put("success", true);
  ResponseUtil.write(response, result);
  return null;
   }
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值