[eluser]ozskry[/eluser]
Another question: is it possible to show images inside the table? I want to show products previews.
Cheers,
Cary
[eluser]swhitlow[/eluser]
paulopmx - thanks for the response. Although my main problem was that nothing was showing up in firebug to trace anything. So, no errors were occurring.
However, I was able to find the root of the problem. This is just for anyone else who would want to know - the problem was with prototype. I had a prototype library being loaded. I did have the jquery noConflict mode on but for some reason, it still did not want to cooperate with Flexigrid. If anyone knows a way to have prototype and Flexigrid working together, that would be great.
For now, I have just removed the prototype reference and have been working around it.
[eluser]SeanRock[/eluser]
[quote author="ecarsted" date="1207711338"]Hey Paulo,
Code: $('#flex1').flexOptions({newp:1});
Fixed my paging problem.
A couple questions for you.
1) Is it possible to set the table to only select one row?
2) How do I add an event to a row being selected/deselected?
[/code]
[/quote]
i've modifed the flexigrid.js to fire a onRowSelected event that passes the id of the row, the actual row and the grid. it was suprisingly easy to implement.
i'm going to look at creating a 'multi-select' and 'single-select' option - (time permitting).
[edit]
wow thanks to Paulo's excellent work - implementing a singleSelect was so easy. if anyone is interested reply and i'll post the code here.
regards
Sean
[eluser]paulopmx[/eluser]
[quote author="swhitlow" date="1211316480"]paulopmx - thanks for the response. Although my main problem was that nothing was showing up in firebug to trace anything. So, no errors were occurring.
However, I was able to find the root of the problem. This is just for anyone else who would want to know - the problem was with prototype. I had a prototype library being loaded. I did have the jquery noConflict mode on but for some reason, it still did not want to cooperate with Flexigrid. If anyone knows a way to have prototype and Flexigrid working together, that would be great.
For now, I have just removed the prototype reference and have been working around it.[/quote]
This must be the same problem encountered with mootools, where mootools is 'extending' all native objects and methods. I will look in to this in my next release.
[eluser]paulopmx[/eluser]
[quote author="SeanRock" date="1211330893"][quote author="ecarsted" date="1207711338"]Hey Paulo,
Code: $('#flex1').flexOptions({newp:1});
Fixed my paging problem.
A couple questions for you.
1) Is it possible to set the table to only select one row?
2) How do I add an event to a row being selected/deselected?
[/code]
[/quote]
i've modifed the flexigrid.js to fire a onRowSelected event that passes the id of the row, the actual row and the grid. it was suprisingly easy to implement.
i'm going to look at creating a 'multi-select' and 'single-select' option - (time permitting).
[edit]
wow thanks to Paulo's excellent work - implementing a singleSelect was so easy. if anyone is interested reply and i'll post the code here.
regards
Sean[/quote]
Great job Sean.
jQuery is pretty easy just like CodeIgniter.
[eluser]Czarchaic[/eluser]
Hello all. I've been fascinated by this plugin for the last couple of days and I stumbled into this forum. I took some existing code I've been using and modified it for a very straight forward example of the use of this awesome plugin with CI. Excellent work Paulo!
The DB
Code: <?php // CREATE TABLE `dbname`.`homes` (
// `id` INT( 10 ) NOT NULL AUTO_INCREMENT ,
// `price` FLOAT( 14 ) NOT NULL ,
// `sqft` FLOAT( 10 ) NOT NULL ,
// `bedrooms` INT( 2 ) NOT NULL ,
// `pool` INT( 1 ) NOT NULL ,
// `description` VARCHAR( 250 ) NOT NULL ,
// PRIMARY KEY ( `id` )
// ) ENGINE = MYISAM
?>
Code: <?php
class Homesmodel extends Model {
function __construct() {
parent::Model();
}
/* RETURNS AN ARRAY WITH TWO ITEMS
'homes'=> THE RESULT OBJECT
'total'=> NUMBER OF TOTAL RESULTS OF THE QUERY WITHOUT LIMIT AND OFFSET */
function fetch_homes($sortname='price',$sortorder='desc',$limit=10,$offset=1,$query=null,$qtype=null) {
$this->db->from('homes');
$this->db->order_by($sortname,$sortorder);
if(! is_null($query)) {
/* GET TOTAL ROWS BEFORE THE LIMIT */
$this->db->like($qtype,$query);
$total = $this->db->get()->num_rows();
/* RESET THE DB QUERY SINCE IT WAS ALREADY USED */
$this->db->like($qtype,$query);
}
else {//NO QUERY
$total = $this->db->get()->num_rows();
}
/* RESET THE DB QUERY*/
$this->db->from('homes');
$this->db->order_by($sortname,$sortorder);
$this->db->limit($limit,$offset);
$q = $this->db->get();
$arr = array('homes'=>$q,'total'=>$total);
return $arr;
}
}
?>
Code: <?php
/* CODE IGNITER, JQUERY FLEXIGRID DEMO
WITH JSON TABLE UPDATING AND SEARCH */
/* LOAD THE FLEXIGRID STYLESHEET */
echo link_tag('css/flexigrid.css');
echo link_tag('css/homes.css');?>
<!-- THE FLEXIGRID TABLE -->
<table id="flexigrid_homes"></table>
<!-- LOAD JQUERY AND FLEXIGRID -->
<!-- script-->
function alertSelected() {
var alert_text = '';
var selected_rows = $("table#flexigrid_homes").find("tr.trSelected").get();
if(selected_rows.length > 0) {
alert_text = 'You selected the following row ids:' ;
}
else {
alert_text = 'You did dnot select any rows';
}
$.each(selected_rows,function(i,n) {
var id = $(n).attr("id");
alert_text += id.substr(3)+", ";
});
alert(alert_text);
/* console.log(alert_text); */
}
function selectAll() {
var rows = $("table#flexigrid_homes").find("tr").get();
if(rows.length > 0) {
$.each(rows,function(i,n) {
$(n).addClass("trSelected");
});
}
}
function deselectAll() {
var selected_rows = $("table#flexigrid_homes").find("tr").get();
if(selected_rows.length > 0) {
$.each(selected_rows,function(i,n) {
$(n).removeClass("trSelected");
});
}
}
function invertSelection() {
var rows = $("table#flexigrid_homes").find("tr").get();
$.each(rows,function(i,n) {
$(n).toggleClass("trSelected");
});
}
function bind_single_select() {
if ( ! $("input#single").length>0) {
$("span.single_select").prepend("<input type='checkbox' name='single' id='single' />");
}
$("table#flexigrid_homes").find("tr").click(function() {
if($("input#single").attr("checked")) {
$(".trSelected").removeClass("trSelected");
$(this).addClass("trSelected");
}
});
}
$(document).ready(function() {
$("table#flexigrid_homes").flexigrid({
url: '/CI_BASE/index.php/homes/flex',
dataType: 'json',
colModel : [
{display: 'Id', name : 'id', width : 40, sortable : true, align: 'left'},
{display: 'Description', name : 'description', width : 300, sortable : true, align: 'left'},
{display: 'Price', name : 'price', width : 100, sortable : true, align: 'left'},
{display: 'Square Footage', name : 'sqft', width : 100, sortable : true, align: 'right'},
{display: 'Bedrooms', name : 'bedrooms', width : 100, sortable : true, align: 'right'},
{display: 'Pool', name : 'pool', width : 30, sortable : true, align: 'center'},
],
searchitems : [
{display: 'Description', name : 'description', isdefault: true},
],
buttons : [
{name: 'Alert Selected', bclass: 'alert_selected',onpress: alertSelected},
{separator: true},
{name: 'Select All', bclass: 'alert_selected',onpress: selectAll},
{name: 'Deselect All', bclass: 'alert_selected',onpress: deselectAll},
{name: 'Invert Selection', bclass: 'alert_selected',onpress: invertSelection},
{separator: true},
{name: 'Single Select', bclass: 'single_select',onpress: bind_single_select},
],
sortname: "price",
sortorder: "desc",
usepager: true,
title: 'Homes',
procmsg: "Searching the MASSIVE homes database",
useRp: true,
rp: 5,
rpOptions: [5,10,20,50],
showTableToggleBtn: true,
height: '150',
onSuccess: bind_single_select
});
});
Next post the Controller
[eluser]Czarchaic[/eluser]
The Controller
homes.php
Code: <?php
class Homes extends Controller {
function __construct() {
parent::Controller();
/* LOAD THE HELPERS */
$this->load->helper(array('url','html'));
/* LOAD THE DATABASE FUNCTIONS */
$this->load->database();
$this->load->model('homesmodel');
}
public function index() {
$this->load->view('view_homes');//THE VIEW CONTAINING THE TABLE TO BE FLEXED
}
function flex() {//THE PUBLIC FUNCTION TO PRINT THE TABLE CONTENTS
if( ! $this->input->post('page')) {
echo "You shouldn't be here";
// redirect('homes');
}
else {
$json = $this->_populateFlexigrid();
//THE JSON ENCODED DATA
echo $json;
}
}
function _populateFlexigrid() {
header("Content-type: text/x-json");
/* GET THE POST */
$page = $this->input->post('page');
$rowsPerPage = $this->input->post('rp');
$sortname = $this->input->post('sortname');
$sortorder = $this->input->post('sortorder');
$query = $this->input->post('query');
$qtype = $this->input->post('qtype');
/* CHECK THE POST */
$sortname = ($sortname ? $sortname : 'id');//default sort
$sortorder = ($sortorder ? $sortorder : 'desc');//default order
$page = ($page ? intval($page) : 1);
$rowsPerPage = ($rowsPerPage ? intval($rowsPerPage) : 10);
$query = ($query ? $query : null);
$qtype = ($qtype ? $qtype : null);
$start = (($page-1) * $rowsPerPage);
/* GET THE RECORDS BASED ON THE ARGUMENTS */
$items = $this->homesmodel->fetch_homes($sortname,$sortorder,$rowsPerPage,$start,$query,$qtype);
$homes = $items['homes'];
$total = $items['total'];
/* THE ARRAY TO BE ENCODED WITH KNOWN VARIABLES*/
$json = array('page'=>$page, 'total'=>$total);
foreach ($homes->result() AS $home) {
/* ADD AN ICON FOR THE POOL RESULT */
$pool = ($home->pool ? img('images/true.png') : '');
$json['rows'][] = array(
'id'=>$home->id,
'cell' => array($home->id,$home->description,"$ ".number_format($home->price,0),number_format($home->sqft,0),$home->bedrooms,$pool),
);
}
return json_encode($json);
}
}
[eluser]Synergiq[/eluser]
Hi, is it possible to add some sort of styling to a certain row on the flexigrid dynamically? I would like to change the background color of rows that have a certain value.
[eluser]Holla die Waldfee[/eluser]
[quote author="SeanRock" date="1211330893"]
wow thanks to Paulo's excellent work - implementing a singleSelect was so easy. if anyone is interested reply and i'll post the code here.
regards
Sean[/quote]
ReplyReply  nake:
Indeed the Flexigrid is cool and Paulo did an excelent work. I have a solution for my problems, but it is not sophisticated. I am something like new at Javascript/DOM (usually I work with J2EE or PHP), but it is fascinating and sometimes strange and mindbogglingly :coolsmirk:.
So it would be nice to see an implementation with events!
Holla
[eluser]grantmx[/eluser]
BTW Great thread guys...Paulo this would be good stuff to start a Wiki or Google Group with.
Is there any way to skip the PHP echo or ASP call which then converts it to XML and instead just pull a hard XML file outputted from an already established db?
Thanks!
|
