Question

我有一个.jsp页面，其中我创建了一个表单：

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!doctype html>
    <html>

    <head>
    <meta charset="utf-8">
    <title>Bank Details</title>
    <!-- Include meta tag to ensure proper rendering and touch zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="./css/jquery-ui.css">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-select.min.css">

    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="./js/jquery.min.js"></script>
    <!-- This is the Javascript file of jqGrid -->
    <script type="text/ecmascript" src="./js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.-->
    <script type="text/ecmascript" src="./js/trirand/i18n/grid.locale-en.js"></script>
    <!-- The "sortable" behaviour is needed by jqGrid for column resizing -->
    <script type="text/ecmascript" src="./js/jquery.ui.sortable.min.js"></script>
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="./css/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="./css/trirand/ui.jqgrid.css" />

    <script type="text/javascript" src="./scripts/bootstrap.js"></script>
    <script type="text/javascript" src="./scripts/bootstrap-select.min.js"></script>
    <script src="./js/jqGridBankDetails.js"></script>

    </head>

    <body>
            <form action="jqGridDetails" method="post">         
            <div class="well">
              <label id="rankIDLbl" for="rankIDCntrl">Rank ID </label><span style="font-weight: bold;"> :</span> 
              <select id="rankIDCntrl" name="rankIDCntl" class="selectpicker">
                <option></option>
                <option>Rank1</option>
                <option>Rank2</option>
            </select>

            <label for="lockerIDCntrl" style="padding-left: 150px;">Locker ID : </label> <select
                id="lockerIDCntrl" name="lockerIDCntrl" class="selectpicker">
                <option></option>
                <option>Locker1</option>
                <option>Locker2</option>
            </select>
        </div>
        <div style="float: right; padding-right: 15px;">
            <input type="submit" value="Search" id="searchBtn" class="btn btn-primary" />
            <input type="button" value="Reset" id="resetBtn" class="btn btn-primary" />
        </div>
    </form>
<table id="list">
        <tr>
            <td />
        </tr>
    </table>
    <div id="pager"></div>
    </body>
    </html>

脚本下方包含填充jqgrid的代码。

<script src="./js/jqGridBankDetails.js"></script>

现在点击按钮，我提交表单并将其重定向到myservlet post方法，即：

protected void doPost(HttpServletRequest request,
            HttpServletResponse response) throws ServletException, IOException {
        JqGridModel gridModel1 = new JqGridModel();
        gridModel1.setId(1);
        gridModel1.setFirstName("Mohaideen");
        gridModel1.setLastName("Jamil");
        gridModel1.setCity("Coimbatore");
        gridModel1.setState("TamilNadu");
        JqGridModel gridModel2 = new JqGridModel();
        gridModel2.setId(2);
        gridModel2.setFirstName("Ameerkhan");
        gridModel2.setLastName("Saffar");
        gridModel2.setCity("Thirunelveli");
        gridModel2.setState("Tamilnadu");
        List<JqGridModel> jqGridModels = new ArrayList<>();
        jqGridModels.add(gridModel1);
        jqGridModels.add(gridModel2);
        Gson gson = new GsonBuilder().setPrettyPrinting().create();
        String jsonArray = gson.toJson(jqGridModels);
        jsonArray = "{\"page\":1,\"total\":\"2\",\"records\":"
                + jqGridModels.size() + ",\"rows\":" + jsonArray + "}";
        System.out.println(jsonArray);
        response.getWriter().print(jsonArray);
    }

但是我无法填充我的jqGrid。我不知道如何做这项工作。期待您的回答。提前谢谢。

我的getJqGridBankDetails.js代码：

jQuery(document).ready(function() {
    $("#list").jqGrid({
        url : "GridServlet",
        datatype : "json",
        mtype : 'POST',
        colNames : [ 'Id', 'FirstName', 'LastName', 'City', 'State' ],
        colModel : [ {
            name : 'id',
            index : 'id',
            width : 100
        }, {
            name : 'firstName',
            index : 'firstName',
            width : 150,
            editable : true
        }, {
            name : 'lastName',
            index : 'lastName',
            width : 150,
            editable : true
        }, {
            name : 'city',
            index : 'city',
            width : 100,
            editable : true
        }, {
            name : 'state',
            index : 'state',
            width : 100,
            editable : true
        } ],
        pager : '#pager',
        rowNum : 10,
        rowList : [ 10, 20, 30 ],
        sortname : 'invid',
        sortorder : 'desc',
        viewrecords : true,
        gridview : true,
        caption : 'Data Report',
        jsonReader : {
            repeatitems : false,
        },
        editurl : "GridServlet"
    });
    jQuery("#list").jqGrid('navGrid', '#pager', {
        edit : true,
        add : true,
        del : true,
        search : true
    });
});

JQGrid填写表单提交

0 个答案: