menampilkan image ke flexigrid js

Mely · Jul 20, 2011
saya ingin bertanya bagaimana cara menampilkan tampilan image ke flexigrid?
ini code flexigrid_helper:
<?php  if (!defined('BASEPATH')) exit('No direct script access allowed'); 
/**
 * Flexigrid CodeIgniter implementation
 *
 * PHP version 5
 *
 * @category  CodeIgniter
 * @package   Flexigrid CI
 * @author    Frederico Carvalho (frederico@eyeviewdesign.com)
 * @version   0.3
 * Copyright (c) 2008 Frederico Carvalho  (http://flexigrid.eyeviewdesign.com)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
*/
if (! function_exists('build_grid_js'))
{
	/**
	 * Build Javascript to display grid
	 *
	 * @param	grid id, or the div id
	 * @param	url to make the ajax call
	 * @param	array with colModel info: 		 
	 * 			* 0 - display name
	 *	 		* 1 - width
	 *	 		* 2 - sortable
	 *			* 3 - align
	 * 			* 4 - searchable (2 -> yes and default, 1 -> yes, 0 -> no.)
	 * 			* 5 - hidden (TRUE or FALSE, default is FALSE. This index is optional.) 
	 * @param	array with button info: 	
	 * 		 	* 0 - display name
	 *	 		* 1 - bclass
	 *	 		* 2 - onpress
	 * @param	default sort column name
	 * @param	default sort order
	 * @param	array with aditional parameters
	 * @return	string
	 */
	function build_grid_js($grid_id,$url,$colModel,$sortname,$sortorder,$gridParams = NULL,$buttons = NULL)
	{
		//Basic propreties
		$grid_js = '<script type="text/javascript">$(document).ready(function(){';
		$grid_js .= '$("#'.$grid_id.'").flexigrid({';
		$grid_js .= "url: '".$url."',";
		$grid_js .= "dataType: 'json',";
		$grid_js .= "sortname: '".$sortname."',";
		$grid_js .= "sortorder: '".$sortorder."',";
		$grid_js .= "usepager: true,";
		$grid_js .= "useRp: true,";
		
		//Other propreties
		if (is_array($gridParams))
		{
			//String exceptions that dont have ' '. Must be lower case.
			$string_exceptions = array("rpoptions");
			
			//Print propreties
			foreach ($gridParams as $index => $value) {
				//Check and print with or without ' '
				if (is_numeric($value)) {
					$grid_js .= $index.": ".$value.",";
				} 
				else 
				{
					if (is_bool($value))
						if ($value == true)
							$grid_js .= $index.": true,";
						else
							$grid_js .= $index.": false,";
					else
						if (in_array(strtolower($index),$string_exceptions))
							$grid_js .= $index.": ".$value.",";
						else
							$grid_js .= $index.": '".$value."',";
				}
			}
		}
		
		$grid_js .= "colModel : [";
		
		//Get colModel
		foreach ($colModel as $index => $value) {
			$grid_js .= "{display: '".$value[0]."', ".($value[2] ? "name : '".$index."', sortable: true," : "")." width : ".$value[1].", align: '".$value[3]."'".(isset($value[5]) && $value[5] ? ", hide : true" : "")."},";  
			
			//If item is searchable
			if ($value[4] != 0)
			{
				//Start searchitems var
				if (!isset($searchitems))
					$searchitems = "searchitems : [";
					
				if ($value[4] == 2)
					$searchitems .= "{display: '".$value[0]."', name : '".$index."', isdefault: true},";
				else if ($value[4] == 1)
					$searchitems .= "{display: '".$value[0]."', name : '".$index."'},";
			}
				
		}
		//Remove the last ","
		$grid_js = substr($grid_js,0,-1).'],';
		$searchitems = substr($searchitems,0,-1).']';
		
		//Add searchitems to grid
		$grid_js .= $searchitems;

		//Get buttons
		
		if (is_array($buttons)) 
		{
			$grid_js .= ",buttons : [";
			foreach ($buttons as $index => $value) {
				if ($value[0] == 'separator')
					$grid_js .= "{separator: true},";
				else
					$grid_js .= "{name: '".$value[0]."', bclass : '".$value[1]."', onpress : ".$value[2]."},";
			}
			//Remove the last ","
			$grid_js = substr($grid_js,0,-1).']';
		} 
		
		//Finalize
		$grid_js .= "}); })</script>";
		
		return $grid_js;
	}
}

?>
ini controllernya:
<?php
	
	class Product extends CI_Controller{
		
		function __construct()
		{
			parent::__construct();
			
			//$this->load->helper('flexigrid');
			$this->load->model('product_model');
		}

		public function index()
		{	
					
			$this->lists();	
			
			 //$records = $this->Product_Model->get_master_flexigrid();			
			 // foreach($records as $row)
			 // {
				// echo $row;	
			 // }
		}
		
		public function lists() 
		{
			$site_url = site_url();
			$colModel['products.code'] = array('Code',70,TRUE,'center',2);
			$colModel['products.name'] = array('Name',200,TRUE,'left',2);
			$colModel['merk'] = array('Merk',100,TRUE,'left',2);
			$colModel['category'] = array('Category',100,TRUE,'left',2);
            $colModel['subcategory'] = array('SubCategory',100,TRUE,'left',2);
			$colModel['size'] = array('Size',70,TRUE,'center',2);
			$colModel['color'] = array('Color',80,TRUE,'center',2);
			$colModel['unit'] = array('Unit',50,TRUE,'center',2);
			$colModel['price'] = array('Sell Price',50,TRUE,'right',2);
			$colModel['weight'] = array('Weight',50,TRUE,'right',2);
			$colModel['picture'] = array('Picture',200,TRUE,'right',2);
			
	
			$gridParams = array(
				'width' => '100%',
				'height' => 300,
				'rp' => 15,
				'rpOptions' => '[10,15,20,25,30,40]',
				'pagestat' => 'Displaying: {from} to {to} of {total} items.',
				'blockOpacity' => 0.5,
				'title' => 'Products',
				'showTableToggleBtn' => true				
				);
			/*
			 * 0 - display name
			 * 1 - bclass
			 * 2 - onpress
			 */
						
			$buttons[] = array('Add','add','btn');			
			$buttons[] = array('separator');
			$buttons[] = array('Edit','edit','btn');			
			$buttons[] = array('separator');
			$buttons[] = array('Delete','delete','btn');
			$buttons[] = array('separator');
			$buttons[] = array('Select All','','btn');
			$buttons[] = array('DeSelect All','','btn');
			$buttons[] = array('separator');
			
			$grid_js = build_grid_js('flex1',site_url("product/load_data"),$colModel,'id','asc',$gridParams,$buttons);	
			$data['js_grid'] = $grid_js;				
			$data['content'] = $this->load->view('admin/catalog/product/list', $data, TRUE);						
			$data['grid'] = $this->Product_Model->getAll();			
			$data["title"] = "eYJProduct";			
			$this->load->view('admin/index');
			$this->load->view('admin/catalog/product/index', $data);

		}
		
		public function load_data() 
		{
			
			$this->load->library('flexigrid');
			
			$valid_fields = array('products.code','products.name','merk','category','subcategory', 'size_code','color','unit','price','weight','picture');
	
			
			$this->flexigrid->validate_post('products.name','ASC',$valid_fields);
			
			//$records = $this->master_brgmod->get_master_flexigrid();
			$records = $this->Product_Model->get_master_flexigrid();
			
		     
			$this->output->set_header($this->config->item('json_header'));
		
			$record_items = array();
		   	
			foreach ($records['records']->result() as $row)
			{
				$query = $this->Product_Model->getMasterById($row->code);
			echo $pic1=explode(";",$query['picture']); for($i=0;$i<count($pic1)-1;$i++){
						 $img=substr($pic1[$i],0,-4)."_small";$ext=substr($pic1[$i],-4);
						echo $image= "<img src='images/small/".$img.$ext."'>";}
					$record_items[] = array(
						$row->code,
						$row->code,
						$row->name,
						$row->merk,
						$row->category,
                        $row->subcategory,
						$row->size_code,
						$row->color,
						$row->unit,
						$row->price,
						$row->weight,
						$image
					);				
			}
			//Print please
			$this->output->set_output($this->flexigrid->json_build($records['record_count'],$record_items));
		}
?>
Mohon pencerahannya, tx.GBU
Silahkan login untuk menjawab!
0
Loading...
Ellyx Christian · Jul 20, 2011 · 0 Suka · 0 Tidak Suka
saya rasa salah kamu ada di controller kamu, di function load_data(). Function load_data() memberikan respon berupa json tapi kamu menggunakan fungsi echo yang akan meng-output karakter lain selain json. Coba kode yang lebih rapi seperti berikut:
public function load_data() {

    $this->load->library('flexigrid');

    $valid_fields = array('products.code', 'products.name', 'merk', 'category', 'subcategory', 'size_code', 'color', 'unit', 'price', 'weight', 'picture');


    $this->flexigrid->validate_post('products.name', 'ASC', $valid_fields);

    //$records = $this->master_brgmod->get_master_flexigrid();
    $records = $this->Product_Model->get_master_flexigrid();


    $this->output->set_header($this->config->item('json_header'));

    $record_items = array();

    foreach ($records['records']->result() as $row) {
        $query = $this->Product_Model->getMasterById($row->code);
        $pic1 = explode(";", $query['picture']);
        for ($i = 0; $i < count($pic1) - 1; $i++) {
            $img = substr($pic1[$i], 0, -4) . "_small";
            $ext = substr($pic1[$i], -4);
            $image = "<img src=\'images/small/" . $img . $ext . "\'>";
        }
        $record_items[] = array(
            $row->code,
            $row->code,
            $row->name,
            $row->merk,
            $row->category,
            $row->subcategory,
            $row->size_code,
            $row->color,
            $row->unit,
            $row->price,
            $row->weight,
            $image
        );
    }
    //Print please
    $this->output->set_output($this->flexigrid->json_build($records['record_count'], $record_items));
}
bisa kamu lihat saya buat lebih rapi dan hilangkan penggunaan fungsi echo. Kemudian karena ouput berupa json, pada bagian $imaga karakter ' (tanda petik) dan " (petik dua) harus dieskip.
0
Loading...
Mely · Jul 21, 2011 · 0 Suka · 0 Tidak Suka
echo itu cuma ingin membuktikan apakah ada nilai dari variabel $pic1 dan $image soalnya ga keluar apa2 di flexigridnya. tadinya juga ga make.jadi make echo atau ga tetep ga keluar. apakah coding di flexigrid_helper ada yang harus ditambahkan agar bisa menampilkan image?klo ad, aku ga tau apa yang harus ditambahkan.
0
Loading...
Ellyx Christian · Jul 21, 2011 · 0 Suka · 0 Tidak Suka
apa kamu sudah coba koding yang saya kasi?
0
Loading...
Ellyx Christian · Jul 21, 2011 · 0 Suka · 0 Tidak Suka
jika gambarnya belum muncul, kamu install firebug untuk debug javascript dan html tagnya. Jika flaxigrid-nya sudah muncul tapi tidak ada data yang muncul, kemungkinan besar ada salah di function load_data(). Jika sudah ada data dan gambar tidak muncul beranti path gambarnya salah.
0
Loading...
Mely · Jul 21, 2011 · 0 Suka · 0 Tidak Suka
aku uda coba coding yang dikasi. tetep sama ga muncul. datanya ga muncul karena saya taruh $image di record, tapi klo dhilangkan semua data muncul kembali.
0
Loading...
Mely · Jul 21, 2011 · 0 Suka · 0 Tidak Suka
dari coding load_data() cuma bisa nampilin nama image dari database, tapi kalo munculin gambar tidak bisa.
$pic1 = explode(";", $query['picture']);
for ($i = 0; $i < count($pic1) - 1; $i++) {
$img = substr($pic1[$i], 0, -4) . "_small";
$ext = substr($pic1[$i], -4);
$image = "<img src=\'images/small/" . $img . $ext . "\'>";
coding ini juga sudah dicoba di page lain dan bisa muncul tapi di flexigrid tidak bisa.
Ada saran lain?tx
0
Loading...
Ellyx Christian · Jul 21, 2011 · 0 Suka · 0 Tidak Suka
coba dengan yang ini:

$image = '<img src=\"images/small/' . $img . $ext .'\">';

karena karate \' tidak valid dalam json. Coba lihat apa datanya muncul?
0
Loading...
Mely · Jul 21, 2011 · 0 Suka · 0 Tidak Suka
hehe, tetep tidak muncul, klo saya taruh $img atau $ext masih muncul, tp $image ga muncul
0
Loading...
Ellyx Christian · Jul 21, 2011 · 0 Suka · 0 Tidak Suka
datanya tidak tampil sama sekali atau hanya gambarnya yang tidak tampil? karena saya lihat contoh di http://flexigrid.eyeviewdesign.com/index.php/flexigrid/example seharusnya bisa menampilkan gambar. Coba kamu akses manual function load_data(), mis: http://localhost/path-to-project/product/load_data dan lihat apa hasil json-nya?
0
Loading...
Mely · Jul 21, 2011 · 0 Suka · 0 Tidak Suka
gambar doang yang tidak tampil. saya sudah coba akses, ada icon image tapi ga ada gambarnya