关于JQuery 插件Grid的学习使用笔记 (PHP版)

关于JQuery 插件Grid的学习使用笔记 (PHP版)

 

     在开发WEB应用程序时，我们会经常和数据打交道，而数据通常都是通过表格的形式来进行显示。而在jQuery中，有一个Grid插件，
它在处理数据时功能异常的强大，能几乎满足我们的所有需求。可谓无敌。琢磨了Grid好几天，终于在网上找到了一个非常棒的学习使用
的例子。在这里http://www.trirand.net/demophp.aspx有各种Grid效果的演示，你只需在该站点的Download下载jqGrid for PHP放在你自己的本地环境中就可以自己随时方便演示。它的例子非常多，直接套用即可。
   
    在遇到需要Grid效果的时候，我们通常首先决定自己的项目需要一个什么样效果的Grid。
    个人对Grid常用功能大致总结如下：
          每列数据的排序功能
          分页功能
          列宽的拖拽改变功能
          Grid标题显示
          列与列之间的拖拽排序功能
          单击行背景变色
          滑过行高亮显示
          行号的显示
          对数据的添加 编辑 删除 搜索功能
          对Grid数据导出到excel中功能
          对列数据的SUM AVERAGE MAX MIN COUNT功能
          多行选择功能

    注：Grid中的数据来源有数据库中的表 xml文件 数组。

 

    现在我把下载下来的例子进行了一下grid功能的代码总结：主要是grid.php这个文件

 <?php

require_once '../../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/jqGrid.php";
// include the driver class
require_once ABSPATH."php/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");

// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = 'SELECT CustomerID, CompanyName, Phone, PostalCode, City FROM customers';
// Set the table to where you add the data
$grid->table = 'customers';  //指明数据添加到哪个表里
$grid->serialKey = false;   //需要用户来完成主键的插入(该表主键CustomerID类型varchar)
// Set output format to json
$grid->dataType = 'json';   //以json数据格式返回
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set some grid options
$grid->setGridOptions(array(  //对Grid的整体信息设置
 'caption'=>'Grid具有增删改查等多种丰富功能', //Grid标题
    "rowNum"=>25,
    "rowList"=>array(10,20,30),
    'hoverrows'=>true,    //滑过行高亮显示
    "sortname"=>"CustomerID",  //默认按CustomerID的asc排序
    'sortable'=>true,       //设置列与列之间可以拖拽表头排序
    //'sortorder'=>'desc'   //指定排序方式
   // 'width'=>600     //设置Grid宽度(该宽度可以指定为列宽度之和+20px的滚动条宽度)
    'height'=>500,        //设置Grid高度，默认为150
   //'altRows'=>true    //单击行，背景是否变色
   //'viewrecords'=>true   //查看总的记录数，默认为true
   //'loadtext'=>'loading...',  //加载文本，默认为loading...
  'multiselect'=>true,      //是否启用多选功能
  'rownumbers'=>true,      //设置显示行号
    //'rownumWidth'=>35,   //设置显示行号的宽度
    'autowidth'=>true,       //自适应宽度
));
//设置CustomerID为只读，不可修改(这种情况下该例子的主键将不能被添加，所以不启用)
//$grid->setColProperty('CustomerID', array("editoptions"=>array("readonly"=>true)));

// The primary key should be entered //定义编辑规则，CustomerID必须填写 //'sortable'=>false可以禁止列的排序功能
$grid->setColProperty('CustomerID', array("editrules"=>array("required"=>true),'width'=>150, 'align'=>'center', 'label'=>'顾客名称'));
$grid->setColProperty('CompanyName', array("width"=>"350", 'label'=>'公司名称'));//定义导出OrderDate这列的数据
$grid->setColProperty('Phone', array("width"=>"150",'align'=>'center', 'label'=>'联系电话'));//定义导出ShipName这列的数据
$grid->setColProperty('PostalCode', array("width"=>"200",'align'=>'center', 'label'=>'邮编'));//定义导出ShipName这列的数据
$grid->setColProperty('City', array("width"=>"150",'align'=>'center', 'label'=>'城市'));//定义导出ShipName这列的数据
// Enable navigator
$grid->navigator = true;
// Enable only deleting
$grid->setNavOptions('navigator', array("excel"=>true,"add"=>true,"edit"=>true,"del"=>true,"view"=>true, "search"=>true));
// Close the dialog after the record is added //设置添加对话框的信息
$grid->setNavOptions('add',array("closeAfterAdd"=>true,"reloadAfterSubmit"=>false));//添加数据完后关闭对话框
// Close the dialog after editing  //设置编辑对话框的信息，//编辑完数据后关闭对话框并修改对话框标题和提交按钮文本
$grid->setNavOptions('edit',array("closeAfterEdit"=>true,"editCaption"=>"Update Data","bSubmit"=>"Update"));
// At end call footerData to put total  label  //添加脚注统计信息
// Enable footerdata an tell the grid to obtain it from the request

$grid->setGridOptions(array("footerrow"=>true,"userDataOnFooter"=>true));//启用脚注行
$grid->callGridMethod('#grid', 'footerData', array("set",array('PostalCode'=>'统计:')));
// Set which parameter to be sumarized
$summaryrows = array('City'=>array('City'=>"SUM"));//SUM MAX MIN AVERAGE COUNT要注意大写

// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;

?>

 

  该例子包含了上面列出的所有常用功能。