Flexigrid - Lightweight but rich data grid

Flexigrid - Lightweight but rich data grid

El Forum
Guest

#391

06-11-2008, 07:15 AM

[eluser]Unknown[/eluser]
Hi guys,

First thanks you for flexigrid, it's so cool !

I try to do my first page with flexigrid and i have some problems.
I hope you can help me.
I'm french and my english is basic, sorry Smile

I try to do a field to open a new window with more detail for a line of my table.
In a new window, like a target="_blank" its work fine but when i try to open detail in a facebox, its bug.

See my code :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

    &lt;meta http-equiv="content-type" content="text/html" charset="utf-8" /&gt;

    &lt;title&gt;Base Contact&lt;/title&gt;

    &lt;link rel="stylesheet" href="facebox/facebox.css" media="screen" type="text/css" /&gt;

    &lt;link rel="stylesheet" type="text/css" href="css/flexigrid.css" /&gt;

jQuery(document).ready(function($) {

    $("#flex1").flexigrid({

            url: 'post.php',

            dataType: 'xml',

            colModel : [

                {display: 'Nom', name : 'nom', width : 180, sortable : true, align: 'center'},

                {display: 'Prenom', name : 'prenom', width : 120, sortable : true, align: 'center'},

                {display: 'Structure', name : 'Nom_de_structure', width : 180, sortable : true, align: 'center'},

                {display: 'Tel&eacute;phone', name : 'tel', width : 130, sortable : true, align: 'center'},

                {display: 'Email', name : 'email', width : 180, sortable : true, align: 'center', process: makeLink},

                {display: 'D&eacute;tail', name : 'num', width : 80, align: 'center', process: detail}

                ],

            buttons : [

                /*{name: 'Add', bclass: 'add', onpress : test},

                {name: 'Delete', bclass: 'delete', onpress : test},*/

            {separator: true},

                {name: 'A', onpress: sortAlpha},

                ...

                {name: '#', onpress: sortAlpha}

                ],

            searchitems : [

                {display: 'Nom', name : 'nom', isdefault: true},

                {display: 'Prenom', name : 'prenom'}

                ],

            sortname: "nom",

            sortorder: "asc",

            usepager: true,

            title: 'Contacts',

            useRp: true,

            rp: 17,

            showTableToggleBtn: true,

            width: 1000,

            height: 487

            });    

})

function sortAlpha(com){ 

    jQuery('#flex1').flexOptions({newp:1, params:[{name:'letter_pressed', value: com},{name:'qtype',value:$('select[name=qtype]').val()}]});

    jQuery("#flex1").flexReload(); 

}

function makeLink(celDiv){

       $(celDiv).html('<a href="mailto:' + $(celDiv).html() + '">' + $(celDiv).html() + '</a>');

} 

function detail(celDiv){

        $(celDiv).html('<a href="detail.php?id=' + $(celDiv).html() + '" style="text-decoration: none" rel="facebox"><img src="images/valid.png" border="0">D&eacute;tail</a>');

    $('a[rel*=facebox]').facebox({loading_image: 'loading.gif',close_image: 'closelabel.gif'});    

}

&lt;/head&gt;

&lt;body&gt;

<h1 align="center">Base Contact PNE</h1>

<a href="detail.php?id=1" style="text-decoration: none" rel="facebox"><img src="images/valid.png" border="0">D&eacute;tail</a>

<table id="flex1" style="display:none"></table>

&lt;/body&gt;

&lt;/html&gt;

My detail.php work fine, but in this code when it is in a facebox there is a loop which open the page and my fields are print 15x.
Do you know why ? I think my facebox code is not at a good place but i have try a lot of place and i have never fine a good.

I hope you'll understand my problem lol.

Thanks all

Quentin

***************************EDIT************************
Finally i have found a solution by an input and onclick:

Code:
function detail(celDiv){

        $(celDiv).html('&lt;INPUT type="submit" value="" width="16px" style="background: url(images/add.png) no-repeat; border:0; width:16px;" onclick="jQuery.facebox({ ajax: \'http://intranet/contact/detail.php?id=' + $(celDiv).html() + '\'})"&gt;');

}

And it's work Smile

Thanks all

*******************************************************