Как изменить тему сетки с помощью jqwidgets

Я использую jqgrid для отображения данных. Я очень к этому знаком Я пробовал How to change the theme of the jqGrid?, но его не работает для меня. Может ли кто-нибудь сказать мне, как изменить тему сетки?Как изменить тему сетки с помощью jqwidgets

источник

2016-01-28 veena hosur

Для сетки jQWidgets вы должны сделать две вещи: включить файл темы CSS, а затем установить свойство темы виджета на имя темы. Пример: Styling and Appearance

источник

2016-01-29 07:00:55 scripto

jqGrid использует jQuery UI CSS для сетки по умолчанию. Таким образом, вы должны включить некоторый CSS jQuery UI. Я бы рекомендовал вам выбрать один из известных CSS и использовать его непосредственно из Интернета. Есть некоторые общие CDNs, который предоставляет серверы в разных точках мира и которые имеют длительный интервал времени для кеширования. В результате CSS будет загружен быстро, а следующая загрузка будет производиться в основном из локального кеша. Как результат, загрузка может быть, как правило, более быстрой, так как загрузка формирует ваш частный веб-сайт.

На странице jQuery UI blog вы можете найти URL-адреса для jQuery CDN, MaxCDN, API Ajax L библиотек (CDN), Microsoft Ajax CDN и других.

Список стандартных тем относительно длинный: черный галстук, блитцер, купертино, темный куст, точка-лув, баклажан, возбуждающий байк, флик, горячие хитрости, человечество, ле-лягушка, монетный двор , пасмурно, перец-дробилка, редмонд, гладкость, юг-стрит, старт, солнечный, шикарный кошелек, треугольник, у-тьма, и-легкость и вейдер. Вы можете выбрать кого-то и использовать его. Например

<link rel="stylesheet" 
     href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">

Таким же образом free jqGrid (это вилка jqGrid, который я разрабатываю) доступен из двух других CD тоже (cdnjs и jsDelivr CDN). См. Статью the wiki.

В результате, типичный код, который использует свободный jqGrid может выглядит как описано here:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Your page title</title> 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/css/ui.jqgrid.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js"></script> 
    <script> 
    //<![CDATA[ 
    $(function() { 
     "use strict"; 
     $("#grid").jqGrid({ 
      colModel: [ 
       { name: "firstName" }, 
       { name: "lastName" } 
      ], 
      data: [ 
       { id: 10, firstName: "Angela", lastName: "Merkel" }, 
       { id: 20, firstName: "Vladimir", lastName: "Putin" }, 
       { id: 30, firstName: "David", lastName: "Cameron" }, 
       { id: 40, firstName: "Barack", lastName: "Obama" }, 
       { id: 50, firstName: "François", lastName: "Hollande" } 
      ] 
     }); 
    }); 
    //]]> 
    </script> 
</head> 
<body> 
<table id="grid"></table> 
</body> 
</html>

Смотрите JSFiddle демо тоже.

Другими словами, вам не нужно создавать настраиваемые темы пользовательского интерфейса jQuery, но вы должны просто использовать один из существующих.

источник

2016-01-28 12:16:47 Oleg

Как изменить тему сетки с помощью jqwidgets

ответ

Смежные вопросы