css – Twitter Bootstrap的JQgrid样式问题

我正在使用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',{name:'segundoApellido',index:'segundoApellido',{name:'nombre',index:'nombre',{name:'cedula',index:'cedula',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,可以从官方jQuery UI download page下载所需的CSS,但在“CSS Scope：”字段中设置一些类名：

如果在“CSS范围：”字段中输入“.myjqueryUI”,则需要放置< table>你将用于< div>里面的jqGrid拥有“myjqueryUI”类：

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

css – Twitter Bootstrap的JQgrid样式问题

解决方法

猜你在找的CSS相关文章