Alterner les styles d'une grille

**Madusa** · 06/08/2013, 17h37

Savez vous comment modifier la couleur d'un "row" sur 2 pour un grid de Kendo ui?

http://docs.kendoui.com/getting-star...arance-styling
(je ne sais pas si je suis dans la bonne section mais je trouvedes fonction JS à crée ...)

Invité · 06/08/2013, 17h47

Que ce soit PHP ou JavaScript, il existe l'opérateur modulo, ou % :

x % y
Retourne le reste de la division entière de l'opérande de gauche par celle de droite

L'intérêt ici :

Code :

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

1
2
x % 2 = 0 (si x est pair)
x % 2 = 1 (si x est impair)

Un simple compteur + test du modulo (0 ou 1 ?) te permettra de changer le style des lignes paires/impaires.

**SpaceFrog** · 07/08/2013, 09h12

sinon ça se fait plutot en css ...

Code css :

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

1
2
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Code css :

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

1
2
tr:nth-child(2n) {background: #CCC}
tr:nth-child(2n+1) {background: #FFF}

**Madusa** · 07/08/2013, 10h26

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
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
 
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
	<link href="styles/kendo.default.min.css" rel="stylesheet" />
 
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
 
<body>
<?php include("menu.php"); ?>
 
<?php include("connexionbdd.php"); // query for the definition, type of this problem
?>
<?php 
 
$sql_pb="SELECT * from problem where id_Pb=1";
$res_pb=mysql_query($sql_pb);
$rows_pb=mysql_fetch_assoc($res_pb);
 
 
?></br></br></br></br>Definition:<?php echo $rows_pb['def_Pb'];
$var=$rows_pb['id_Pb_Type']
 
 ?> </br></br>
 <script src="people.js"></script>
 
        <div id="example" class="k-content">
            <div id="clientsDb">
 
                <div id="grid" style="height:580px"></div>
 
            </div>
 
            <style scoped>
			<?php //tableau: placement ?>
                #clientsDb {
 
 
                    margin-left:5px;
 
                    padding:0px 40px 0px 0px;
 
                }
            </style>
            <div id="grid"></div>
<div id="grid">
<?php 
$sql_inc="SELECT 
        incident.date_Inc AS date, 
        incident.name_Inc AS name, 
        incident.desc_Inc AS description,
        location.name_Loc  as location
        FROM incident 
        LEFT JOIN location
        ON incident.id_Loc=location.id_Loc
        WHERE id_Pb = 1 
        ORDER BY date_Inc DESC";
            
$res_inc=mysql_query($sql_inc);
$data_row = array();
while($rows_inc=mysql_fetch_assoc($res_inc)){
 
 $data_row[] = $rows_inc;
}$data_set = json_encode($data_row);
?>
 
 
 
<script>
 
 
var dataSource = new kendo.data.DataSource({
  data: <?php echo $data_set; ?>
});
$("#grid").kendoGrid({
  columns: [
    {width:150, field: "date" },
    { width:300,field: "name" },
	{ width:500,field: "description" },
	{ width:200,field: "location" }
  ],
  dataSource: dataSource,
 groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
});
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
</script>
</div>
  </body>
</html>

Le problème est que ce n'est pas une table que j'ai crée avec td,th et tr mais c'est avec du kendoui donc ça ne change rien lorsque je rajoute au css
ceci...
k-content et grid sont les identifiants /classe

Invité · 07/08/2013, 10h28

Ce qu'on veut voir, c'est le code source généré (celui affiché dans le navigateur).

Tu as aussi la doc Kendo UI.

**Madusa** · 07/08/2013, 10h33

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
90
91
 
<!DOCTYPE html>
<html>
 
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
	<link href="styles/kendo.default.min.css" rel="stylesheet" />
 
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
 
<body>
<!DOCTYPE html>
<html>
    <header>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
    </header>
 <html>
 
 
 
 
 
 
 
</html></br></br></br></br>Definition:hbhbhbhbh </br></br>
 <script src="people.js"></script>
 
        <div id="example" class="k-content">
            <div id="clientsDb">
 
                <div id="grid" style="height:580px"></div>
 
            </div>
 
            <style scoped>
			                #clientsDb {
 
 
                    margin-left:5px;
 
                    padding:0px 40px 0px 0px;
 
                }
            </style>
            <div id="grid"></div>
<div id="grid">
 
 
 
<script>
 
 
var dataSource = new kendo.data.DataSource({
  data: [{"date":"2013-08-12","name":"Frauds","description":" the typical ...","location":"egypte"},{"date":"2013-08-04","name":"Probleme de timinf","description":"An essential tool to...","location":"egypte"},{"date":"2013-07-22","name":"Skimming ","description":"oooootjj","location":"egypte"},{"date":"2013-05-11","name":"Skimming incident","description":"kppppp","location":null},{"date":"2012-11-12","name":"Ski ","description":null,"location":null},{"date":"2011-08-11","name":"problem","description":"This applies to Sao Paulo specifically, but can be applied broadly to Brazil.\r\n\r\nI have been traveling to Brazil for over 14 years","location":null}]});
$("#grid").kendoGrid({
  columns: [
    {width:150, field: "date" },
    { width:300,field: "name" },
	{ width:500,field: "description" },
	{ width:200,field: "location" }
  ],
  dataSource: dataSource,
 groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
});
 
 
 
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
</script>
 
 
        </div>
 
 
 
</body>
 
 
 
 
</html>

**SpaceFrog** · 07/08/2013, 10h34

Analyse les code source généré pour visualiser les balises utilisées pour créer le tableau et modifie les sélecteur tr en conséquence ...

Alterner les styles d'une grille

JavaScript

Vue hybride

Discussions similaires

Partager

Partager