所属分类:PHP实例-Ajax,常用实例教程,MySQL
首先我们在页面上加相关按钮、生成表格#list和分页#pager。
<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>
接着我们引入jqGrid相关插件和 fancybox
<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>
$("#list").jqGrid({ url: 'do.php?action=list', //请求数据的url地址 datatype: "json", //请求的数据类型 colNames: ['编号', '名称', '主屏尺寸', '操作系统', '电池容量', '价格(¥)', '操作'], //数据列名称(数组) colModel: [//数据列各参数信息设置 {name: 'sn', index: 'sn', editable: true, width: 80, align: 'center', title: false}, {name: 'title', index: 'title', width: 180, title: false}, {name: 'size', index: 'size', width: 120}, {name: 'os', index: 'os', width: 120}, {name: 'charge', index: 'charge', width: 100, align: 'center'}, {name: 'price', index: 'price', width: 80, align: 'center'}, {name: 'opt', index: 'opt', width: 80, sortable: false, align: 'center'} ], rowNum: 10, //每页显示记录数 rowList: [10, 20, 30], //分页选项,可以下拉选择每页显示记录数 pager: '#pager', //表格数据关联的分页条,html元素 autowidth: true, //自动匹配宽度 height: 275, //设置高度 gridview: true, //加速显示 viewrecords: true, //显示总记录数 multiselect: true, //可多选,出现多选框 multiselectWidth: 25, //设置多选列宽度 sortable: true, //可以排序 sortname: 'id', //排序字段名 sortorder: "desc", //排序方式:倒序,本例中设置默认按id倒序排序 loadComplete: function(data) { //完成服务器请求后,回调函数 if (data.records == 0) { //如果没有记录返回,追加提示信息,删除按钮不可用 $("p").appendTo($("#list")).addClass("nodata").html('找不到相关数据!'); $("#del_btn").attr("disabled", true); } else { //否则,删除提示,删除按钮可用 $("p.nodata").remove(); $("#del_btn").removeAttr("disabled"); } } }); $(function() { $("#add_btn").click(function() { $.fancybox({ 'type': 'ajax', 'href': 'addGrid.html' }); }); $("#del_btn").click(function() { var sels = $("#list").jqGrid('getGridParam', 'selarrrow'); if (sels == "") { alert('请选择要删除的项!') } 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("操作失败!"); } } }); } } }); $("#find_btn").click(function() { var title = escape($("#title").val()); var sn = escape($("#sn").val()); $("#list").jqGrid('setGridParam', { url: "do.php?action=list", postData: {'title': title, 'sn': sn}, page: 1 }).trigger("reloadGrid"); }); });
$SQL = "SELECT * FROM products WHERE deleted=0" . $where . " ORDER BY $sidx $sord LIMIT $start , $limit"; $result = mysql_query($SQL) or die("Couldn t execute query." . mysql_error()); $responce->page = $page; $responce->total = $total_pages; $responce->records = $count; $i = 0; while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { $responce->rows[$i]['id'] = $row['id']; $opt = "<a href='#'>修改</a>"; $responce->rows[$i]['cell'] = array( $row['sn'], $row['title'], $row['size'], $row['os'], $row['charge'], $row['price'], $opt ); $i++; } //print_r($responce); echo json_encode($responce);
$(function(){ $("#add_btn").click(function(){ $.fancybox({ 'type':'ajax', 'href':'addGrid.html' }); });
<h3>新增产品</h3> <form id="add_form" action="do.php?action=add" method="post"> <table width="100%" cellpadding="0" cellspacing="0" class="post_table"> <tr> <td width="30%" align="right">产品名称:</td> <td><input type="text" class="input2" name="pro_title" maxlength="30" /></td> </tr> ...... <tr> <td height="60"> </td> <td><input type="submit" class="btn" value="提交"/> <input type="button" class="btn" value="取消" onclick="$.fancybox.close();" /></td> </tr> </table> </form>
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;
$(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("操作失败!"); } } }); } } }); });
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"); } }
参数 | 描述 | 默认值 |
url | 获取数据的地址 | - |
datatype | 从服务器端返回的数据类型。可选类型:xml,local,json,jsonnp,script,xmlstring,jsonstring,clientside | xml |
mtype | ajax提交方式。POST或者GET | GET |
colNames | 列显示名称,是一个数组对象 | - |
colModel | 常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序 | - |
pager | 定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置 | - |
rowNum | 在grid上显示记录条数,这个参数是要被传递到后台 | - |
rowList | 一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台 | - |
sortname | 默认的排序列。可以是列名称或者是一个数字,这个参数会被提交到后台 | - |
viewrecords | 定义是否要显示总记录数 | - |
caption | 表格名称 | - |
[a1] | 对ajax参数进行全局设置,可以覆盖ajax事件 | - |
[a2] | 对ajax的select参数进行全局设置 | - |
altclass | 用来指定行显示的css,可以编辑自己的css文件,只有当altRows设为 ture时起作用 | ui-priority-secondary |
altRows | 设置表格 zebra-striped 值 | - |
autoencode | 对url进行编码 | false |
autowidth | 如果为ture时,则当表格在首次被创建时会根据父元素比例重新调整表格宽度。如果父元素宽度改变,为了使表格宽度能够自动调整则需要实现函数:setGridWidth | false |
cellLayout | 定义了单元格padding + border 宽度。通常不必修改此值。初始值为 | 5 |
cellEdit | 启用或者禁用单元格编辑功能 | false |
cellsubmit | 定义了单元格内容保存位置 | remote |
cellurl | 单元格提交的url | - |
datastr | xmlstring或者jsonstring | - |
deselectAfterSort | 只有当datatype为local时起作用。当排序时不选择当前行 | true |
direction | 表格中文字的显示方向,从左向右(ltr)或者从右向左(rtr) | ltr |