gpt4 book ai didi

css - Twitter Bootstrap 的 JQgrid 样式问题

转载 作者:技术小花猫 更新时间:2023-10-29 11:15:01 24 4
gpt4 key购买 nike

我正在使用 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>

最佳答案

您不仅应该始终发布您所做的描述,还应该发布显示如何您尝试执行此操作的代码(HTML、JavaScript 等)。

如果您想在主要使用 Twitter Bootstrap 的页面上放置 jqGrid,我建议您使用特殊的 jQuery UI:jQuery UI Bootstrap .

如果您更喜欢使用其他一些 jQuery UI CSS,您可以从官方网站下载您需要的 CSS jQuery UI download page ,但在“CSS Scope:”字段中设置一些类名:

enter image description here

如果您在“CSS 范围:”字段中输入例如“.myjqueryUI”,那么您需要放置 <table>您将在 <div> 中用于 jqGrid |具有“myjqueryUI”类:

<div class="myjqueryUI">
<table id="grid"></table>
</div>

关于css - Twitter Bootstrap 的 JQgrid 样式问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16050911/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com