jqGrid是一个不错的数据显示插件,能排序,能查找,还可以兼容jqueyr主题,对于前台来说应该算是一个福音,它支持一般常见的操作,界面直观,可直接进行点击进行编辑。下面直接贴上自己用php弄的服务器太麻和html代码等,先上index.php

<?php
error_reporting(E_ALL||~E_NOTICE);
header("Content-type: text/html; charset=utf-8");
mysql_connect("localhost",'root','') or die("数据库链接失败");
mysql_select_db("osadmin") or die("数据库选择失败");
mysql_query('set names utf8');
if($_POST&#91;'oper'&#93;=='edit'){//还有相应的search delete等代码,这个根据功能进行增加相应的代码
	$sql="UPDATE osa_waitui SET xmmc= '".$_POST&#91;'xmmc'&#93;." ', riqi =  '".$_POST&#91;'riqi'&#93;." ', ptmc= '".$_POST&#91;'ptmc'&#93;." ', wzbt= '".$_POST&#91;'wzbt'&#93;." ', wzljdz= '".$_POST&#91;'wzljdz'&#93;." ' slqk= '".$_POST&#91;'slqk'&#93;." ', pmqk= '".$_POST&#91;'pmqk'&#93;." ' WHERE `id` =".$_POST&#91;'id'&#93;;
	mysql_query($sql);
	if(mysql_affected_rows()<=0){
		echo "<script type='text/javascript'>alert('更新失败');</script>";//目前还不清楚怎么更新失败后弹窗提示
		return false;
	}
}

$page = $_GET['page']; // get the requested page 
$limit = $_GET['rows']; // get how many rows we want to have into the grid 
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort 
$sord = $_GET['sord']; // get the direction if(!$sidx) $sidx =1;
$result=mysql_query("select count(*) as count from osa_waitui");
$row=mysql_fetch_array($result);
$count=$row['count'];
if(!$sidx)
$sidx=1;
if($count>0){
	$total_pages=ceil($count/$limit);
}else{
	$total_pages=0;
}
if($page>$total_pages)
$page=$total_pages;
$start = $limit*$page - $limit; //do not put $limit*($page - 1)
$sql="select id,xmmc,riqi,ptmc,gjc,wzbt,wzljdz,slqk,pmqk from osa_waitui ORDER BY $sidx $sord LIMIT $start , $limit";
$result=mysql_query($sql);
$response->page=$page;
$response->total=$total_pages;
$response->records=$count;
$i=0;
while($row=mysql_fetch_array($result)){
	$response->rows[$i]['id']=$row[id];
	$response->rows[$i]['cell']=array($row[id],$row[xmmc],$row[riqi],$row[ptmc],$row[gjc],$row[wzbt],$row[wzljdz],$row[slqk],$row[pmqk]);//这边是$rows[$i]刚开始的时候看错了,调试了半天发现数据什么都正常,浪费了大把事件,细心很重要!
	$i++;
}
echo json_encode($response);

然后再上相应的前端demo.html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<meta charset="utf-8" />
<link id="uiThemes" rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
    <!-- 引入jQuery -->
    <script type="text/javascript" src="jquery.js"></script>
     <script src="js/jquery.jqGrid.js" type="text/javascript"></script>
     <script src="js/grid.jqueryui.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>

<body>
        <table id="gridTable"></table>
        <div id="gridPager"></div>
        <script type="text/javascript">
    $(function()
    {   var lastsel;
        jQuery("#gridTable").jqGrid({
                url:"index.php?q=2",
                datatype:"json",
                height: 250,
                colNames:['id','xmmc','riqi','ptmc','gjc','wzbt','wzljdz','slqk','pmqk'],
                colModel:[
                        {name:'id',index:'id', width:200,editable:true},
                        {name:'xmmc',index:'xmmc', width:200,editable:true},
                        {name:'riqi',index:'riqi', width:200,editable:true},
                        {name:'ptmc',index:'ptmc', width:200,editable:true},
                        {name:'gjc',index:'gjc', width:200,editable:false},
                        {name:'wzbt',index:'wzbt', width:200,editable:true},
                        {name:'wzljdz',index:'wzljdz', width:200,editable:true},
                        {name:'slqk',index:'slqk', width:200,editable:true},
                        {name:'pmqk',index:'pmqk', width:200,editable:true}

                ],
                grouping:true,//视图分组
                groupingView : { groupField : ['xmmc'] },
                onSelectRow: function(id){ if(id && id!==lastsel){ jQuery('#gridTable').jqGrid('saveRow',lastsel); jQuery('#gridTable').jqGrid('editRow',id,true); lastsel=id; } }, 
                editurl: "index.php",
                sortname:'id',
                sortorder:'asc',
                viewrecords:true,
                rowNum:10,
                rowList:[10,20,30],
                pager:"#gridPager",
                caption: "第一个jqGrid例子"
        });
    jQuery("#gridTable").jqGrid('navGrid','#gridPager',{edit:false,add:false,add:false});
    })    
</script>
</body>

</html>

这个可直接上github上面下载源码进行慢慢研究其它功能,还有可以上官方网站查看相应的demo代码!对于需要进行数据编辑以及表现来说这个是相当不错的选择,主要是操作数据库相当方便,直接点击就能直接编辑,和excel差不多,关键是数据量多了以后相比excel的优势就体现出来了,数据量大了以后打开excel就非常的缓慢,而且电脑会卡,这个就不会,而且相对于多用户来说,你打开以后别人就不能进行编辑!

相关文章:

  • 暂无相关文章