6
Sto usando JQgrid per mostrare informazioni e per eseguire operazioni CRUD. Voglio una pagina che abbia l'aspetto di Twitter Bootstrap e JQGrid che mostra alcuni dati, tuttavia se importo il CSS per JQGrid e il CSS per Bootstrap, la griglia non è affatto visibile. Quello che voglio in pratica è di avere gli stili JQGrid completamente separati dal resto degli stili di pagina.Problema di stile JQgrid con Twitter Bootstrap
È possibile?
Di seguito si riporta il codice della pagina che sto cercando di usare Twitter Bootstrap fianco con jqGrid:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Styles for JQGrid-->
<link rel="stylesheet" type="text/css" media="screen" href="/css/flick/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/css/ui.jqgrid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="/jqgrid/js/i18n/grid.locale-es.js" type="text/javascript"></script>
<script src="/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!--Twitter Bootstrap Styles -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<title>Manejo de alumnos</title>
</head>
<body>
<center>
<div class="myjqueryUI">
<table id="list"></table><!--Grid table-->
<div id="pager"></div> <!--pagination div-->
<a href="http://localhost/ProyectoNetbeans/CodeIgniter_2.1.3/index.php/Alumnos_controller/mostrarInsertar">Insertar alumno</a>
</div>
</center>
<script type="text/javascript">
$(document).ready(function(){
jQuery("#list").jqGrid({
url: 'http://localhost/ProyectoNetbeans/CodeIgniter_2.1.3/index.php/Alumnos_controller/loadData',
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:['Expediente','Primer apellido','Segundo apellido', 'Nombre','Cédula'], //Grid column headings
colModel:[
{name:'expediente',index:'expediente', width:300, editable:true, edittype:'text'},
{name:'primerApellido',index:'primerApellido', width:300, editable:true, edittype:'text'},
{name:'segundoApellido',index:'segundoApellido', width:300, editable:true, edittype:'text'},
{name:'nombre',index:'nombre', width:300, editable:true, edittype:'text'},
{name:'cedula',index:'cedula', width:300, editable:true, edittype:'text'}
],
pager: '#pager',
rowNum:10,
rowList:[15,30],
sortname: 'primerApellido',
reloadAfterSubmit: true,
sortorder: 'asc',
viewrecords: true,
postData: {expediente:"expediente"},
caption: 'Alumnos'
}).navGrid('#pager',{edit:false,add:false,del:false},
{
},
{
},
},
{multipleSearch : false}, // enable the advanced searching
{closeOnEscape:true}
);
});
</script>
Grazie per la risposta Oleg, mi dispiace per il fatto di non pubblicare il codice, l'ho già incluso nel post originale. Ho scaricato JQuery UI Bootstrap e l'ho incluso nel mio progetto, ma non so dove sia quella pagina "scope CSS" che hai aperto. Cerco di impostare una classe per la tabella JQGrid all'interno di un div, ma non funziona. Ho aperto i file CSS del bootstrap dell'interfaccia utente JQuery, ma non sono sicuro di quale utilizzare per il div che contiene la tabella. Sai cosa deve essere usato con JQuery UI Bootstrap? – Vito
@Vito: è possibile scaricare il tema dell'interfaccia utente jQuery standard (collegare Flick Theme, che si utilizza al momento) o utilizzare Bootstrap dell'interfaccia utente JQuery. Campo "Ambito CSS" che puoi trovare nella [pagina di download] (http://jqueryui.com/download/). Solo i temi * standard * (come Flick Theme) disponibili nella pagina possono essere scaricati nel modo. Un'osservazione al tuo codice: dovresti includere ** solo un ** jQuery JavaScript. Il codice corrente include prima jQuery 1.7.1 e poi [jQuery 1.9.1] (http://code.jquery.com/jquery.js) (prima di 'bootstrap.min.js'). – Oleg
Ho scaricato il tema Flick che ho chiamato flick nell'ambito, poi nel mio codice ho creato un div che ha la tabella JQGrid con la classe "flick". Suppongo che mettendo questa classe sul div si ridurrà il css di quell'area per colpire. Ora viene visualizzato jqgrid, ma il navgrid non viene mostrato e la griglia non ha colori. Sembra che funzioni, perché ora viene visualizzata la griglia e c'è anche Twitter Bootstrap, ma la griglia non ha lo stile applicato correttamente. Hai qualche idea di cosa può essere sbagliato qui? – Vito