Question

我制作了一个jqgrid，其中包含一列按钮。单击该按钮后，我想将rowObject（参数rollno）传递给servlet。如何通过创建由jquery创建的动态表单并将参数发送到servlet来做到这一点？

我正在尝试从数据库中获取包含文件的数据并将其显示在jqgrid中。我已将包含文件的表格字段成功存储在数据库中并插入了jqgrid中。我想下载相同的上传文件在按钮上单击单列中存在的每一行。

具有按钮格式化程序功能的JQGrid代码。

jQuery(document).ready(function() {
    $("#list").jqGrid({
        url : "ViewController",
        datatype : "json",
        mtype : 'POST',
        colNames : [ 'rollno', 'name', 'percentage', 'File', 'FileName' ],
        colModel : [ {
            name : 'rollno',
            index : 'rollno',
            width : 100
        }, {
            name : 'name',
            index : 'name',
            width : 150,
            editable : true
        }, {
            name : 'percentage',
            index : 'percentage',
            width : 150,
            editable : true
        }, {
            name : 'File',
            index : 'File',
            formatter: ButtonFormatter, 
            editable : true
        }, 
        ],
        pager : '#pager',
        rowNum : 10,
        rowList : [ 10, 20, 30 ],
        sortname : 'invid',
        sortorder : 'desc',
        viewrecords : true,
        gridview : true,
        edittype: 'file',
        editoptions: {
            enctype: "multipart/form-data"
        },
        caption : 'Data Report',
        jsonReader : {
            repeatitems : false,
        },

    });

    jQuery("#list").jqGrid('navGrid', '#pager', {
        edit : true,
        add : true,
        del : true,
        search : true
    });



});

function getJQGrid(){
    jQuery("#list")
    .jqGrid('setGridParam',
        { 
            datatype: 'json',

            url:'ViewController'
        })
    .trigger("reloadGrid");
}

function ButtonFormatter(cellvalue, options, rowObject) {

    var id = rowObject[0];

    return "<input type='button' value='somevalue' onclick='somefunction(+rowObject[0]+)'\>";


}

function somefunction(id){
alert(id);
}

JSP页面

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<title>Records</title>
<link rel="stylesheet" href="jqueryJs/jquery-ui.css">
<link rel="stylesheet" href="gridJs/css/ui.jqgrid.css">

<script src="jqueryJs/external/jquery/jquery.js"></script>
<script src="gridJs/js/i18n/grid.locale-en.js"></script>
<script src="gridJs/js/jquery.jqGrid.src.js"></script>
<script src="jqueryJs/jquery-ui.js"></script>

<script src="js/getJqGridData.js"></script>
<script type="text/javascript">

jQuery(document).ready(function() {
    $('.error').hide();
    $("#submit_btn").click(function() {
        $('.error').hide();
          var rollno = $("input#rollno").val();
            if (rollno == "") {
          $("label#rollno_error").show();
          $("input#rollno").focus();
          return false;
        }
            var name = $("input#name").val();
            if (name == "") {
          $("label#name_error").show();
          $("input#name").focus();
          return false;
        }
            var percent = $("input#percentage").val();
            if (percent == "") {
          $("label#percentage_error").show();
          $("input#percentage").focus();
          return false;
        }
            var dataString = 'Rollno='+ rollno + '&name=' +name + '&percentage=' + percent;





    });

    $("#submit_btn").click(function (event) {

        //stop submit the form, we will post it manually.
        event.preventDefault();

        // Get form
        var form = $('#formid')[0];

        // Create an FormData object 
        var data = new FormData(form);

        // If you want to add an extra field for the FormData
        data.append("CustomField", "This is some extra data, testing");

        // disabled the submit button
        $("#submit_btn").prop("disabled", true);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "HomeController",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 600000,
            success: function (data) {

                $("#result").text(data);
                console.log("SUCCESS : ", data);
                $("#submit_btn").prop("disabled", false);

            },
            error: function (e) {

                $("#result").text(e.responseText);
                console.log("ERROR : ", e);
                $("#submit_btn").prop("disabled", false);

            }
        });

    });
  });



  </script>
</head>

<body>
    <h3>Student Records</h3>
    <div id="contact_form">
        <form enctype="multipart/form-data" method="post" id="formid">
            <div>
                Roll no: <input type="text" name="rollno" id="rollno"> <label
                    class="error" for="rollno" id="rollno_error">This field is
                    required.</label>
            </div>
            <br>

            <div>
                Name: <input type="text" name="name" id="name" /> <label
                    class="error" for="name" id="name_error">This field is
                    required.</label>
            </div>
            <br>
            <div>
                Percentage: <input type="text" name="percentage" id="percentage" />
                <label class="error" for="percentage" id="percentage_error">This
                    field is required.</label>
            </div>
            <br>
            <div>
                File: <input type="file" name="file" size=50 /> <label
                    class="error" for="file" id="file_error">This field is
                    required.</label>
            </div>
            <br>


            <div>
                <input type="submit" value="Submit" class="button" id="submit_btn" />
            </div>
        </form>
    </div>

    <table id="list">
        <tr>
            <td />
        </tr>
    </table>
    <div id="pager"></div>
</body>

</html>

如何使用jquery创建的动态表单在onclick事件上传递参数？

0 个答案: