如何解决在当前层载入数据，其中包含搜索框，搜索结果不刷新当前页面，只刷新当前层，有没好的解决办法。

Question

当前层加载数据不刷新当前网页只刷新层springmvcjqgrid

Answer 1

之前也用过jqGrid插件做，但是失败了，如代码所示：<div id="tb_hcLabel3" style="display: black"><link href="../js/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
<link href="../js/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    var controllerName = 'SerialNumber';
    var searchForm;    function createViewLink(cellvalue, options, rowData) {
        if (cellvalue.toString().length > 11) {
            cellvalue = cellvalue.toString().substr(0, 11) + "...";
        }
        return "<a href='javascript:' name='viewLink' rowIndex='" + options.rowId + "' >" + cellvalue + "</a>";
    }
    function formatCreateData(cellvalue, options, rowData) {
        return jsonDateFormatter(cellvalue, "yyyy-MM-dd ");
    }    function serializeCondition() {
        return searchForm.serialize();
    }    function getRowData(rowIndex) {
        return $("#list").getRowData(rowIndex);
    }
    function createModelDialog(title, width, height) {
        $("#editDiv").dialog({
            modal: true,
            width: width,
            title: title,
            draggable: false,
            resizable: false,
            open: function (event) {
                $("#editDiv").data("dialog", event.target);
            },
            beforeClose: function () {
                $("#list").trigger("reloadGrid");
                $("#editDiv").dialog("destroy");
            }
        });
    }    function gridComplete() {
        //查看链接
        $("a[name='viewLink']").click(function () {
            var rowData = getRowData($(this).attr("rowIndex"));
            var letterType = $("#LetterType").val();
            window.open('/' + controllerName + '/LetterDetails/?id=' + rowData.Id, '_blank');
        });    }
    
    function formatBool(cellvalue, options, rowData) {
        if (cellvalue) {
            return '是';        } else {
            return '否';
        }
    }
    
    function stateformat(cellvalue, options, rowData) {        if (cellvalue == '已办结') {
            return "<span style='color:#666'>已办结</span>";
        }
        if (cellvalue == '已转办') {
            return "<span style='color:#79a800'>已转办</span>";
        }
        return "<span style='color:#ff0000'>未处理</span>";    }
    $().ready(function () {
        $("#LetterType").val(13);
        $.ajaxSetup({ cache: false });
        searchForm = $("#formLetterList");
        $("#list").jqGrid({
            url: '../wsxf/letterlist.xhtml?Category=${param.Category }',
            datatype: "json",
            colNames: ['信件ID', '信件分类Id', '是否为新的信件', '信件类别', '内容类别', '信件标题','责任部门', '发表时间', '公开', '回复状态', '关注率'],
            colModel: [
                { name: 'Id', index: 'Id', width: 150, align: 'center', hidden: true, sortable: false },
                { name: 'LetterType', index: 'LetterType', width: 100, align: 'center', hidden: true, sortable: false },
                { name: 'IsNewLetter', index: 'IsNewLetter', width: 150, align: 'center', hidden: true, sortable: false },                { name: 'Categories', index: 'Categories', width: 120, align: 'center' },
                { name: 'Project', index: 'Project', width: 120, align: 'center', sortable: false },                { name: 'PetitionTitle', index: 'PetitionTitle', align: 'left', width: 190, formatter: createViewLink, sortable: false },
                { name: 'ProposedUnit', index: 'ProposedUnit', width: 190, align: 'center', sortable: false },                { name: 'PetitionDate', index: 'PetitionDate', width: 100, align: 'center', formatter: formatCreateData },
                { name: 'PublicStatus', index: 'PublicStatus', width: 35, align: 'center', formatter: formatBool },
                { name: 'AdmissibleState', index: 'AdmissibleState', width: 75, align: 'center', formatter: stateformat },
                { name: 'Hit', index: 'Hit', width: 60, align: 'center' }            ]
           /*  altRows: true,//表格的行颜色交替
            altclass: "ui-priority-secondary1",
            //rownumbers: true,
            width: 900,
            hidegrid: false,
            height: "auto",
            rowNum: 20,
            pager: '#pager',
            emptyrecords: "没有满足条件的记录",
            viewrecords: true,
            caption: "来信列表查询",
            multiselect: false,
            jsonReader: {
                repeatitems: false
            },
            gridComplete: gridComplete */
        });       /*  var btnGo = $('<a href="javascript:" style="margin-left:2px">GO</a>');
        btnGo.click(function () {
            var page = $(this).parent().find(".ui-pg-input").val();
            $("#list").jqGrid('setGridParam', {
                page: page
            }).trigger("reloadGrid");
        });        $(".ui-pg-input").after(btnGo); */        /* $("#btnSearch").button().click(function () {
            if (!searchForm.valid()) {
                return false;
            }
            var url = '../wsxf/letterlist.xhtml?Category=${param.Category }';
            $("#list").jqGrid('setGridParam', {
                page: 1,
                url: url
            }).trigger("reloadGrid");
            return false;
        }); */        /* $("#CreateDate").datepicker({
            showOtherMonths: true,
            selectOtherMonths: true,
            changeMonth: true,
            changeYear: true
        });        $("#CreateDateEnd").datepicker({
            showOtherMonths: true,
            selectOtherMonths: true,
            changeMonth: true,
            changeYear: true
        });        $("#selectCreateDate").change(function () {
            var select = $(this).val();
            if (select == "0") {
                $("#CreateDate").val("");
                $("#CreateDateEnd").val("");
                $("#spanCreateDate").hide();
            }
            else if (select == "1") {
                $("#CreateDate").val("2014-06-03");
                $("#CreateDateEnd").val("2014-06-04");
                $("#spanCreateDate").hide();
            } else if (select == "2") {
                $("#CreateDate").val("2014-05-28");
                $("#CreateDateEnd").val("2014-06-04");
                $("#spanCreateDate").hide();
            }
            else if (select == "3") {
                $("#CreateDate").val("2014-05-05");
                $("#CreateDateEnd").val("2014-06-04");
                $("#spanCreateDate").hide();
            }
            else if (select == "4") {
                $("#CreateDate").val("2013-06-04");
                $("#CreateDateEnd").val("2014-06-04");
                $("#spanCreateDate").hide();
            }
            else if (select == "5") {
                $("#CreateDate").val("");
                $("#CreateDateEnd").val("");
                $("#spanCreateDate").show();
            }
        });
        $("#spanCreateDate").hide(); */
    });
</script>
<style type="text/css">
    #list td
    {
        font-size: 13px;
        line-height: 30px;
    }
</style>
<div class="">
<form action="/SerialNumber/List" id="formLetterList" method="get">        <br />   <div class="yh_con1">
            <div class="yh_con1_r">                <div style="margin: 5px; text-align: left;" id="divSearch">
                    <table width="790" border="0" cellspacing="0" cellpadding="0" class="tab9">
                        <tr>
                            <td style="height: 90px">
                                <input data-val="true" data-val-length="字段 用户名 必须是最大长度为 200 的字符串。" data-val-length-max="200" id="AccountName" name="AccountName" type="hidden" value="" />
                                <input data-val="true" data-val-length="字段 查询编号 必须是最大长度为 12 的字符串。" data-val-length-max="12" id="Number" name="Number" type="hidden" value="" />
                                <input data-val="true" data-val-required="来信类型 字段是必需的。" id="LetterType" name="LetterType" type="hidden" value="" />
                                信件状态：<select data-val="true" data-val-required="信件状态 字段是必需的。" id="LetterStatus" name="LetterStatus"><option value="0">全部</option>
<option value="1">未处理</option>
<option value="2">已转办</option>
<option value="7">已办结</option>
</select>&nbsp;
                                标题：<input id="Title" name="Title" type="text" value="" /> &nbsp;
                                来信日期：<input data-val="true" data-val-date="字段 创建日期 必须是日期。" id="CreateDate" name="CreateDate" style="width:100px" type="text" value="" /> &nbsp;至&nbsp;<input data-val="true" data-val-date="字段 CreateDateEnd 必须是日期。" id="CreateDateEnd" name="CreateDateEnd" style="width:100px" type="text" value="" /> &nbsp;
                                <input type="button" style="height: auto" id="btnSearch" value="查  询" />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
</form>    <div class="clear"></div>
    <table id="list" width="100%">
    </table>
    <div id="pager">
    </div>
    <em>您可以点击列名进行排序</em><br />
</div>
<div id="editDiv">
</div></div>

Answer 2

这问题刚好本人也碰到过，没找到更好的办法，使用了笨办法。我的办法是将jsp需要刷新的层放在后台构造一个html的字符串，如何按需加入相应的层，或者可以讲这个层的代码独立出来一个jsp文件，使用include标签加入相应的层，这样就可以刷新了。方法比较老土，但实现了需要的功能。

Answer 3

如果是表格类的，当然easyui最好用了，个人觉得

Answer 4

看了lz的帖子，但是不知道难度具体在哪里。得到查询结果后就是组合界面的html元素了，无非是代码稍微多一点，但是不知道有什么有难度的问题

Answer 5

层 不就是 一个 div吗？ 这个div里自己用 js脚本写一个 table的东东就可以了！
用什么 dataGrid,太麻烦。

Answer 6

表格复杂的话，那就用 组件吧ajax请求获得json数据，显示到div里就ok.