删除行时jqGrid的其他POST数据 [英] jqGrid additional POST data when deleting row
本文介绍了删除行时jqGrid的其他POST数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要我的ro基于两个ID(用户ID和certID).在添加和更新时，它工作正常，但是在删除时，我需要这两个ID来删除数据库中的记录，但所有从POST数据中出来的都是"id"和"oper"，我需要向发布数据.这是我的代码:
<!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'(label: 'userID')和'certificationid'，并且'certificationid'列使用key: true. /p>
如果我正确理解您的问题，则两个值userID和certificationid的组合指定了需要删除的项目.在这种情况下，最好更改从服务器返回的数据，并在服务器响应中使用userID + "_" + certificationid作为id属性的值.顺便说一句，网格不需要具有隐藏的'id'列. id值将用于分配行(<tr>元素)的id属性的值.因此，无需在隐藏列的<td>中保存相同的信息.
我无法在服务器端进行建议的更改，然后可以使用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')
};
}
}
);
I need my ro is based on two IDs, Userid and certID. when adding and updating it works fine, but when deleting i need these two IDs to delete my record in the database but all is coming out of the POST data is "id" and "oper", i need to add the additional certId to the post Data. here is my code:
<!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>
解决方案
The grid have two hidden columns: 'id' (label: 'userID') and 'certificationid' and you use key: true for the 'certificationid' column.
If I correctly understand your question the the combination from two values userID and certificationid specifies the item which need be deleted. In the case it would be better to change the data returned from the server and to use userID + "_" + certificationid as the value for id property in the server response. By the way, the grid don't need to have hidden 'id' column. The id value will be used to assign the value of id properties of rows (<tr> elements). Thus one don't need to save the same information in <td> of the hidden column.
I you can't make the suggested changes on the server side then you can use onclickSubmit callback to extend the data. The code which you posed used delData inside of the options of Edit form, which is wrong:
$('#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')
};
}
}
);
这篇关于删除行时jqGrid的其他POST数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
