jqgrid not picking up style
I have jqgrid on my page and the data is loaded correctly but the style looks really ugly. I am loading these files:
<link href="@Url.Content("~/Content/css/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/ui.multiselect.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/ui/minified/jquery.ui.core.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/ui/minified/jquery.ui.widget.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/ui/minified/jquery.ui.mouse.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/ui/minified/jquery.ui.tabs.min.js")" type="text/javascript"></script>
I've checked in Firebug and they all load correctly so there isn't any path problem for any of the scripts.
This is my actual jqgrid code:
$('#brands').jqGrid({
url: '/GasolineBrands/GasolineBrands/',
datatype: 'json',
mtype: 'POST',
colNames: ['Logo', 'Name', 'No of Stations'],
colModel: [
{ name: 'Logo', index: 'Logo', width: 150, align: 'left' },
{ name: 'Name', index: 'Name', width: 150, align: 'center' },
{开发者_运维百科 name: 'No of Stations', index: 'No of Stations', width: 150, align: 'center' },
],
shrinkToFit: false,
rownumbers: true,
loadonce: false,
pager: jQuery('#brandsPager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Name',
sortorder: "desc",
viewrecords: true,
imgpath: '',
caption: 'Gasoline Brands',
width: '100%',
height: "100%"
});
This is my html:
<table id="brands">
</table>
<div id="brandsPager">
</div>
Can anybody spot the problem?
Thanks in advance :)
The order I use:
<link href="/css/smoothness/jquery-ui-1.8.10.custom.css" type="text/css" rel="stylesheet">
<link href="/css/ui.jqgrid.css" type="text/css" rel="stylesheet">
<link href="/css/jquery.multiselect.css" type="text/css" rel="stylesheet">
<link href="/css/jquery.multiselect.filter.css" type="text/css" rel="stylesheet">
<link href="/css/jquery.countdown.css" type="text/css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/ico" href="favicon.ico">
<style>
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
}
</style>
Then the js files:
<script src="/js/jquery-1.5.2.min.js" language="javascript"></script>
<script src="/js/jquery-ui-1.8.10.custom.min.js" language="javascript"></script>
<script src="/js/jquery-ui-timepicker-addon.js" language="javascript"></script>
<script src="/js/grid.locale-en.js" language="javascript"></script>
<script src="/js/jquery.jqGrid.min.js" language="javascript"></script>
Then to my jqGrid I add the following:
altRows: true,
altclass: "ui-state-default",
Also resize the grid on load to fit the visible area. Respond if you want that code too.
I should probably mention I theme my entire site with jquery-ui with the following:
<body class="ui-state-default">
Works for every theme I've tried and is pretty. Hope it helps.
I found that I had to include <link href="@Url.Content("~/Content/themes/dark-hive/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />. I did that and everything worked smoothly.
加载中,请稍侯......
精彩评论