最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2015-06-09 15:19浏览(1757)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

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

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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: [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' 
        }); 
});

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
评论2
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 椅子
    03-26 08:25
    qqlixiangabc
    收藏起来,不错的界面和功能。。
  • 头像 沙发
    02-04 18:16
    sailing_sailor
    正是我需要的,用来做一个查询系统,要是跟可编辑的PHP+Ajax+Mysql+editable无刷新编辑表格结合那就太强大了
1 2