【问题标题】:jqGrid additional POST data when deleting row删除行时jqGrid附加POST数据
【发布时间】:2015-11-01 19:08:09
【问题描述】:

我需要我的 ro 基于两个 ID,Userid 和 certID。添加和更新时它工作正常,但是删除时我需要这两个 ID 来删除我在数据库中的记录,但所有来自 POST 数据的都是“id”和“oper”,我需要将额外的 certId 添加到发布数据。这是我的代码:

<!DOCTYPE HTML>
<html>
<head>
<title>jQGrid PHP inline Editing Tutorial</title>
    <link type="text/css" rel="stylesheet" href="plugins/jquery-ui/jquery-ui.min.css">
<!--<link rel='stylesheet' href='plugins/jqGrid/css/ui.jqgrid.css'/>-->
    <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="plugins/jqGrid/css/ui.jqgrid-bootstrap.css" />

    <script type="text/ecmascript" src="plugins/jquery/jquery-2.1.0.min.js"></script>
    <script type="text/ecmascript" src='plugins/jqGrid/js/i18n/grid.locale-en.js'></script>
    <script type="text/ecmascript" src='plugins/jqGrid/js/jquery.jqGrid.min.js'></script>
    <script type="text/ecmascript" src="plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script type="text/ecmascript" src="plugins/bootstrap-typehead/js/bootstrap3-typeahead.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="plugins/bootstrap-datepicker/css/bootstrap-datepicker.css" />
<meta charset="utf-8" />

<script>
    $.jgrid.defaults.width = 780;
    $.jgrid.defaults.responsive = true;
    $.jgrid.defaults.styleUI = 'Bootstrap';
</script>
</head>
<body>
<div style="margin-left:20px;">
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
</div>
    <script type="text/javascript">

$(document).ready(function () {

    $("#jqGrid").jqGrid({
        url: 'getUserCertList.php',
        editurl: 'UserCertUpdate.php',
        mtype: "GET",
        datatype: "json",
        page: 1,
        colModel:   [
                        { label: 'userID',  name: 'id', editable: false, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                        { label: 'certificationid', name: 'certificationid', key: true, editable: false, editrules: { edithidden: true }, hidden: true, width: 40, align: 'left' },
                        {
                           label: 'Certification',
                           name: 'certid',
                           width: 200,
                           editable: true,
                           edittype: "select",
                           editrules : { required: true},
                           editoptions : {dataUrl: "getCertList.php"}
                        },
                        {
                            label       :   'Date Certified',
                            name        :   'dateCertified',
                            width       :   80,
                            align       :   'center',
                            editable    :   true,
                            sortable    :   true,
                            sorttype    :   'date',
                            edittype    :   "text",
                            editrules : { required: true},
                            editoptions : {
                            // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                                // use it to place a third party control to customize the toolbar
                                dataInit: function (element) {
                                   $(element).datepicker({
                                        autoclose: true,
                                        format: 'yyyy-mm-dd',
                                        orientation : 'auto bottom'
                                    });
                                }
                            }
                        },
                        {
                            label       : 'Verified',
                            name        : 'verified',
                            width       : 40,
                            align       : 'center',
                            sorttype    : "number",
                            editable    : false,
                            edittype    : "checkbox",
                            editoptions : { value: "True:False" },
                            formatter   : "checkbox", formatoptions: { disabled: true }
                        },
                    ],
        loadonce : true,
        //onSelectRow: editRow, // the javascript function to call on row click. will ues to to put the row in edit mode
        viewrecords: true,
        height: 300,
        rowNum: 20,
        rownumbers: true, // show row numbers
        rownumWidth: 35, // the width of the row numbers columns
        pager: "#jqGridPager"
    });

        $('#jqGrid').navGrid("#jqGridPager",    {edit: false, add: false, del: true, refresh: true, view: true, search:false},
                             {delData: {
                                name: function() {
                                        var cert_id = $('#jqGrid').jqGrid('getGridParam', 'selrow');
                                        var value = $('#jqGrid').jqGrid('getCell', cert_id, 'colName');
                                        return value;
                                }
                            }
                   });
        $('#jqGrid').inlineNav('#jqGridPager',{edit: false,add: true,del: true,cancel: true,
                                editParams: {keys: true,},
                                addParams: {keys: true},
                            });


});

    </script>

</body>
</html>

【问题讨论】:

  • id 在从getUserCertList.php 返回的数据中使用什么(在填充网格期间)?您将key: true 属性用于certificationid 列。因此我可以假设certificationid anong 在服务器端污染了已删除的项目。你能得到userIDcertificationid 吗?

标签: jquery jqgrid


【解决方案1】:

网格有两个隐藏列:'id' (label: 'userID') 和 'certificationid',您使用 key: true 作为 'certificationid' 列。

如果我正确理解您的问题,userIDcertificationid 两个值的组合指定需要删除的项目。在这种情况下,最好更改从服务器返回的数据并使用userID + "_" + certificationid 作为服务器响应中id 属性的值。顺便说一句,网格不需要隐藏'id' 列。 id 值将用于分配行的id 属性值(&lt;tr&gt; 元素)。因此,不需要在隐藏列的&lt;td&gt; 中保存相同的信息。

如果您无法在服务器端进行建议的更改,那么您可以使用onclickSubmit 回调来扩展数据。您提出的代码在编辑表单的选项中使用了delData,这是错误的:

$('#jqGrid').navGrid("#jqGridPager",
    {edit: false, add: false, del: true, view: true, search: false},
    {}, // edit parameters
    {}, // add parameters
    {   // del parameters
        onclickSubmit: function (options, delId) {
            // get the vale from 'id' (label: 'userID') column
            // and extend the postdata with name property
            return {
                name: $(this).jqGrid('getCell', delId, 'id')
            };
        }
    }
);

【讨论】:

  • 哇,好快,非常感谢你是最棒的。我将在代码中进行更改以删除 id 的隐藏值。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-04-10
  • 1970-01-01
  • 1970-01-01
  • 2014-03-26
  • 2011-07-24
相关资源
最近更新 更多