JQgrid style issue with Twitter Bootstrap

2019-04-08 04:48发布

站内问答 / HTML/CSS
1570 5 6

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>

5条回答
贪生不怕死
2楼-- · 2019-04-08 05:03

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.

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
3楼-- · 2019-04-08 05:04

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:

enter image description here

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>
查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
4楼-- · 2019-04-08 05:10

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

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
5楼-- · 2019-04-08 05:13

Check this Bootstrap UI Template contains jqGrid plugin

You can use many feature from this template. Looks awesome

查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
6楼-- · 2019-04-08 05:22

New version of jqGrid 5.0 has native support of Bootstrap. http://www.trirand.com/blog/?p=1484

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)