Question

我有以下代码，在本地工作正常。我试图将引导主题更改为jqgrid proof of concept fiddle之一。我在网上看到主题变化，它似乎没有用。

以下是我的代码和themes：

<!DOCTYPE html>
<html lang="en">
<head>
 <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../js/i18n/grid.locale-en.js"></script>
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../js/jquery.jqGrid.min.js"></script>
    <!-- A link to a Boostrap  and jqGrid Bootstrap CSS siles-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid-bootstrap.css" />
    <script>
        $.jgrid.defaults.width = 780;
        $.jgrid.defaults.responsive = true;     
        $.jgrid.defaults.styleUI = 'Bootstrap';
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
     <meta charset="utf-8" />
    <title>jLp data </title>
</head>
<body>
<div style="margin-left:20px">
    <table id="nplGrid"></table>
</div>
    <script type="text/javascript"> 

        $(document).ready(function () {
            $("#nplGrid").jqGrid({
                url: 'json/data-bcp.json',
                datatype: "json",
                colModel: [
                    { label: 'Id', name: 'Id', width: 45 },
                    { label: 'Symbol', name: 'Symbol', width: 90 },
                    { label: 'Quantity', name: 'Quantity', width: 100 },
                    /*{ label: 'Value1', 
                        name: 'Value1', 
                        width: 80, 
                        sorttype: 'number', 
                        formatter: 'number',
                        align: 'right'
                    }, */
                    { label: 'Price', name: 'Price', width: 80, sorttype: 'integer' },
                    { label: 'Value', name: 'Value', width: 80, sorttype: 'integer' },
                    { label: 'Pledged', name: 'Pledged', width: 80, sorttype: 'integer' }  
                ],
                loadonce: true,
                viewrecords: true,
                footerrow: true,
                 caption: "<b>Brokerage Client Portfolio</b>",
                hidegrid:false,
                userDataOnFooter: true, // use the userData parameter of the JSON response to display data on footer                
                height: 170,
                altRows: true,  
                rowNum: 150
            });

        });

    </script>


</body>
</html>

更改jqgrid主题不起作用

0 个答案: