Блог

Главная - Вопросы по программированию - jqgrid не подбирает стиль

jqgrid не подбирает стиль

#c# #jquery #asp.net #asp.net-mvc #jqgrid

#c# #jquery #asp.net #asp.net-mvc #jqgrid

Вопрос:

На моей странице есть jqgrid, и данные загружаются правильно, но стиль выглядит действительно уродливо. Я загружаю эти файлы:

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

Я проверил Firebug, и все они загружаются правильно, поэтому ни для одного из сценариев нет проблем с путем.

Это мой фактический код jqgrid:

   $('#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%"
        });

Это мой html:

 <table id="brands">
                </table>
                <div id="brandsPager">
                </div>

Кто-нибудь может определить проблему?

Заранее спасибо 🙂

Комментарии:

1. Пожалуйста, публикуйте только чистый HTML-код или лучше публикуйте весь соответствующий код в jsfiddle.net . Очевидно, что это только проблема клиента.

2. Вам нужно будет определить «уродливый». Было бы трудно что-либо заметить, поскольку вы показали нам здесь только «структурные» вещи — у вас есть таблица, div, сетка из 3 столбцов и т. Д.

3. Я обнаружил, что мне пришлось включить <link href=»@Url.Content(«~/Content/themes/dark-hive/jquery-ui-1.8.16.custom.css»)» rel=»stylesheet» type=»text/css» /> . Я сделал это, и все работало гладко.

4. @Jaggu — вы должны опубликовать этот комментарий в качестве ответа и закрыть вопрос, если вам больше не нужна помощь в этом 🙂

Ответ №1:

Порядок, который я использую:

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

Затем файлы js:

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

Затем к моей jqGrid я добавляю следующее:

 altRows: true,
altclass: "ui-state-default",

Также измените размер сетки при загрузке, чтобы она соответствовала видимой области. Ответьте, если вам тоже нужен этот код.

Вероятно, я должен упомянуть, что я оформляю весь свой сайт с помощью jquery-ui следующим образом:

 <body class="ui-state-default">

Работает для каждой темы, которую я пробовал, и довольно хорош. Надеюсь, это поможет.

Ответ №2:

Я обнаружил, что мне пришлось включить <link href="@Url.Content("~/Content/themes/dark-hive/jquery-ui-1.8.16.custom.css")" rel=»stylesheet» type=»text / css» /> . Я сделал это, и все работало гладко.