最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

PHP+jqGrid表格插件实现增删改查

来源:http://www.erdangjiade.com/ 沐浴春风 2015-06-09 15:19浏览(1942)

今天介绍一款jqGrid表格插件,有点类似miniui框架

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

PHP+jqGrid表格插件实现增删改查
分类:其它特效 > jQuery插件 难易:高级
查看演示 下载资源 下载积分: 30 积分

HTML

首先我们在页面上加相关按钮、生成表格#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: [102030], //分页选项,可以下拉选择每页显示记录数 
        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($SQLor 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'  
        });  
});

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>

ddo.php?action=add

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("操作失败!");  
                   }  
              }  
            });  
           }  
        }  
    });  
});

do.php?action=del

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
标签: table表格jqgrid
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/159.html
评论3
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 板凳
    10-29 15:53
    小丹尼斯.里奇
    感谢二当家的,在学习和工作中都让我受益匪浅,学到了很多东西,增长了不少见识。
  • 头像 椅子
    03-26 08:25
    ngu137
    收藏起来,不错的界面和功能。。
  • 头像 沙发
    02-04 18:16
    sailing_sailor
    正是我需要的,用来做一个查询系统,要是跟可编辑的PHP+Ajax+Mysql+editable无刷新编辑表格结合那就太强大了
1 2