可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

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>

回答2:

Check this Bootstrap UI Template contains jqGrid plugin

You can use many feature from this template. Looks awesome

回答3:

Additional info on the topic of jqGrid + Bootstrap:

It looks like there is a table border-collapse override issue with jqGrid (4.6.0) and Bootstrap (3).

jqGrid wants: border-collapse: separate; (CSS default)

Bootsrap wants: 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.

回答4:

Here is what works for us:

1- Get the css from: https://github.com/Soliman/jqGrid.bootstrap

This does not change any jqgrid specifications at only some css changes.

The demo is at 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:

//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

//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