jqGrid는 fancybox 및 기타 플러그인과 결합하여 멋진 팝업 레이어 효과를 얻을 수 있습니다. PHP 배경과 상호 작용하면 쉽게 데이터를 추가하고 세부 정보를 볼 수 있으며 이 프로세스는 완전히 Ajax 비동기 통신 프로세스입니다. 이는 매우 친숙한 리치 클라이언트 애플리케이션입니다.
렌더링은 아래와 같습니다. 마음에 드는 친구는 소스 코드를 직접 다운로드할 수 있습니다.
이전 기사에서 jqGrid 자체에 강력한 셀 운영 모듈이 있다고 언급했습니다. 그러나 이 모듈은 사용자 습관에 적합하지 않습니다. 이번 기사에서는 fancybox를 사용하고, 플러그인을 구성하여 완성합니다. jqGrid 데이터의 추가 및 삭제 작업.
XHTML
먼저 헤드에 관련 js, css 파일을 소개해야 합니다.
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" /> <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" /> <link rel="stylesheet" type="text/css" href="css/fancybox.css" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="js/jquery.fancybox.js" type="text/javascript"></script> <script src="js/jquery.form.js" type="text/javascript"></script> <script src="js/jquery.message.js" type="text/javascript"></script>
그 중 fancybox는 팝업 레이어 효과를 표시하는 데 사용되는 플러그인이고, form과 message는 양식과 프롬프트 정보를 처리하는 데 사용되는 플러그인이며, 본문에 다음 코드를 추가합니다.
<div id="opt"> <div id="query"> <label>编号：</label><input type="text" class="input" id="sn" /> <label>名称：</label><input type="text" class="input" id="title" /> <input type="submit" class="btn" id="find_btn" value="查 询" /> </div> <input type="button" class="btn" id="add_btn" value="新 增" /> <input type="button" class="btn" id="del_btn" value="删 除" /> </div> <table id="list"></table> <div id="pager"></div>
페이지에 "추가" 및 "삭제" 버튼을 배치하고 테이블 컨테이너 #list(jqGrid가 테이블을 생성함)와 페이징 바 #pager를 배치합니다. 쿼리 기능에 대해서는 이전 글에서 설명했습니다.
새로운 데이터
1. 데이터 읽기: jqGrid를 호출하여 테이블을 생성합니다. 이 코드는 이 사이트의 이전 기사에서 자세히 설명됩니다. jqGrid 테이블 애플리케이션 - 읽기 및 쿼리. 데이터
2. 양식 호출: "추가" 버튼을 클릭하면 fancybox 플러그인이 호출되고 새 제품을 추가할 수 있는 양식 레이어가 나타납니다.
$(function(){
$("#add_btn").click(function(){
$.fancybox({
'type':'ajax',
'href':'addGrid.html'
});
}); fancybox가 호출되면 ajax 모드인 addGrid.html 페이지가 로드되는 것을 볼 수 있습니다. 이 페이지는 제출할 양식을 배치하는 데 사용됩니다. fancybox 플러그인 적용에 관한 자세한 내용은 이 사이트의 기사를 확인하세요: Fancybox의 풍부한 팝업 레이어 효과
3. 양식 제출: addGrid.html 페이지에 양식을 배치해야 합니다.
<form id="add_form" action="do.php?action=add" method="post"> ... </form>
"제출" 버튼을 클릭하면 양식이 확인됩니다. 여기서는 jquery.form.js를 사용하여 양식 확인 및 제출을 완료합니다.
$(function(){
$('#add_form').ajaxForm({
beforeSubmit: validate, //验证表单
success: function(msg){
if(msg==1){ //如果成功提交
$.fancybox.close(); //关闭fancybox弹出层
$().message("成功添加"); //提示信息
$("#list").trigger("reloadGrid"); //重新载入jqGrid数据
}else{
alert(msg);
}
}
});
});
function validate(formData, jqForm, options) {
for (var i=0; i < formData.length; i++) {
if (!formData[i].value) {
$().message("请输入完整相关信息");
return false;
}
}
$().message("正在提交...");
} 4. PHP가 데이터를 처리합니다. 양식 데이터가 백엔드 do.php에 제출된 후 프로그램은 양식에서 제출된 데이터를 필터링한 다음 데이터 테이블에 데이터를 삽입하고 실행 결과를 반환해야 합니다. 프론트엔드 페이지.
include_once ("connect.php"); //连接数据库
$action = $_GET['action'];
switch ($action) {
case 'list' : //列表
... //读取数据列表，代码省略，请参照上一篇文章中的代码
break;
case 'add' : //新增
//过滤输入的字符串
$pro_title = htmlspecialchars(stripslashes(trim($_POST['pro_title'])));
$pro_sn = htmlspecialchars(stripslashes(trim($_POST['pro_sn'])));
$size = htmlspecialchars(stripslashes(trim($_POST['size'])));
$os = htmlspecialchars(stripslashes(trim($_POST['os'])));
$charge = htmlspecialchars(stripslashes(trim($_POST['charge'])));
$price = htmlspecialchars(stripslashes(trim($_POST['price'])));
if (mb_strlen($pro_title) < 1)
die("产品名称不能为空");
$addtime = date('Y-m-d H:i:s');
//插入数据
$query = mysql_query("insert into products(sn,title,size,os,charge,price,addtime)values
('$pro_sn','$pro_title','$size','$os','$charge','$price','$addtime')");
if (mysql_affected_rows($link) != 1) {
die("操作失败");
} else {
echo '1';
}
break;
case '' :
echo 'Bad request.';
break;
} 데이터 삭제
데이터 삭제도 프런트엔드와 백엔드 간의 비동기 상호작용을 통해 완료됩니다. 이 예제의 삭제 기능은 jqGrid에서 선택한 삭제할 행을 가져온 후 해당 ID를 제출합니다. 선택한 데이터를 PHP 처리로 처리하려면 코드를 참조하세요:
$(function(){
$("#del_btn").click(function(){
var sels = $("#list").jqGrid('getGridParam','selarrrow');
if(sels==""){
$().message("请选择要删除的项！");
}else{
if(confirm("您是否确认删除？")){
$.ajax({
type: "POST",
url: "do.php?action=del",
data: "ids="+sels,
beforeSend: function() {
$().message("正在请求...");
},
error:function(){
$().message("请求失败...");
},
success: function(msg){
if(msg!=0){
var arr = msg.split(',');
$.each(arr,function(i,n){
if(arr[i]!=""){
$("#list").jqGrid('delRowData',n);
}
});
$().message("已成功删除!");
}else{
$().message("操作失败！");
}
}
});
}
}
});
}); 코드를 보면 먼저 jqGrid의 getGridParam 메소드를 통해 선택한 데이터 행 selarrrow를 가져옵니다. 여러 항목을 선택한 경우 가져온 sels 값은 쉼표로 구분된 문자열이며 확인 후 삭제를 확인하라는 메시지가 표시됩니다. , Ajax 요청을 제출하면 백그라운드 PHP가 데이터를 성공적으로 삭제하면 삭제된 데이터 ID가 반환됩니다. 프런트 엔드는 jqGrid의 delRowData 메서드를 호출하여 해당 데이터 행을 삭제하고 "삭제 성공" 메시지를 표시합니다.
백엔드 do.php는 ajax가 제출한 삭제할 ID를 가져와서 delete 문을 실행하고 삭제 작업을 완료합니다.
switch ($action) {
case 'del' : //删除
$ids = $_POST['ids'];
delAllSelect($ids, $link);
break;
case '' :
echo 'Bad request.';
break;
}
//批量删除操作
function delAllSelect($ids, $link) {
if (empty ($ids))
die("0");
mysql_query("delete from products where id in($ids)");
if (mysql_affected_rows($link)) {
echo $ids;
} else {
die("0");
}
} 지금까지 jqGrid에서 데이터를 읽고 추가하고 삭제하고 쿼리하는 기본 작업에 대한 설명을 완료했습니다. jqGrid 테이블의 적용글 설명에 틀린 부분이 있다면 지적해주시고 정정해주시면 감사하겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
