6

JQgrid を使用して情報を表示し、CRUD 操作を実行しています。Twitter Bootstrap と JQGrid のルック アンド フィールを備えたページでデータを表示したいのですが、JQGrid の CSS と Bootstrap の CSS をインポートすると、グリッドがまったく表示されません。私が基本的に望んでいるのは、JQGrid スタイルを残りのページ スタイルから完全に分離することです。

これは可能ですか？

以下は、JQGrid と一緒に Twitter Bootstrap を使用しようとしているページのコードです。

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

4

5 に答える 5

6

何をするかの説明だけでなく、これをどのようにしようとしているのかを示すコード (HTML、JavaScript など) を常に投稿する必要があります。

主に Twitter Bootstrap を使用するページに jqGrid を配置する場合は、特別な jQuery UI: jQuery UI Bootstrapを使用することをお勧めします。

他の jQuery UI CSS を使用したい場合は、公式のjQuery UI ダウンロード ページから必要な CSS をダウンロードできますが、「CSS Scope:」フィールド内にクラス名を設定します。

ここに画像の説明を入力

たとえば、「CSS Scope:」フィールドに「.myjqueryUI」と入力すると、jqGrid に使用するを「myjqueryUI」クラス<table>の内部に配置する必要があります。<div>

<div class="myjqueryUI">
    <table id="grid"></table>
</div>
于 2013-04-17T06:08:12.787 に答える
4

jqGrid + Bootstrap のトピックに関する追加情報:

jqGrid (4.6.0) と Bootstrap (3) には、テーブルの境界線の折りたたみのオーバーライドの問題があるようです。

jqGrid の要望: border-collapse: separate;(CSS デフォルト)

Bootsrap は次のことを望んでいます。border-collapse: collapse;

グリッドの右側でオーバーフローの問題が発生していました。

#grid_container_id table{
    border-collapse: separate;
}

問題を解決しました。

于 2014-03-19T15:17:32.070 に答える
1

jqGrid 5.0 の新しいバージョンには、Bootstrap のネイティブ サポートがあります。http://www.trirand.com/blog/?p=1484

于 2015-12-15T15:26:41.990 に答える
1

これが私たちのために働くものです：

1- https://github.com/Soliman/jqGrid.bootstrapから CSS を取得します。

これは、いくつかの css の変更のみで、jqgrid の仕様を変更しません。

デモはhttp://www.soliman.nl/test/jqgrid.bootstrap/jqGrid.bootstrap.htmlにあります。

2- すべてのブートストラップ 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- 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-グリッドが完全にロードされたときにグリッドサイズを設定することもできます

于 2014-11-16T15:41:25.680 に答える