Javascript 单击jqgrid中的“查找”按钮后关闭搜索弹出窗口_Javascript_Jquery_Json_Jqgrid

Javascript 单击jqgrid中的“查找”按钮后关闭搜索弹出窗口

javascript jquery json jqgrid

Javascript 单击jqgrid中的“查找”按钮后关闭搜索弹出窗口,javascript,jquery,json,jqgrid,Javascript,Jquery,Json,Jqgrid,单击“查找”按钮时如何关闭搜索弹出窗口。在jqgrid中搜索数据后，我单击查找按钮，搜索弹出窗口未关闭。已过滤搜索的数据，但弹出窗口未关闭 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

单击“查找”按钮时如何关闭搜索弹出窗口。在jqgrid中搜索数据后，我单击

查找

按钮，

搜索弹出窗口

未关闭。已过滤搜索的数据，但弹出窗口未关闭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
        <script src="<%=request.getContextPath()%>/js/jquery-1.9.1.js" type="text/javascript" ></script>
        <script src="<%=request.getContextPath()%>/js/jquery.jqGrid.min.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/style/colorbox.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/style/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/style/ui.jqgrid.css" />
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-validation.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.colorbox.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/grid.locale-en.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            //jqGrid
            $("#usersList").jqGrid({
                url:'<%=request.getContextPath() %>/Admin/getAllUsersList',
                datatype: "json",               
                colNames:['Edit','Primary Email','Active','First Name','Middle Name','LastName','Mobile Number','Cloud Url', 'Cloud User Name','Cloud Folder'],
                colModel:[
                    {name:'userId',search:false,index:'userId',width:30,sortable: false,formatter: editLink},                       
                    {name:'email',index:'user.primaryEmail',width:150},
                    {name:'isActive',index:'user.isActive',width:80},
                    {name:'firstName',index:'firstName', width:100},
                    {name:'middleName',index:'middleName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'mobileNo',index:'user.mobileNo', width:100},
                    {name:'cloudUrl',index:'user.cloudUrl', width:200},
                    {name:'cloudUserName',index:'user.cloudUserName', width:120},
                    {name:'cloudFolderName',index:'user.cloudFolderName', width:120},
                    ],
                    rowNum:20,
                    rowList:[10,20,30,40,50],
                    rownumbers: true,  
                    pager: '#pagerDiv',
                    sortname: 'user.primaryEmail',  
                    viewrecords: true,  
                    sortorder: "asc",
                    autowidth:'true',
            });
            $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
            $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .65);
            $('#load_usersList').width("130");
            $("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false});
            $(".inline").colorbox({inline:true, width:"20%"});
        });

        function editLink(cellValue, options, rowdata, action)
        {
            return "<a href='<%=request.getContextPath()%>/Admin/editUser/" + rowdata.userId + "' class='ui-icon ui-icon-pencil' ></a>";
        }
    </script>
</head>

<body>
<div style="" class="wrapper">
    <div style="height:10px; clear:both;"></div>
    <div class="ContentHolder">
        <div class="bgcolorblack">
            <div style="clear:both;"></div>
            <div style="padding:10px;">
                <div id="gridContainer">
                    <table id="usersList"></table>
                    <div id="pagerDiv"></div>
                </div>
            </div>
        </div>
    </div>
</div>


$（文档）.ready（函数（）{
//jqGrid
$（“#用户列表”）.jqGrid({
url:“/Admin/getAllUsersList”，
数据类型：“json”，
colname:['Edit'、'Primary Email'、'Active'、'First Name'、'Middle Name'、'LastName'、'Mobile Number'、'Cloud Url'、'Cloud User Name'、'Cloud Folder']，
colModel：[
{name:'userId'，search:false，index:'userId'，width:30，sortable:false，formatter:editLink}，
{名称：'email'，索引：'user.primaryEmail'，宽度：150}，
{名称：'isActive'，索引：'user.isActive'，宽度：80}，
{name:'firstName'，索引：'firstName'，宽度：100}，
{名称：'middleName'，索引：'middleName'，宽度：100}，
{name:'lastName'，索引：'lastName'，宽度：100}，
{名称：'mobileNo'，索引：'user.mobileNo'，宽度：100}，
{名称：'cloudUrl'，索引：'user.cloudUrl'，宽度：200}，
{名称：'cloudUserName'，索引：'user.cloudUserName'，宽度：120}，
{名称：'cloudFolderName'，索引：'user.cloudFolderName'，宽度：120}，
],
rowNum:20，
行列表：[10,20,30,40,50]，
行数：对，
寻呼机：“#pagerDiv”，
sortname:'user.primaryEmail'，
viewrecords：是的，
分拣员：“asc”，
自动宽度：'true'，
});
$（“#gridContainer div:not（.ui jqgrid titlebar）”）。宽度（“100%”；
$（'.ui jqgrid bdiv'）.css（'height'，window.innerHeight*.65）；
$（'load#u usersList'）。宽度（“130”）；
$（“#usersList”）.jqGrid（'navGrid'，'#pagerDiv'，{edit:false，add:false，del:false}）；
$（“.inline”）.colorbox（{inline:true，宽度：“20%”）；
});
函数editLink（单元格值、选项、行数据、操作）
{
返回“”；
}

在jqgrid中提到

closeAfterSearch:true

后，问题就解决了

单击“查找”按钮时，搜索弹出窗口关闭

代码：

$("#usersList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{}, {closeAfterSearch:true});