安装H!Grid

H!Grid 使用需要略懂PHP知识,照样轻松建立自己专业的站点。系统需求:

  1. PHP 5.3以上
  2. PDO (MySQL or PostgreSQL) 例子为mysql

1 H!Grid如何安装

标准安装

  1. 将下载的higrid.版本代码.tar.gz解压缩
  2. 新建数据库,将higridsql.sql导入数据库
  3. 打开config/mysql_setting.php设置数据库参数;
  4. 打开example/config.php注释掉默认的数据库配置文件data.php并取消下一行的注释;
  5. 与上一条同样设置example/config_tree.php;chart/config.php,也可以合并成一个^_^
  6. 将解压缩后的全部文件上传到服务器,任意目录都可
  7. 浏览器中打开该目录index.php查看效果
  8. 增加其他表格或图形只需模仿example/chart文件夹中的php文件修改相应参数即可

注意事项

higrid展示jqgrid需要js和Css进行控制,因此一个显示页面的组成应该是这样的:

<link rel="stylesheet" type="text/css" media="screen" href="./themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./themes/ui.multiselect.css" />
<style type="text">
   html, body {
   margin: 0;           /* Remove body margin/padding */
   padding: 0;
   overflow: hidden;    /* Remove scroll bars on browser window */
   font-size: 75%;
   }
</style>
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="./js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="./js/jquery-ui-custom.min.js" type="text/javascript"></script>

从v2.2.1起,采用cdn加速,不提供本地js和css下载。

2 H!Grid 参数配置说明


/**
*本配置文件以例子letter.php为例进行说明。最终状态:
http://demo.higrid.net/higridpro/example.php?ex=letter.php
*/

defined('HIPATH') || define('HIPATH', dirname(__FILE__).'/');//本语句定义本文件的绝对路径
require_once(HIPATH.'config.php');//config.php保存着数据库连接设置,修改本目录下config.php相关参数

$connhigrid = new PDO(DB_DSN,DB_USER,DB_PASSWORD);//创建一个新的链接
$connhigrid->query("SET NAMES utf8");//设置数据库字符集

$grid = new hgGridRender($connhigrid);//实例化一个对象
//嗨网higrid:执行SQL查询,可自定义SQL语句
$grid->higridSC = 'SELECT * FROM higrid_letter';
$grid->setUserDate('Y-m-d');//自定义年月日显示方式
//也可以$grid->setUserDate('m/d/Y');

$grid->datearray = array('receiveddate','donedate');//'receiveddate'和'donedate'是这个表的两个日期字段

$grid->table = 'higrid_letter';//本数据库的表名称

//自动CRUD操作的key,唯一
$grid->setPrimaryKeyId('letterid');

$grid->dataType = 'json';
$grid->setColModel(); 


//嗨网higrid:隐藏部分列。默认所有列显示
$grid->higridsCP("letterid", array("hidden"=>true));
$grid->higridsCP("doneby", array("hidden"=>true));
$grid->higridsCP("donedate", array("hidden"=>true));

$grid->higridsCP('letterdate', 
        array("label"=>"收发文日期","width"=>"70",'align'=>'center',"formatter"=>"date",
            "formatoptions"=>array("srcformat"=>"Y-m-d", "newformat"=>"Y-m-d"),
            "editoptions"=>array(
            "defaultValue"=>date("Y-m-d"),
            "dataInit"=>
                "js:function(elm){setTimeout(function(){
                    jQuery(elm).datepicker({dateFormat:'yy-mm-dd'});
                    jQuery('.ui-datepicker').css({'font-size':'75%'});
                },200);}")
            ));

//设置每个字段名称,宽度,类型,是否必填?默认字符,筛选过滤选项等等
$grid->higridsCP("lettercontent", array("label"=>"函件内容",'width'=>250,"edittype"=>"textarea",
"editrules"=>array("rows"=>10, "cols"=> 100,'width'=>400,"required"=>true)));
$grid->higridsCP('fromunit', array("width"=>"60",'align'=>'center', 'label'=>'发文单位',    "formoptions"=>array("label"=>"发文单位", "elmsuffix"=>"按下拉菜单选择")));
$grid->higridsCP('tounit', array("width"=>"60",'align'=>'center', 'label'=>'收文单位',));
$grid->higridsCP('originid', array("width"=>"80",'label'=>'编号',));
$grid->higridsCP('donedate', array("editoptions"=>array("defaultValue"=>date("Y-m-d"))));

$grid->setSelect("fromunit", array("部门一"=>"部门一","部门二"=>"部门二", "IBM"=>"IBM","google国内"=>"google国内","其他"=>"其他"), false, true, true, array(""=>"默认公司"));
$grid->setSelect("tounit", array("部门一"=>"部门一","部门二"=>"部门二", "IBM"=>"IBM","google国内"=>"google国内","其他"=>"其他"), false, true, true, array(""=>"默认公司"));

//嗨网higrid:post数据处理文件,一般设置本脚本文件路径
$grid->setUrl('./example/letter.php');
//嗨网higrid:表格列属性设置
$grid->higridsGO(array(
    "rownumbers"=>true,//是否显示行号,默认false
    "caption"=>"工作台账",//自定义标题
    "hoverrows"=>true,//鼠标滑动是否变色
    "altRows"=>true,//是否显示斑马表格
    "rowNum"=>20,//默认行数
    "height"=>300,//表格高度
    "rowList"=>array(20,50,100,200),//每页多少数据
    "sortname"=>"letterdate",//排序的字段名称
    "sortable"=>true,//是否启动排序
    'sortorder'=>'desc'));//指定排序方式 
//嗨网higrid:表格列属性设置结束

$grid->navigator = true;//导航是否显示

//页面编辑设置true可用;false不显示、不可用
$grid->higridsNO('navigator', array("excel"=>true,"add"=>true,"edit"=>false,"del"=>false,"view"=>true, "refresh"=>true,"search"=>true,"pdf"=>false));

//增加数据对话框个性化
$grid->higridsNO('add',array("width"=>500,"height"=>300,"dataheight"=>"auto",
"closeAfterAdd"=>true,"reloadAfterSubmit"=>true));//添加数据完后关闭对话框
//编辑数据对话框个性化
$grid->higridsNO('edit',array("width"=>500,"height"=>300,"dataheight"=>"auto",
"closeAfterEdit"=>true,"reloadAfterSubmit"=>true,"editCaption"=>"编辑数据","bSubmit"=>"更新"));

//最终表格的table div id,pager div id
//本页的html代码
$grid->higridOP('#cd_lettergrid','#cd_letterpager',true, null, null, true,true); $connhigrid = null;//关闭连接

3 H!Grid 升级

最新版本

请访问H!Grid得到版本信息,最新稳定版:2.2.1

同时,请访问 版本记录 查看更新情况。

更新步骤

  1. 请从本站下载最新版本解压缩
  2. 更换根目录下的 higrid 文件夹
提示:请及时升级到最新版本,速度更快、安全更高

4 H!Grid支持

发现bug请统一在 GitHub Issues 提出问题