Menu
I'm using JQgrid to show information and to perform CRUD operations. I want a page that have the look and feel of Twitter Bootstrap and the JQGrid showing some data, however if I import the CSS for JQGrid and the CSS for Bootstrap, the grid is not visible at all. What I basically want is to have the JQGrid styles completely separated from the rest of the page styles.
Is this possible?
Below is the code of the page that I'm trying to use Twitter Bootstrap alongside with 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>
235
You should post always not only the description what you do, but the code (HTML, JavaScript etc) which shows how you try to do this.
If you want place jqGrid on the page which use mostly Twitter Bootstrap I would recommend you to use special jQuery UI: jQuery UI Bootstrap.
If you do prefer to use some other jQuery UI CSS you can download the CSS which you need from the official jQuery UI download page, but set some class name inside of "CSS Scope:" field:
If you enter for example ".myjqueryUI" in the "CSS Scope:" field then you need place the <table> which you will use for jqGrid inside of <div> having "myjqueryUI" class:
<div class="myjqueryUI">
<table id="grid"></table>
</div>
Check this Bootstrap UI Template contains jqGrid plugin
You can use many feature from this template. Looks awesome
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
