jqgrid master-detail

**bdjamila** · 13/04/2009, 14h58

j'ai le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script type="text/javascript">
var gridimgpath = 'themes/steel/images';
jQuery(document).ready(function(){
jQuery("#list10").jqGrid({ 
	url:'master.php?q=2&ids='+ids, 
	datatype: "xml", 
	colNames:['reference', 'composant', 'libelle', 'version', 'quantite','debut','fin'], 	
	colModel:[ 
		{name:'reference',index:'reference',  width:90}, 		
		{name:'composant',index:'composant',  width:90},
		{name:'libelle',index:'libelle', width:200}, 		
		{name:'version',index:'version', width:80, align:"right"}, 
		{name:'quantite',index:'quantite', width:80, align:"right"}, 
		{name:'debut',index:'debut', width:80,align:"right"}, 
		{name:'fin',index:'fin', width:80, sortable:false} ], 
		rowNum:7, 
		rowList:[10,20,30], 
		imgpath: gridimgpath, 
		pager: jQuery('#pager10'), 
		sortname: 'composant', 
		viewrecords: true, 
		sortorder: "asc", 
		multiselect: false, 
		datatype: "xml", 
		caption: "Nomenclature", 
                   onSelectRow: (function(ids) { 
			if(ids == null) { ids=' '; 
			if(jQuery("#list10_d").getGridParam('records') >0 ) { 
				jQuery("#list10_d").setGridParam({
				url:"detail.php?q=1&id="+ids,page:1}) 
				.setCaption("Gamme d'\operations: "+composant)      .trigger('reloadGrid'); 
				} 
			} else { 
				jQuery("#list10_d").setGridParam({
				url:"detail.php?q=1&id="+ids,page:1}) 
				.setCaption("Gamme d'\operations: "+ids) 
				.trigger('reloadGrid'); 
				} 
			}) 
 
		}).navGrid('#pager11',{add:false,edit:false,del:false});
 
})
.navGrid('#pager10',{add:false,edit:false,del:false}); 
jQuery(document).ready(function(){
jQuery("#list10_d").jqGrid({ 
	height: 120, 
	url:'detail.php?q=1&id='+ids, 
	datatype: "xml", 
	colNames:['reference','version','operation','cfi','preparation','execution'], 
	colModel:[ 
		{name:'reference',index:'reference', key:true, width:180}, 
		{name:'version',index:'version', width:80}, 
		{name:'operation',index:'operation', width:80, align:"right"}, 
		{name:'cfi',index:'cfi', width:80, align:"right"}, 
		{name:'preparation',index:'preparation', width:80, align:"right"}, 		
		{name:'execution',index:'execution', width:80,align:"right", sortable:false, search:false} ], 
		rowNum:6, 
		rowList:[5,10,20], 
		imgpath: gridimgpath, 
		pager: jQuery('#pager10_d'), 
		sortname: 'operation', 
		viewrecords: true, 
		sortorder: "asc", 
		multiselect: false, 
		caption:"Gamme d'\operations"})
.navGrid('#pager10_d',{add:true,edit:false,del:false}); 
jQuery("#ms1").click( function() {
	var s; 
	s = jQuery("#list10_d").getMultiRow(); 
	alert(s); 
})
});
</script>
 
</head>
 
<body>
<!-- Nomenclature --> 
<table id="list10" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager10" class="scroll" style="text-align:center;">
</div> 
<!-- <a href="javascript:void(0)" id="ms1">Get Selected id's</a> -->
<!-- Opérations --> 
<table id="list10_d" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager10_d" class="scroll" style="text-align:center;"></div> 
<a href="javascript:void(0)" id="ms1">Get Selected id's</a>
</body>
</html>

mais le "onSelectRow: (function(ids) {" ne fonctionne pas.
Aussi je tiens à préciser que j'aimerais faire la selection sur une donnée bien précise (composant) et non pas sur le row_id.
merci pour votre aide.

**danielhagnoul** · 13/04/2009, 20h49

Bonsoir.

Après avoir "mis en forme" le code javascript, si je n'ai pas fait d'erreur, onSelectRow(...) {} est en dehors de l'appel à jqGrid est ce normal ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
    <script type="text/javascript">
        var gridimgpath = 'themes/steel/images';
 
        $(document).ready(function(){
            $("#list10").jqGrid({
                url:'master.php?q=2&ids='+ids,
                datatype: "xml",
                colNames:['reference', 'composant', 'libelle', 'version', 'quantite','debut','fin'],
                colModel:[
                    {name:'reference',index:'reference', width:90},
                    {name:'composant',index:'composant', width:90},
                    {name:'libelle',index:'libelle', width:200},
                    {name:'version',index:'version', width:80, align:"right"},
                    {name:'quantite',index:'quantite', width:80, align:"right"},
                    {name:'debut',index:'debut', width:80,align:"right"},
                    {name:'fin',index:'fin', width:80, sortable:false}
                ],
                rowNum:7,
                rowList:[10,20,30],
                imgpath: gridimgpath,
                pager: $('#pager10'),
                sortname: 'composant',
                viewrecords: true,
                sortorder: "asc",
                multiselect: false,
                <!-- subGridUrl: 'detail.php?q=2', -->
                datatype: "xml",
                <!-- subGridModel: [{ name : ['reference','version','operation','cfi','execution'], width : [55,200,80,80,80] } ], -->
                caption: "Nomenclature",
            }).navGrid('#pager11',{add:false,edit:false,del:false});
 
 
            onSelectRow: (function(ids) {
                if(ids == null) {
                    ids=' ';
 
                    if($("#list10_d").getGridParam('records') > 0 ) {
                        $("#list10_d").setGridParam({url:"detail.php?q=1&id="+ids,page:1}).setCaption("Gamme d'\operations: "+composant).trigger('reloadGrid');
                    }
                } else {
                    $("#list10_d").setGridParam({url:"detail.php?q=1&id="+ids,page:1}).setCaption("Gamme d'\operations: "+ids).trigger('reloadGrid');
                }
            })
        }).navGrid('#pager10',{add:false,edit:false,del:false});
 
        $(document).ready(function(){
            $("#list10_d").jqGrid({
                height: 120,
                url:'detail.php?q=1&id='+ids,
                datatype: "xml",
                colNames:['reference','version','operation','cfi','preparation','execution'],
                colModel:[
                    {name:'reference',index:'reference', key:true, width:180},
                    {name:'version',index:'version', width:80},
                    {name:'operation',index:'operation', width:80, align:"right"},
                    {name:'cfi',index:'cfi', width:80, align:"right"},
                    {name:'preparation',index:'preparation', width:80, align:"right"},
                    {name:'execution',index:'execution', width:80,align:"right", sortable:false, search:false}
                ],
                rowNum:6,
                rowList:[5,10,20],
                imgpath: gridimgpath,
                pager: $('#pager10_d'),
                sortname: 'operation',
                viewrecords: true,
                sortorder: "asc",
                multiselect: false,
                caption:"Gamme d'\operations"
            }).navGrid('#pager10_d',{add:true,edit:false,del:false});
 
            $("#ms1").click( function() {
                var s;
                s = $("#list10_d").getMultiRow();
                alert(s);
            })
        });
    </script>

**bdjamila** · 14/04/2009, 11h24

Salut danielhagnoul !

Merci pour votre aide. Je vais tester votre proposition et je vous ferai signe.

**bdjamila** · 14/04/2009, 11h37

Désolée danielhagnoul
J'ai corrigé mon erreur mais toujours pas de resultat.
Merci encore une fois danielhagnoul.

**bdjamila** · 14/04/2009, 16h01

Bonsoir
j'ai mis le onSelectRow(...) {} dans l'appel à jqGrid, puis j'ai déclaré la variable ids comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
37
38
39
jQuery(document).ready(function(){
jQuery("#list10").jqGrid({ 
	url:'master.php?q=2&ids='+ids, 
	datatype: "xml", 
	colNames:[ 'composant', 'libelle', 'version', 'quantite','debut','fin'], 	
	colModel:[ 

		{name:'composant',index:'composant',  width:90},
		{name:'libelle',index:'libelle', width:200}, 		
		{name:'version',index:'version', width:80, align:"right"}, 
		{name:'quantite',index:'quantite', width:80, align:"right"}, 
		{name:'debut',index:'debut', width:80,align:"right"}, 
		{name:'fin',index:'fin', width:80, sortable:false} ], 
		rowNum:7, 
		rowList:[10,20,30], 
		imgpath: gridimgpath, 
		pager: jQuery('#pager10'), 
		sortname: 'composant', 
		viewrecords: true, 
		sortorder: "asc", 
		multiselect: false, 
		datatype: "xml", 
		caption: "Nomenclature", 
		onSelectRow: (function(ids) { 
			var ids=['composant'];
			if(ids == null) { ids=' '; 
			if(jQuery("#list10_d").getGridParam('records') >0 ) { 
				jQuery("#list10_d").setGridParam({
				url:"detail.php?q=1&id="+ids,page:1}) 
				.setCaption("Gamme d'\operations: "+ids) .trigger('reloadGrid'); 
				} 
			} else { 
				jQuery("#list10_d").setGridParam({
				url:"detail.php?q=1&id="+ids,page:1}) 
				.setCaption("Gamme d'\operations: "+ids) 
				.trigger('reloadGrid'); 
				} 
		}) 
		}).navGrid('#pager11',{add:false,edit:false,del:false});

maintenant le onselectrow fonctionne mais je n'arrive pas à récupérer les données de la ligne selectionnée.
j'ai le message d'erreur
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in D :\site\detail.php on line 25 CouldnÂ't execute query.Unknown column 'composant' in 'where clause'

donc comment récupérer la valeur de 'composant'?
je compte beaucoup sur votre collaboration et votre aide, merci.

**bdjamila** · 19/04/2009, 10h19

Bonjour !
J'ai résolu mon problème. Il suffit de déclaré 'composant' en tant que clé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{name:'composant',index:'composant',key:true, width:90} 
 
appel de la fonction onselectrow:
 
onSelectRow: (function(ids) {
if(ids == null) { ids=' ';
if(jQuery("#list10_d").getGridParam('records') >0 ) {
jQuery("#list10_d").setGridParam({
url:"detail.php?q=1&id="+ids,page:1})
.setCaption("Gamme d'\operations: "+ids) .trigger('reloadGrid');
}
} else {
jQuery("#list10_d").setGridParam({
url:"detail.php?q=1&id="+ids,page:1})
.setCaption("Gamme d'\operations: "+ids)
.trigger('reloadGrid');
}
})
}).navGrid('#pager11',{add:false,edit:false,del:false});

jqgrid master-detail

jQuery

Vue hybride

Discussions similaires

Partager

Partager