Question

您好，

我正在尝试在其中一个列中实现带有自动完成功能的jqgrid。但我有一个非常奇怪的问题，自动完成列表显示在jqgird编辑表单下面。

我已经包含了以下jquery js文件。

1. jquery-ui-1.10.4.custom.min.js
2. jquery.ui.core.js
3. jquery.ui.widget.js
4. jquery.ui.position.js
5. jquery.ui.menu.js
6. jquery.ui.autocomplete.js

跟随jqgrid js文件。

1. grid.locale-en.js
2. jquery.jqGrid.min.js
3. grid.common.js
4. jqModal.js
5. jqDnR.js
6. grid.formedit.js

关注jqgrid css文件。

ui.jqgrid.css

关注jquery css文件。

1. jquery-ui-1.10.4.custom.css
2. demos.css
3. jquery.ui.all.css

以下代码实现jqgrid colModel。

 colNames:['Id', 'First Name', 'Last Name'],
 colModel:[
       {name:'id',index:'id', width:55,editable:false,editoptions:readonly:true,size:10},hidden:true},
       {name:'firstname',index:'lastname', width:100,editable:true,edittype:'text',
           editoptions: {
                dataInit: function (elem) {
                    myAutocomplete(elem, "${pageContext.servletContext.contextPath}/grid/autocomplete.action");
                }
         }},
       {name:'lastname',index:'firstname', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
          ],

下面是我的整个jqgrid代码。

var jq = jQuery.noConflict();

jq(function() {
      jq("#grid").jqGrid({
          url:'${pageContext.servletContext.contextPath}/grid/load.action',
       datatype: 'json',
       mtype: 'GET',
          colNames:['Id', 'First Name', 'Last Name'],
          colModel:[
           {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
           {name:'firstname',index:'lastname', width:100,editable:true,edittype:'text',
               editoptions: {
                    dataInit: function (elem) {
                        myAutocomplete(elem, "${pageContext.servletContext.contextPath}/grid/autocomplete.action");
                    }                  
           }},
           {name:'lastname',index:'firstname', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
          ],
          postData: {
       },
          rowNum:20,
          rowList:[20,40,60],
          height: 200,
          autowidth: true,
          rownumbers: true,
          pager: '#pager',
          sortname: 'id',
          viewrecords: true,
          sortorder: "asc",
          caption:"Users",
          emptyrecords: "Empty records",
          loadonce: false,
          editurl:'${pageContext.servletContext.contextPath}/grid/edit.action',
          loadError : function(xhr,st,err) { 
              console.log('display error : '+err);  
              jq("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);

          },
          loadComplete: function() {
       },
          jsonReader : {
              root: "rows",
              page: "page",
              total: "total",
              records: "records",
              repeatitems: false,
              cell: "cell",
              id: "id"
          }
      });
      jq("#grid").jqGrid('navGrid','#pager',
        {edit:true,add:true,del:true,search:true},
        { },
              { },
              { },
        {
            sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
               closeOnEscape: true,
                multipleSearch: true,
                 closeAfterSearch: true }
      );     
     });

此处自动完成工作正常，它列出了所有用户名，但它显示在jqgrid上的editForm后面。请提出解决方案。

谢谢＆amp;的问候，

Kartik Jajal

Answer 1

我通过设置.ui-front的z-index属性解决了这个问题，如下所示.ui-front {z-index：1000;在jquery ui css中

jqgrid自动完成在编辑表单后面可见

1 个答案: