easyui之combobox快速搜索

最新推荐文章于 2024-04-08 17:39:55 发布

天水一欢

最新推荐文章于 2024-04-08 17:39:55 发布

阅读量1.2k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_40263927/article/details/89440704

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

第一次用combobox的快速搜索功能，很多人会因为不懂关键词q,而不知所措，q到底是什么鬼？q其实代表的是combobox的输入的内容。下面是具体的实现的效果如下图：

1.前端实现代码如下:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="../js/easyui-1.5.1/jquery.min.js"></script>
       <script src="../js/easyui-1.5.1/jquery.easyui.min.js"></script>
       <script src="../js/easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
       <link href="../js/easyui-1.5.1/themes/black/easyui.css" rel="stylesheet" />
       <link href="../js/easyui-1.5.1/themes/icon.css" rel="stylesheet" />
       <style>
           body{
               background: black;
           }
           .search_box{
               text-align: center;
           }
           .search_box input{
               width: 300px;
           }

           .result_box{
               width: 600px;
               margin: 20px auto;
           }

       </style>


   </head>
   <body>
       <div class="search_box"><input id="hospitalsearch" name="dept" ></div>
       <div class="result_box"><table id="result_grid"></table> </div>
   </body>
   <script>
       $('#hospitalsearch').combobox({
           url:'http://192.168.0.102:8082/springmvc2/hello/searchByKey.do',
           queryParams: {
               "q" : ''
           },
       valueField:'id',
       textField:'hospitalName',
           method : "post",
       mode : 'remote',
       onLoadSuccess:function(data){
           $('#result_grid').datagrid('loadData', data);
       }
       });

       $('#result_grid').datagrid({
           fitColumns:true,//宽度自适应
           width: 600,
height: 280,
       columns:[[
       {field:'hosptialGrade',title:'医院等级',width:150},
       {field:'hospitalName',title:'医院名称',width:150}
       ]]
       });

   </script>
</html>

2.后端代码如下：

@ResponseBody
   @RequestMapping("/searchByKey")
   public List<Map<String, Object>> searchByKey(@RequestParam Map<String, Object> params, HttpServletResponse resp,
           HttpServletRequest req) {
       resp.setHeader("Access-Control-Allow-Origin", "*");
       List<Map<String, Object>> list=null;
       try{
       list=comboGridService.searchByKey(params);
       }catch(Exception e){
           e.printStackTrace();
       }
       return list;
   }

3.数据库sql语句

<select id="queryHostpitals" resultType="java.util.HashMap" >
select * from hospital where hospital_name like concat('%',#{q},'%')
</select>

天水一欢

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui之combobox快速搜索

第一次用combobox的快速搜索功能，很多人会因为不懂关键词q,而不知所措，q到底是什么鬼？q其实代表的是combobox的输入的内容。下面是具体的实现的效果如下图：1.前端实现代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &l...
复制链接

扫一扫