Wordpress Grid 4 PHP Framework Integration - Sample Snippet tested with Wordpress 6.4.3, https://www.gridphp.com

wp-demo-snippet-latest.php

/**
 * Grid 4 PHP Framework
 *
 * @author Abu Ghufran <gridphp@gmail.com> - https://www.gridphp.com
 * @version 3
 * @date 09-Aug-2024
 * @license: see license.txt included in package
 */

/*
Usage Notes: 
1) Change database configuration in the contructor and datagrid configuration in the render() function
2) If want to show grid in admin area, uncomment admin_init, admin_enqueue_scripts hooks in constructor.
3) In case of CSS conflict with Wordpress theme, adjust CSS at the end of render() function.
4) In case of multiple datagrids, use unique class name for each grid
5) Class name will be set as grid shortcode to be used in post/pages e.g. in our demo [phpgrid_users] 
*/
	 
class phpgrid_users
{
  	protected $g;
  	protected $grid_id;
  
  	public function __construct()
	{
		// set your shortcode name, should be unique. array parameters are (classname,function)
		add_shortcode(get_class($this), array($this,'render'));

		// ajax call management
		add_action('template_redirect', array($this,'json'));
		add_action('wp_enqueue_scripts', array($this,'plugin_scripts'));	

		// for datagrid in admin pages (next 2 lines)
		//add_action('admin_init', array($this,'json'));
		//add_action('admin_enqueue_scripts', array($this,'plugin_scripts'));

	  	$this->grid_id = get_class($this);
	  
		include_once(ABSPATH."phpgrid/inc/jqgrid_dist.php");

		// Database config file to be passed in phpgrid constructor
		$db_conf = array(
							"type"		=> "mysqli",
							"server"	=> DB_HOST,
							"user"		=> DB_USER,
							"password"	=> DB_PASSWORD,
							"database"	=> DB_NAME
						);

		$g = new jqgrid($db_conf);
		$this->g = $g;	  
	}

	function plugin_scripts()
	{
		$base_url = get_option('siteurl');
		
		// if needed to must use custom jquery, uncomment very next line
		// wp_enqueue_script('jquery-custom', $base_url.'/phpgrid/js/jquery.min.js',array('jquery'));
		
		// load jqgrid 
		wp_enqueue_script('jqgrid-locale', $base_url.'/phpgrid/js/jqgrid/js/i18n/grid.locale-en.js',array('jquery'));
		wp_enqueue_script('jqgrid-core', $base_url.'/phpgrid/js/jqgrid/js/jquery.jqGrid.min.js',array('jquery'));
		wp_enqueue_script('jqgrid-ui', $base_url.'/phpgrid/js/themes/jquery-ui.custom.min.js',array('jquery'));
		wp_enqueue_style('jqgrid-theme', $base_url.'/phpgrid/js/themes/redmond/jquery-ui.custom.css');
		wp_enqueue_style('jqgrid-core', $base_url.'/phpgrid/js/jqgrid/css/ui.jqgrid.bs.css');
		
		// load select2
		wp_enqueue_script('select2-js', '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js',array('jquery'));
		wp_enqueue_style('select2-css', '//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css');
	}
  
  
	public function json()
	{
		// If ajax call from datagrid
		if ( (isset($_GET["grid_id"]) && $_GET["grid_id"]==$this->grid_id) 
				&& ($_SERVER["HTTP_X_REQUESTED_WITH"] == 'XMLHttpRequest' || !empty($_GET["export"]) || !empty($_GET["import"] || !empty($_FILES))))		
		{
			$this->render();
		}
	}

	/*
	public function add_rows($data)
	{
	  	$g = $this->g;
	  	$check_sql = "SELECT count(*) as c FROM wp_users";
		$rs = $g->get_one($check_sql);

		if($rs["c"] > 0)
			phpgrid_error("The users already exists in the database");
	}
	*/

	// actual grid sample code from demos
	public function render() 
	{
		ob_start();
		$g = $this->g;
		$opt["caption"] = "Sample Grid ". get_current_user_id();

		// horizontal scroll bar
		$opt["autowidth"] = false;
		$opt["shrinkToFit"] = false;
		$opt["cmTemplate"]["visible"] = "xs+";

		$g->set_options($opt);

		$g->table = "wp_users";

	  	// sample use if event handler
	  	/*
		$e = array();
		$e["on_insert"] = array("add_rows", $this, true);
		$g->set_events($e);
		*/
			
		// should be unique grid id
		$out = $g->render($this->grid_id);
		$base_url = get_option('siteurl');
	?>
		<style>
		table {margin:0 !important; background-color: inherit;}
		table td, table th {border:0px !important; text-align:inherit; background:inherit; }
		.global-search input {padding: 3px 5px !important;}
		.ui-jqgrid .ui-jqgrid-htable td, .ui-jqgrid .ui-jqgrid-htable th, .ui-jqgrid .ui-pg-table td {padding: 1px 1px 0 1px !important;}
		.ui-jqgrid tr.jqgfirstrow td { padding: 0 2px 0 2px !important; }
		</style>

		<div>
		<?php echo $out?>
		</div>
	<?php
		$content = ob_get_clean();
		return $content;
	}
}

new phpgrid_users();

wp-demo-snippet-outdated.php

/**
 * PHP Grid Component
 *
 * @author Abu Ghufran <gridphp@gmail.com> - http://www.phpgrid.org
 * @version 1
 * @license: see license.txt included in package
 */

// Note: classname & grid-id should be unique when using multiple grids, line 18,23,57
// Same classname should be used in add_shortcode and add_action, line 13,16

// set your shortcode name, should be unique. array parameters are (classname,function)
add_shortcode("phpgrid-users", array('phpgrid_users','render'));

// ajax call management
add_action('template_redirect', array('phpgrid_users','json'));

function script_footer(){
	 $base_url = get_option('siteurl');
?>
	<!-- if jquery already included in theme, comment very next line -->
	<script src="<?php echo $base_url; ?>/phpgrid/js/jquery.min.js" type="text/javascript"></script>
	 
	<script>var $ = jQuery.noConflict();</script>
	<script src="<?php echo $base_url; ?>/phpgrid/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
	<script src="<?php echo $base_url; ?>/phpgrid/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
	<script src="<?php echo $base_url; ?>/phpgrid/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script>
<?php
}
add_action('wp_footer', 'script_footer',20);	
	 
// for datagrid in admin pages (next 2 lines)
add_action('admin_init', array('phpgrid_users','json'));
add_action('admin_footer', 'script_footer',20);

class phpgrid_users
{
  public static function json()
  {
	// list1 is unique ID passed to render function on line 54
        if ( (isset($_GET["grid_id"]) && $_GET["grid_id"]=="list1") && ($_SERVER["HTTP_X_REQUESTED_WITH"] == 'XMLHttpRequest' || isset($_GET["export"]) || isset($_GET["import"])))
	{
	  self::render();
	}
  }

  // actual grid sample code from demos
  public static function render() 
  {
	  include_once(ABSPATH."phpgrid/inc/jqgrid_dist.php");

	  // Database config file to be passed in phpgrid constructor
	  $db_conf = array(
						  "type" 		=> "mysqli",
						  "server" 		=> DB_HOST,
						  "user" 		=> DB_USER,
						  "password" 	=> DB_PASSWORD,
						  "database" 	=> DB_NAME
					  );

	  $g = new jqgrid($db_conf);

	  $opt["caption"] = "Sample Grid ". get_current_user_id();

	  // horizontal scroll bar
	  $opt["autowidth"] = false;
	  $opt["shrinkToFit"] = false;
	  $opt["cmTemplate"]["visible"] = "xs+";

	  $g->set_options($opt);

	  $g->table = "wp_users";

	  // should be unique grid id
	  $out = $g->render("list1");
	  $base_url = get_option('siteurl');
  ?>
	  <link rel="stylesheet" type="text/css" media="screen" href="<?php echo $base_url; ?>/phpgrid/js/themes/redmond/jquery-ui.custom.css" />
	  <link rel="stylesheet" type="text/css" media="screen" href="<?php echo $base_url; ?>/phpgrid/js/jqgrid/css/ui.jqgrid.bs.css" />

	  <style>
	  table {margin:0 !important; background-color: inherit;}
	  table td, table th {border:0px !important; text-align:inherit; background:inherit; }
	  .global-search input {padding: 3px 5px !important;}
	  .ui-jqgrid .ui-jqgrid-htable td, .ui-jqgrid .ui-jqgrid-htable th, .ui-jqgrid .ui-pg-table td {padding: 1px 1px 0 1px !important;}
	  .ui-jqgrid tr.jqgfirstrow td { padding: 0 2px 0 2px !important; }
	  </style>

	  <div>
	  <?php echo $out?>
	  </div>
  <?php
  }
}