CSS Twitter Bootstrap 的 JQgrid 样式问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16050911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQgrid style issue with Twitter Bootstrap
提问by Vito
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.
我正在使用 JQgrid 来显示信息并执行 CRUD 操作。我想要一个具有 Twitter Bootstrap 和 JQGrid 外观和感觉的页面，显示一些数据，但是如果我导入 JQGrid 的 CSS 和 Bootstrap 的 CSS，网格根本不可见。我基本上想要的是将 JQGrid 样式与页面样式的其余部分完全分开。
Is this possible?
这可能吗？
Below is the code of the page that I'm trying to use Twitter Bootstrap alongside with 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>
采纳答案by Oleg
You should post always not only the description what you do, but the code (HTML, JavaScript etc) which shows howyou try to do this.
你不仅应该发布你所做的描述，还应该发布展示你如何尝试这样做的代码（HTML、JavaScript 等）。
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.
如果您想将 jqGrid 放在主要使用 Twitter Bootstrap 的页面上，我建议您使用特殊的 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:
如果你更喜欢使用其他一些 jQuery UI CSS，你可以从官方jQuery UI 下载页面下载你需要的 CSS ，但在“CSS Scope:”字段中设置一些类名：
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:
例如，如果您在“CSS Scope：”字段中输入“.myjqueryUI”，则需要<table>将用于 jqGrid 的内容放在<div>“myjqueryUI”类中：
<div class="myjqueryUI">
<table id="grid"></table>
</div>
回答by Murali Murugesan
Check this Bootstrap UI Templatecontains jqGrid plugin
检查这个Bootstrap UI 模板包含 jqGrid 插件
You can use many feature from this template. Looks awesome
您可以使用此模板中的许多功能。看起来很棒
回答by amertkara
Additional info on the topic of jqGrid + Bootstrap:
有关 jqGrid + Bootstrap 主题的附加信息：
It looks like there is a table border-collapse override issue with jqGrid (4.6.0) and Bootstrap (3).
看起来 jqGrid (4.6.0) 和 Bootstrap (3) 存在表格边框折叠覆盖问题。
jqGrid wants: border-collapse: separate;(CSS default)
jqGrid 想要：border-collapse: separate;（CSS 默认）
Bootsrap wants: border-collapse: collapse;
Bootsrap 想要： border-collapse: collapse;
It was causing an overflow issue to the right of the grid.
它导致了网格右侧的溢出问题。
#grid_container_id table{
border-collapse: separate;
}
solved the problem.
解决了这个问题。
回答by Alireza Fattahi
Here is what works for us:
以下是对我们有用的方法：
1- Get the css from: https://github.com/Soliman/jqGrid.bootstrap
1- 从以下位置获取 css：https: //github.com/Soliman/jqGrid.bootstrap
This does not change any jqgrid specifications at only some css changes.
这不会更改任何 jqgrid 规范，仅在一些 css 更改时发生。
The demo is at http://www.soliman.nl/test/jqgrid.bootstrap/jqGrid.bootstrap.html
该演示位于http://www.soliman.nl/test/jqgrid.bootstrap/jqGrid.bootstrap.html
2- If you want all bootstrap css applies to your table, you must run below after your grid loads:
2- 如果您希望所有 bootstrap 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- To make the jqgrid responsive, put your grid in a div like <div id="grid">: Of cource this div must be part of bootstrap grid system, Then put below js in your file
3-要使 jqgrid 响应，将您的网格放在一个 div 中，例如<div id="grid">：当然这个 div 必须是引导网格系统的一部分，然后将下面的 js 放在您的文件中
//When the window size changes resize the gird
$(window).bind('resize', function() {
$("#gridtable").jqGrid("setGridWidth",$("#grid").width() );
});
4- You can also set grid size when the grid is loaded completely
4- 您还可以在完全加载网格时设置网格大小
回答by Almas
New version of jqGrid 5.0 has native support of Bootstrap. http://www.trirand.com/blog/?p=1484
新版 jqGrid 5.0 原生支持 Bootstrap。http://www.trirand.com/blog/?p=1484
