首页>>Jquery文字>>PHP+jqGrid表格插件实现增加、删除和查询(2016-05-24)

PHP+jqGrid表格插件实现增加、删除和查询

PHP+jqGrid表格插件实现增加、删除和查询
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2.             $("#list").jqGrid({  
  3.                 url: 'do.php?action=list', //请求数据的url地址  
  4.                 datatype: "json", //请求的数据类型  
  5.                 colNames: ['编号', '名称', '主屏尺寸', '操作系统', '电池容量', '价格(￥)', '操作'], //数据列名称（数组）  
  6.                 colModel: [//数据列各参数信息设置  
  7.                     {name: 'sn', index: 'sn', editable: true, width: 80, align: 'center', title: false},  
  8.                     {name: 'title', index: 'title', width: 180, title: false},  
  9.                     {name: 'size', index: 'size', width: 120},  
  10.                     {name: 'os', index: 'os', width: 120},  
  11.                     {name: 'charge', index: 'charge', width: 100, align: 'center'},  
  12.                     {name: 'price', index: 'price', width: 80, align: 'center'},  
  13.                     {name: 'opt', index: 'opt', width: 80, sortable: false, align: 'center'}  
  14.                 ],  
  15.                 rowNum: 10, //每页显示记录数  
  16.                 rowList: [10, 20, 30], //分页选项，可以下拉选择每页显示记录数  
  17.                 pager: '#pager', //表格数据关联的分页条，html元素  
  18.                 autowidth: true, //自动匹配宽度  
  19.                 height: 275, //设置高度  
  20.                 gridview: true, //加速显示  
  21.                 viewrecords: true, //显示总记录数  
  22.                 multiselect: true, //可多选，出现多选框  
  23.                 multiselectWidth: 25, //设置多选列宽度  
  24.                 sortable: true, //可以排序  
  25.                 sortname: 'id', //排序字段名  
  26.                 sortorder: "desc", //排序方式：倒序，本例中设置默认按id倒序排序  
  27.                 loadComplete: function(data) { //完成服务器请求后，回调函数  
  28.                     if (data.records == 0) { //如果没有记录返回，追加提示信息，删除按钮不可用  
  29.                         $("p").appendTo($("#list")).addClass("nodata").html('找不到相关数据！');  
  30.                         $("#del_btn").attr("disabled", true);  
  31.                     } else { //否则，删除提示，删除按钮可用  
  32.                         $("p.nodata").remove();  
  33.                         $("#del_btn").removeAttr("disabled");  
  34.                     }  
  35.                 }  
  36.             });  
  37.             $(function() {  
  38.                 $("#add_btn").click(function() {  
  39.                     $.fancybox({  
  40.                         'type': 'ajax',  
  41.                         'href': 'addGrid.html'  
  42.                     });  
  43.                 });  
  44.                 $(".fancybox").click(function() {  
  45.                     $.fancybox({  
  46.                         'type': 'ajax',  
  47.                         'href': 'addGrid.html'  
  48.                     });  
  49.                 });  
  50.                 $("#del_btn").click(function() {  
  51.                     var sels = $("#list").jqGrid('getGridParam', 'selarrrow');  
  52.                     if (sels == "") {  
  53.                         alert('请选择要删除的项！')  
  54.                     } else {  
  55.                         if (confirm("您是否确认删除？")) {  
  56.                             $.ajax({  
  57.                                 type: "POST",  
  58.                                 url: "do.php?action=del",  
  59.                                 data: "ids=" + sels,  
  60.                                 beforeSend: function() {  
  61.                                     $().message("正在请求...");  
  62.                                 },  
  63.                                 error: function() {  
  64.                                     $().message("请求失败...");  
  65.                                 },  
  66.                                 success: function(msg) {  
  67.                                     if (msg != 0) {  
  68.                                         var arr = msg.split(',');  
  69.                                         $.each(arr, function(i, n) {  
  70.                                             if (arr[i] != "") {  
  71.                                                 $("#list").jqGrid('delRowData', n);  
  72.                                             }  
  73.                                         });  
  74.                                         $().message("已成功删除!");  
  75.                                     } else {  
  76.                                         $().message("操作失败！");  
  77.                                     }  
  78.                                 }  
  79.                             });  
  80.                         }  
  81.                     }  
  82.                 });  
  83.   
  84.                 $("#find_btn").click(function() {  
  85.                     var title = escape($("#title").val());  
  86.                     var sn = escape($("#sn").val());  
  87.                     $("#list").jqGrid('setGridParam', {  
  88.                         url: "do.php?action=list",  
  89.                         postData: {'title': title, 'sn': sn},  
  90.                         page: 1  
  91.                     }).trigger("reloadGrid");  
  92.                 });  
  93.             });  
  94.         </script>  
XML/HTML Code
  1. <div class="demo">  
  2.                 <div class="grid_table">  
  3.                     <div id="opt">  
  4.                         <div id="query">  
  5.                             <label>编号：</label><input type="text" class="input" id="sn" />  
  6.                             <label>名称：</label><input type="text" class="input" id="title" />  
  7.                             <input type="submit" class="btn2" id="find_btn" value="查 询" />  
  8.                         </div>  
  9.                         <input type="button" class="btn2" id="add_btn" value="新 增" />  
  10.                         <input type="button" class="btn2" id="del_btn" value="删 除" />  
  11.                     </div>  
  12.                     <table id="list"></table>  
  13.                     <div id="pager"></div>  
  14.                 </div>  
  15.             </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_560.html