未在jqGrid中應用的默認樣式

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

我該如何解決這個問題？

由於的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>

來源

2013-07-02 Vivek Ragunathan

我想，上述問題的原因可以缺少<!DOCTYPE html ...>線<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>。

而且我建議你包括的<head>開始（如例如，從the documentation中）線

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

。如果您從互聯網加載其他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。

你不寫你使用哪個版本的jqGrid。你應該使用最新版本（目前是4.5.2），包括jquery.jqGrid.min.js或jquery.jqGrid.src.js而不是jquery.jqGrid.js。

我建議您在所有網格中使用gridview: true和autoencode: true選項。 height: "auto"的使用看起來也不錯。我認爲選項sortname: 'created'是副本&錯誤。您應該使用網格中某個現有列的名稱。

來源

2013-07-03 08:25:07 Oleg

未在jqGrid中應用的默認樣式

回答

相關問題