[JQGRID] Affichage de formulaire

Bonjour,

Je suis en train de mettre en place un petit site de consultation/édition de données en tableaux.

Je débute dans la POO et je me suis orienté vers le framework CodeIgniter, couplé avec JQUERY/JQGRID.

Grâce à la doc et aux tuto, j'ai réussi à créer mon tableau et je m'attaque maintenant aux formulaires d'édition.

Mon objectif est de faire apparaitre mon formulaire dans une fenêtre modale, après double-clic sur la ligne, mais j'ai encore un peu de mal à comprendre comment s'intègre le formulaire dans tout ça !

Ce que j'ai compris, c'est que le formulaire est appelé par l'option editurl, dans laquelle on définit le nom du fichier.

Dans mon exemple, j'obtiens bien la fenêtre modale, mais elle reste désespérément vide ! !

Merci de votre aide...

le fichier entreprises_view.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base target="_blank" href="http://debian2/ci/">
 
<title>Tableau entreprises</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/ui.jqgrid.css" />
 
 
<script src="assets/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="assets/js/grid.locale-fr.js" type="text/javascript"></script>
<script src="assets/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="assets/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/js/jquery.ui.datepicker-fr.min.js" type="text/javascript"></script>
</head>
<body>
 <table id="tblJQGrid"></table>
        <div id="divPager"></div>
 </body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(document).ready(function() {
    createUserGrid();
});
 
function createUserGrid() {
    $("#tblJQGrid").jqGrid({
        url:'entreprises/jqgrid_entreprises',
        datatype: "json",
        height: 650,
        width: 800,
        colNames:['ent', 'sir', 'raison_soc', 'lieu_dit','cp','com'],
        colModel:[
            {name:'ent',index:'ent', width:40},
            {name:'sir',index:'sir', width:60},
            {name:'raison_soc',index:'raison_soc', width:200},    
            {name:'lieu_dit',index:'lieu_dit', width:50},
            {name:'cp',index:'cp', width:40},
            {name:'com',index:'com', width:80}     
        ],
        //multiselect: true,
        scroll:1,
        rowNum:30,
        rowList:[20,30,50],
        loadonce: false,
        viewrecords: true,
        sortname:"raison_soc",
        sortorder:"asc",
        pager: '#divPager',
        caption: "Entreprises",
        editurl: "form_insc.php",
        ondblClickRow: function(rowid) {
    		jQuery(this).jqGrid('editGridRow', rowid,{top:100,left:100,width:400,height:400});
		} 
    }).navGrid("#divPager",{view:true});
 
}

le fichier form_insc.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base target="_blank" href="http://debian2/ci/">
</head>
<body>
 
<form id="editGridRow" class="FormGrid" style="width:100%;overflow:auto;position:relative;height:auto;" onsubmit="return false;" name="FormPost">      
	<tr id="FormError" style="display:none"><td class="ui-state-error" colspan="2"></td></tr>
	 <tr>
 		<td><input class="FormElement" id="ent" name="ent"  type="text"></td>
 		<td><input class="FormElement" id="sir" name="sir"  type="text"></td>
 		<td><input class="FormElement" id="raison_soc" name="raison_soc"  type="text"></td>
 	</tr>
</form>
</body>
</html>