我正在使用JQgrid来显示信息并执行CRUD操作。我想要一个具有Twitter Bootstrap和JQGrid外观的页面显示一些数据,但是如果我导入JQGrid的CSS和Bootstrap的CSS,则网格根本不可见。我基本上想要的是让JQGrid样式与其他页面样式完全分开。
这可能吗?
下面是我试图将Twitter Bootstrap与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>
答案 0 :(得分:6)
您不仅应该发布您所做的描述,还应该发布代码(HTML,JavaScript等),这些代码会显示您尝试执行此操作的 。
如果你想在主要使用Twitter Bootstrap的页面上放置jqGrid,我建议你使用特殊的jQuery UI:jQuery UI Bootstrap。
如果您更喜欢使用其他jQuery UI CSS,可以从官方jQuery UI download page下载所需的CSS,但在“CSS Scope:”字段中设置一些类名:
如果您在“CSS Scope:”字段中输入“.myjqueryUI”,那么您需要将<table>
放在<div>
的jqGrid中,并使用“myjqueryUI”类:< / p>
<div class="myjqueryUI">
<table id="grid"></table>
</div>
答案 1 :(得分:4)
选中此Bootstrap UI Template包含jqGrid插件
您可以使用此模板中的许多功能。看起来很棒
答案 2 :(得分:4)
有关jqGrid + Bootstrap主题的其他信息:
看起来jqGrid(4.6.0)和Bootstrap(3)存在表格边框折叠覆盖问题。
jqGrid想要:border-collapse: separate;
(CSS默认)
Bootsrap希望:border-collapse: collapse;
它导致网格右侧出现溢出问题。
#grid_container_id table{
border-collapse: separate;
}
解决了这个问题。
答案 3 :(得分:1)
这对我们有用:
1-从https://github.com/Soliman/jqGrid.bootstrap
获取css仅在某些css更改时,这不会更改任何jqgrid规范。
演示位于http://www.soliman.nl/test/jqgrid.bootstrap/jqGrid.bootstrap.html
2-如果您希望所有引导程序css适用于您的表格,则必须在网格加载后运行以下内容:
//remove the 'ui-state' and 'ui-widget' from jquery-ui.css which prevents your customize ccs to apply on jquery grid
//the gbox_gridtable is the most top element in the grid
function removeJqueryUiClass(){
$('#gbox_gridtable').find('*').andSelf().attr('class',
function(i, css){
if (typeof css !== 'undefined') {
return css.replace(/\ui-state\S+/g, '').replace(/\ui-widget\S+/g, '');
}
});
}
3-为了使jqgrid响应,将你的网格放在像<div id="grid">
这样的div中:对于cource,这个div必须是bootstrap网格系统的一部分,然后将js放在你的文件中
//When the window size changes resize the gird
$(window).bind('resize', function() {
$("#gridtable").jqGrid("setGridWidth",$("#grid").width() );
});
4-您还可以在网格完全加载时设置网格大小
答案 4 :(得分:1)
新版本的jqGrid 5.0本身支持Bootstrap。 http://www.trirand.com/blog/?p=1484