如何在jqgrid中添加行，编辑，删除行？如何调用editurl ??
我的代码位于... jqgrid.php页面。
var $mygrid= jQuery("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Seq','Name', 'ID','Pass','Mail','Note'],
colModel :[
{name:'seq',index:'seq', width:55, resizable:false, editable:true, editoptions:{readonly:true,size:10}},
{name:'name',index:'name', width:90,resizable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:80, align:'right', editable:true, editoptions:{readonly:false,size:10}},
{name:'pass',index:'pass', width:80, align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'mail',index:'mail', width:80,align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:150, sortable:false} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30,50],
sortname: 'seq',
sortorder: "Asc",
width: 1000,
height: 230,
viewrecords: true,
multiselect: true,
editable: true,
toolbar: [true,"top"],
multikey: "ctrlKey",
editurl:'add.php',
caption: 'staff'
});
$("#list").jqGrid('navGrid', '#pager', {
edit: true,
add: true,
del: true,
search: false,
refresh:false
})
}）;
example.php代码是
enter code here <?php
$dbhost = 'localhost';
$dbuser = 'test';
$dbpassword = 'test';
$database = 'cs_test';
$page = $_GET['page'];
// get how many rows we want to have into the grid - rowNum parameter in the grid
$limit = $_GET['rows'];
// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx = $_GET['sidx'];
// sorting order - at first time sortorder
$sord = $_GET['sord'];
// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1;
// connect to the MySQL database server
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
// select the database
mysql_select_db($database) or die("Error conecting to db.");
// calculate the number of rows for the query. We need this to paging the result
$result = mysql_query("SELECT COUNT(*) AS count FROM TM_Staff");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
// calculation of total pages for the query
if( $count > 0 ) {
$total_pages = ceil($count/$limit);
//$total_pages = 20;
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit;
if($start<0) $start = 0;
// the actual query for the grid data
$SQL = "SELECT seq,name,id,pass,mail,ins_dt from TM_Staff ORDER BY $sidx $sord LIMIT $start,$limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml;charset=utf-8");
} else {
header("Content-type: text/xml;charset=utf-8");
}
echo "<?xml version='1.0' encoding='utf-8'?>";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>".$total_pages."</total>";
echo "<records>".$count."</records>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
echo "<row id='". $row[seq]."'>";
echo "<cell>". $row[seq]."</cell>";
echo "<cell>". $row[name]."</cell>";
echo "<cell>". $row[id]."</cell>";
echo "<cell>". $row[pass]."</cell>";
echo "<cell>". $row[mail]."</cell>";
echo "<cell><![CDATA[". $row[id]."]]></cell>";
echo "</row>";
}
echo "</rows>";
?>
请帮助我，我遇到了麻烦...
答案 0 :(得分：2)
var lastSel;
$(function () {
$("#grid").jqGrid({
colNames: ['Name', 'Address', 'Contact', 'Pan Number', 'Registration Number', 'Email Address', 'File'],
colModel: [
{ name: 'Name', index: 'Name', sortable: true, align: 'left', title: false, width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'Address', index: 'Address', sortable: true, title: false, align: 'left', width: 220, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'Contact', index: 'Contact', sortable: true, title: false, align: 'left', width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'PanNumber', index: 'PanNumber', sortable: true, title: false, align: 'left', width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'ServiceTaxRegistrationNo', index: 'ServiceTaxRegistrationNo', title: false, sortable: true, align: 'left', width: 240, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'Email', index: 'Email', sortable: true, align: 'left', title: false, width: 190, editable: true, edittype: 'text', editrules: { required: true, email: true }, formoptions: { elmprefix: '* ' }, search: false },
{ name: 'FilePath', index: 'FilePath', sortable: false, title: false, align: 'left', editable: true, edittype: 'file', width: 190, allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
search: false, editoptions: {
enctype: "multipart/form-data"
}
},
],
pager: jQuery("#pager"),
sortname: 'Name',
rowNum: 10,
rowList: [10, 20, 25],
sortOrder: "",
height: 225,
viewrecords: true,
rownumbers: true,
caption: "Companies",
width: 950,
imgpath: '/Content/themes/smoothness/images',
url: "/Master/GetCompanies",
editurl: "/Master/PerformCompanyCRUDAction",
datatype: "json",
mtype: "GET",
onCellSelect: function (rowid, iCol, aData) {
if (rowid && rowid !== lastSel) {
if (lastSel) {
$("#" + lastSel).removeClass('state-active');
$("#" + lastSel).addClass('ui-widget-content');
}
$("#" + rowid).removeClass('ui-widget-content');
$("#" + rowid).addClass('state-active');
lastSel = rowid;
}
}
});
jQuery("#grid").jqGrid('navGrid', '#pager',
{ edit: true, add: true, del: true, search: true, refresh: true },
{ closeOnEscape: true, reloadAfterSubmit: true, modal: true,
beforeShowForm: function (formid) {
$("#pData, #nData").hide();
},
onInitializeForm: function (formid) {
$(formid).attr('method', 'POST');
$(formid).attr('action', '');
$(formid).attr('enctype', 'multipart/form-data');
},
test: function () {
var filenam = $("#FilePath").val();
},
afterSubmit: function (response, postdata) {
$.ajaxFileUpload({
url: '/Master/CompanyFileUpload?CompanyId=' + postdata.id,
secureuri: false,
data: postdata,
cache: false,
contentType: 'multipart/form-data',
processData: false,
type: 'POST',
fileElementId: 'FilePath',
dataType: 'json',
success: function (data, status) {
// $('#notificationDiv').text("Bank Updated Successfully!");
}
});
return true;
},
closeAfterEdit: true, left: 200, top: 50, width: 500,
afterShowForm: function (formid) {
$('#Contact').numeric({ allow: "," });
},
afterComplete: function (response, postdata, formid) {
if (response.responseText == "true") {
$("#notificationDivSuccess").delay(0).fadeIn("slow");
$('#notificationDivSuccess').text("Record Updated Successfully!");
$("#notificationDivSuccess").delay(2500).fadeOut("slow");
$('#notificationDivFail').text("");
}
else {
$("#notificationDivFail").delay(0).fadeIn("slow");
$('#notificationDivFail').text("Record Already Exist!");
$("#notificationDivFail").delay(2500).fadeOut("slow");
$('#notificationDivSuccess').text("");
}
}
},
{ closeOnEscape: true, reloadAfterSubmit: true,
closeAfterAdd: true, left: 200, top: 50, width: 500,
onInitializeForm: function (formid) {
$(formid).attr('method', 'POST');
$(formid).attr('action', '');
$(formid).attr('enctype', 'multipart/form-data');
},
afterShowForm: function (formid) {
$('#Contact').numeric({ allow: "," });
},
afterSubmit: function (response, postdata) {
// var data = $.parseJSON(response.responseText);
// bid = data.id;
// pageNo = data.page;
//debugger;
var Id = response.responseText;
$.ajaxFileUpload({
url: '/Master/CompanyFileUpload?CompanyId=' + Id,
secureuri: false,
data: postdata,
cache: false,
contentType: 'multipart/form-data',
processData: false,
type: 'POST',
fileElementId: 'FilePath',
dataType: 'json',
success: function (data, status) {
// $('#notificationDiv').text("Bank Added Successfully!");
}
});
return true;
}
,
afterComplete: function (response, postdata, formid) {
if (response.responseText != "") {
if (response.responseText == "false") {
$("#notificationDivFail").delay(0).fadeIn("slow");
$('#notificationDivFail').text("Record Already Exist!");
$("#notificationDivFail").delay(2500).fadeOut("slow");
$('#notificationDivSuccess').text("");
}
else {
$("#notificationDivSuccess").delay(0).fadeIn("slow");
$('#notificationDivSuccess').text("New Record Added Successfully!");
$("#notificationDivSuccess").delay(2500).fadeOut("slow");
$('#notificationDivFail').text("");
}
}
else {
}
}
},
{ closeOnEscape: true, reloadAfterSubmit: true, left: 300, top: 80, width: 220,
afterComplete: function (response, postdata, formid) {
if (response.responseText == "true") {
$("#notificationDivSuccess").delay(0).fadeIn("slow");
$('#notificationDivSuccess').text("Record Deleted Successfully!");
$("#notificationDivSuccess").delay(2500).fadeOut("slow");
$('#notificationDivFail').text("");
}
else {
$("#notificationDivFail").delay(0).fadeIn("slow");
$('#notificationDivFail').text("The selected record can not be deleted, Please delete associated record first");
$("#notificationDivFail").delay(2500).fadeOut("slow");
$('#notificationDivSuccess').text("");
}
}
},
{ closeAfterSearch: true, closeOnEscape: true, left: 200, top: 50, enableClear: true,
onClose: function () {
var postdata = $("#grid").jqGrid('getGridParam', 'postData');
postdata._search = false;
postdata.searchString = "";
$("#grid").trigger('reloadGrid');
return true;
}
});
});
答案 1 :(得分：1)
在edit.php中你必须这样说：
if($_POST['oper']=='add')
{
... ... ...
}
else if($_POST['oper']=='edit')
{
... ... ...
}
else if($_POST['oper']=='del')
{
... ... ...
}
如果您想查看获得的内容，请使用：print_r($_REQUEST);
答案 2 :(得分：0)
var $mygrid= jQuery("#list").jqGrid({
url:'example.php',
editurl: 'edit.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Seq','Name', 'ID','Pass','Mail','Note'],
colModel :[
{name:'seq',index:'seq', width:55, resizable:false, editable:true, editoptions:{readonly:true,size:10}},
{name:'name',index:'name', width:90,resizable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:80, align:'right', editable:true, editoptions:{readonly:false,size:10}},
{name:'pass',index:'pass', width:80, align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'mail',index:'mail', width:80,align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:150, sortable:false} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30,50],
sortname: 'seq',
sortorder: "Asc",
width: 1000,
height: 230,
viewrecords: true,
multiselect: true,
editable: true,
toolbar: [true,"top"],
multikey: "ctrlKey",
caption: 'staff'
});
$("#list").jqGrid('navGrid', '#pager', {
edit: true,
add: true,
del: true,
search: false,
refresh:false
})
在edit.php中
if($_GET['oper']=='add')
{
... ... ...
}
if($_GET['oper']=='edit')
{
... ... ...
}
if($_GET['oper']=='del')
{
... ... ...
}
答案 3 :(得分：-1)
我非常喜欢PHPjq的想法，但他们的代码是＆＃34;销售＆＃34;没有任何防止SQL注入的最佳实践。所以购买他们的代码并添加正确的sql escape包装器或编写自己的....安全而不是懒惰。