jqGrid中未應用默認樣式

Question

我正在從http://www.trirand.com/blog/jqgrid/jqgrid.html試用jqGrid的示例。 數據附帶了網格，但是未應用默認樣式（字體大小，不同塊/行的高度等）。 默認樣式是指在trirand網站上使用的示例中看到的樣式。

我該如何解決？

感謝Vivek Ragunathan

我使用的代碼：

<html>
<head>
    <title>JQGrid</title>
    <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css' />
    <link rel='stylesheet' type='text/css' href='http://www.trirand.com/blog/jqgrid/themes/ui.jqgrid.css' />

    <script type='text/javascript' src='http://localhost:82/testbed/resources/jquery-1.7.1.min.js'></script>
    <script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js'></script>        
    <script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js'></script>
    <script type='text/javascript' src='http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.js'></script>

    <script type="text/javascript">
        var lastsel2;

        $(function () {
            $("#list1").jqGrid({
                caption: "Trying out jqGrid for Points",
                url: <url>,
                editurl: <edit url>,
                mtype : "get",
                datatype: "json",
                colNames: ['id', 'Name', 'Age', 'Address'],
                colModel: [
                    { name:'id',        index: 'id',        width: 35, align:"left", editable: true, sorttype: 'int', editrules: { edithidden: true }, hidden: true },
                    { name: 'name',     index: 'name',      width: 35, align:"left", editable: true, editoptions: { size: '20', maxlength: '255'} },
                    { name: 'age',      index: 'name',      width: 35, align:"left", editable: true, editoptions: { size: '20', maxlength: '255'} },
                    { name: 'address',  index: 'address',   width: 35, align:"left", editable: true, editoptions: { size: '20', maxlength: '255'} },
                ],
                rowNum: 10,
                autowidth: true,
                height: 150,
                rowList: [10, 20, 30, 50, 80, 100],
                pager: '#pager1',
                toolbar: [true,"top"],
                sortname: 'created',
                viewrecords: true,
                altRows: true
            });

            $("#list1").jqGrid('navGrid', '#pager1', { edit: true, add: true, del: false });
        });
        }
    </script>

</head>

<body>
    <table id="list1"></table>
    <div id="pager1"></div>
</body>

Answer 1

我認為所描述問題的原因可能在<html>之前缺少<!DOCTYPE html ...>行。 為網頁瀏覽器提供清晰的信息非常重要，您可以在頁面上使用哪種版本以及哪種HTML / XHTML語言。 您在頁面上使用<link ... /> 。 因此，您可能試圖用XHTML語言編寫代碼。 在這種情況下，您可以使用類似

<!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" xml:lang="en" lang="en">

代替<html> 。

此外，我建議您將這些行包括在內

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

在<head>的開頭（例如文檔中的示例）。 如果您從互聯網上加載其他JavaScript文件，那么您也可以從http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js或http://code.jquery.com/jquery-1.10.1.min.js加載jQuery http://code.jquery.com/jquery-1.10.1.min.js例如http://code.jquery.com/jquery-1.10.1.min.js 。

您沒有編寫使用哪個版本的jqGrid。 您應該使用最新版本（當前為4.5.2），並包含jquery.jqGrid.min.js或jquery.jqGrid.src.js而不是jquery.jqGrid.js 。

我建議您在所有網格中使用gridview: true和autoencode: true選項。 height: "auto"用法height: "auto"似乎對我也很好。 我認為選項sortname: 'created'是復制粘貼錯誤。 您應該使用網格中某些現有列的名稱。

jqGrid中未應用默認樣式

問題描述

1 個解決方案

解決方案1
1 已采納 2013-07-03 08:25:07

jqGrid中未應用默認樣式

問題描述

1 個解決方案

解決方案1 1 已采納 2013-07-03 08:25:07

解決方案1
1 已采納 2013-07-03 08:25:07