JqGrid 添加信息时某字段自动选择器

最新推荐文章于 2021-09-24 14:12:24 发布

kuyoeku

最新推荐文章于 2021-09-24 14:12:24 发布

阅读量760

点赞数

CC 4.0 BY-SA版权

分类专栏： JqGrid 文章标签： jqgrid 自动关联查询

本文链接：https://blog.youkuaiyun.com/kuyoeku/article/details/45222453

JqGrid 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在EasyUI中实现自动补全功能，通过设置字段colModel和使用jQuery的autocomplete插件，结合Java服务器端代码，实现输入时自动匹配数据库中的数据供用户选择。

　　因为项目中要用到添加信息时，要关联到某字段自动匹配，如果有数据就要显示让用户选择，所以就需要这个功能，找了很多文档，终于搞定。

在页首或css中先设置样式：

<style type="text/css">
         .ui-autocomplete { font-size: 11px; position: absolute; cursor: default;z-index:5000 !important;}      
</style>

在javascript中设置字段的colModel如下：

{
name:'jobStationName',
index:'job_Station_Name', 
width:150,
editable: true,
edittype: "text",
editoptions: {
    size:"20",
    maxlength:"30",
    dataInit: function (element) {
        window.setTimeout(function () {
             $(element).autocomplete({
                  id: 'AutoComplete',
                  source: function(request, response){
                        this.xhr = $.ajax({
                        url: '<%=request.getContextPath()%>/web/stationAutoComplate',//请求地址
                        data: request,
                        dataType: "jsonp",
                        success: function( data ) {
                            response( data );
                        },
                        error: function(model, response, options) {
                            response([]);
                        }
                    });
                },
             autoFocus: true
             });
         }, 100);
   }
}},

java服务器端代码如下：

public String stationAutoComplate(String callback,String term){ //callback为jquery请示时生成的随机串,term为输入框内输入的字符
//处理过程就省略了，反正就是根据term去数据库查数据，然后再转换成如下的JSON格式。
    return callback+"([{label:'label1',value:'value1'},{label:'label2',value:'value2'}])";
}

这是最终结果

最终结果