Исходный код вики Работа с таблицами
Последние авторы
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{box cssClass="floatinginfobox" title="**Содержание:**"}} | ||
| 2 | {{toc start="2"/}} | ||
| 3 | {{/box}} | ||
| 4 | |||
| 5 | |||
| 6 | Наша замечательная XWiki позволяет создавать и редактировать таблицы, а также импортировать готовые. Можно настраивать отображение как таблиц целиком, так и отдельных ячеек, разбивать и объединять ячейки, отмечать заголовки, включать сортировку и фильтрацию данных, производить вычисления. | ||
| 7 | |||
| 8 | |||
| 9 | == Создание и редактирование таблиц == | ||
| 10 | |||
| 11 | Для создания используйте кнопку [[image:2021-09-24_142336.png]](% style="color:#16a085" %)[Таблица](%%), которая вызывает окно мастера таблиц. | ||
| 12 | |||
| 13 | |||
| 14 | [[~[~[image:2021-09-24_141353-2.png~]~]>>attach:2021-09-24_141353-2.png||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]] | ||
| 15 | |||
| 16 | |||
| 17 | На вкладке **«Свойства таблицы»** мы задаем число строк и столбцов, выбираем расположение заголовков. Также здесь можно задавать размеры таблицы, толщину границ и отступы. В блоке «Выравнивание» настраивается обтекание текстом. На вкладке **«Дополнительно»** можно задать CSS-стиль оформления, а также присвоить таблице уникальный идентификатор, который используется для автоматической нумерации. | ||
| 18 | |||
| 19 | Чтобы отредактировать эти свойства, можно в любой момент вернуться к мастеру, используя пункт **«Свойства таблицы»** контекстного меню таблицы в режиме редактирования. | ||
| 20 | |||
| 21 | |||
| 22 | == Настройка таблиц == | ||
| 23 | |||
| 24 | Для настройки и редактирования свойств таблицы используйте ее контекстное меню. Оно позволяет добавлять строки и колонки, разбивать и объединять ячейки. Каждой ячейке мы можем задавать индивидуальные свойства – высоту и ширину, цвет фона и границ, выравнивание и переносы текста, а также присваивать свойства заголовка. | ||
| 25 | |||
| 26 | |||
| 27 | [[~[~[image:2021-09-24 15_04_40-2021-09-24 14_51_43.png~]~]>>attach:2021-09-24 15_04_40-2021-09-24 14_51_43.png||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]] | ||
| 28 | |||
| 29 | |||
| 30 | Кроме мастера создания и редактирования таблиц, мы можем использовать язык разметки (доступ с помощью кнопки [[image:2021-09-24_100802.png]] (% style="color:#16a085" %)[Источник](%%) панели инструментов редактора). Приведенная на рисунке выше таблица в разметке будет выглядеть следующим образом: | ||
| 31 | |||
| 32 | (% bis_skin_checked="1" class="box" %) | ||
| 33 | ((( | ||
| 34 | ##~(% style="width:60%" %) | ||
| 35 | ~|=Заголовок колонки 1|=Заголовок колонки 2|=Заголовок колонки 3|=Заголовок колонки 4 | ||
| 36 | ~|ячейка 1-1|ячейка 1-2|ячейка 1-3|ячейка 1-4 | ||
| 37 | ~|~(% colspan="2" rowspan="1" %)ячейка 2-1 + ячейка 2-2|ячейка 2-3|ячейка 2-4 | ||
| 38 | ~|ячейка 3-1|ячейка 3-2|ячейка 3-3|ячейка 3-4 | ||
| 39 | ~|ячейка 4-1|ячейка 4-2|ячейка 3-3|ячейка 4-4## | ||
| 40 | ))) | ||
| 41 | |||
| 42 | Результат рендеринга разметки: | ||
| 43 | |||
| 44 | (% style="width:60%" %) | ||
| 45 | |=Заголовок колонки 1|=Заголовок колонки 2|=Заголовок колонки 3|=Заголовок колонки 4 | ||
| 46 | |ячейка 1-1|ячейка 1-2|ячейка 1-3|ячейка 1-4 | ||
| 47 | |(% colspan="2" rowspan="1" %)ячейка 2-1 + ячейка 2-2|ячейка 2-3|ячейка 2-4 | ||
| 48 | |ячейка 3-1|ячейка 3-2|ячейка 3-3|ячейка 3-4 | ||
| 49 | |ячейка 4-1|ячейка 4-2|ячейка 3-3|ячейка 4-4 | ||
| 50 | |||
| 51 | == Размещение данных == | ||
| 52 | |||
| 53 | Таблицы можно заполнять вручную с клавиатуры, либо используя буфер обмена. В ячейки мы можем помещать произвольную текстовую информацию, ссылки на контент, изображения, и даже макросы. Кроме того, наша платформа позволяет размещать внутри ячеек вложенные таблицы. | ||
| 54 | |||
| 55 | Проиллюстрируем вышесказанное: | ||
| 56 | |||
| 57 | (% style="width:60%" %) | ||
| 58 | |=(% style="width: 624px;" %)Заголовок колонки 1|=(% style="width: 330px;" %)Заголовок колонки 2 | ||
| 59 | |(% style="width:624px" %)(% bis_skin_checked="1" %) | ||
| 60 | ((( | ||
| 61 | Текст с ##**форматированием**##: | ||
| 62 | |||
| 63 | * пункт; | ||
| 64 | ** подпункт; | ||
| 65 | * пункт. | ||
| 66 | |||
| 67 | (% bis_skin_checked="1" class="box infomessage" %) | ||
| 68 | ((( | ||
| 69 | информационный блок | ||
| 70 | ))) | ||
| 71 | |||
| 72 | (% class="wikigeneratedid" %) | ||
| 73 | и т.п... | ||
| 74 | )))|(% style="text-align:center; vertical-align:middle; width:330px" %)[[ссылка на вики-страницу>>doc:Stati.Funktsii-XWiki.Annotirovanie-dokumentov-v-XWiki.WebHome||target="_blank"]] | ||
| 75 | |(% colspan="1" rowspan="1" style="width:624px" %)(% bis_skin_checked="1" %) | ||
| 76 | ((( | ||
| 77 | видео: | ||
| 78 | |||
| 79 | {{video url="https://www.youtube.com/watch?v=4bNkU3qbrHA&ab_channel=AwesomeOpenSource"/}} | ||
| 80 | |||
| 81 | |||
| 82 | )))|(% style="width:330px" %)(% bis_skin_checked="1" %) | ||
| 83 | ((( | ||
| 84 | рисунок: | ||
| 85 | |||
| 86 | [[image:XWiki_1.png]] | ||
| 87 | ))) | ||
| 88 | |(% style="width:624px" %)(% bis_skin_checked="1" %) | ||
| 89 | ((( | ||
| 90 | Вложенная таблица: | ||
| 91 | |||
| 92 | |=Заголовок колонки 1|=Заголовок колонки 2|=Заголовок колонки 3|=Заголовок колонки 4 | ||
| 93 | |ячейка 1-1|ячейка 1-2|ячейка 1-3|ячейка 1-4 | ||
| 94 | |(% colspan="2" rowspan="1" %)ячейка 2-1 + ячейка 2-2|ячейка 2-3|ячейка 2-4 | ||
| 95 | |ячейка 3-1|ячейка 3-2|ячейка 3-3|ячейка 3-4 | ||
| 96 | |ячейка 4-1|ячейка 4-2|ячейка 3-3|(% bis_skin_checked="1" %)(% bis_skin_checked="1" %) | ||
| 97 | ((( | ||
| 98 | |=(% style="text-align: left; vertical-align: top;" %)еще|=(% style="text-align: left; vertical-align: top;" %)одна|=(% style="text-align: left; vertical-align: top;" %)вложен-ная | ||
| 99 | | | | | ||
| 100 | | | | | ||
| 101 | | | | | ||
| 102 | ))) | ||
| 103 | )))|(% style="width:330px" %)(% bis_skin_checked="1" %) | ||
| 104 | ((( | ||
| 105 | картинка по url: | ||
| 106 | |||
| 107 | [[image:https://w-dog.ru/wallpapers/10/12/429061979999934/priroda-derevo-vetki-listya-solnechnyj-svet-luchi-krasota.jpg]] | ||
| 108 | ))) | ||
| 109 | |(% style="width:624px" %)(% bis_skin_checked="1" %) | ||
| 110 | ((( | ||
| 111 | макрос **«Status»**: | ||
| 112 | |||
| 113 | {{cl-plate-status status="true"/}} | ||
| 114 | )))|(% style="width:330px" %)(% bis_skin_checked="1" %) | ||
| 115 | ((( | ||
| 116 | макрос «HTML» с кодом чекбокса: | ||
| 117 | |||
| 118 | {{html clean="false"}} | ||
| 119 | <label><input type="checkbox" checked> DONE</label> | ||
| 120 | {{/html}} | ||
| 121 | ))) | ||
| 122 | |||
| 123 | == Импорт готовых таблиц == | ||
| 124 | |||
| 125 | Импортировать готовые таблицы можно двумя способами: | ||
| 126 | |||
| 127 | 1) используя буфер обмена – копируя таблицу в исходном документе и вставляя ее в вики-статью в режиме редактирования; | ||
| 128 | 2) с помощью отдельной процедуры импорта – создавая документ по специальному шаблону «Страница из Office» и загружая в него файл с исходной таблицей, процедура импорта описана в статье [["Импорт документов из файлов Office">>doc:Stati.Funktsii-XWiki.Import-dokumentov-iz-failov-Office.WebHome]]. | ||
| 129 | |||
| 130 | |||
| 131 | == Сортировка и фильтрация данных == | ||
| 132 | |||
| 133 | Наша платформа позволяет [[включать сортировку и фильтрацию>>attach:2021-09-27_102451-1.png||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]] данных в таблицах, для этого используется макрос **«Sortable Table»**. В нем задаются два параметра: | ||
| 134 | |||
| 135 | 1) "Sortable" ((% style="color:#2980b9" %)yes(%%)/(% style="color:#2980b9" %)no(%%)) – отвечает за сортировку данных по колонкам; | ||
| 136 | 2) "Filtrable" ((% style="color:#2980b9" %)yes(%%)/(% style="color:#2980b9" %)no(%%)) – добавляет к заголовку таблицы поля фильтрации значений. | ||
| 137 | |||
| 138 | (% bis_skin_checked="1" class="box warningmessage" %) | ||
| 139 | ((( | ||
| 140 | **Внимание!** (% style="color:#000000" %)Действие макроса **«Sortable Table»** затрагивает //все //таблицы на странице, т.е. они все становятся сортируемыми и/или фильтруемыми независимо от позиции макроса. | ||
| 141 | ))) | ||
| 142 | |||
| 143 | == Простые вычисления в таблицах == | ||
| 144 | |||
| 145 | Мы можем проводить вычисления в таблицах, для этого в арсенале платформы есть специальные макросы. | ||
| 146 | |||
| 147 | === Макрос «**Calc»** === | ||
| 148 | |||
| 149 | Позволяет производить в строках таблиц простые вычисления по заданным формулам. [[Алгоритм использования таков>>attach:2021-09-27_154947-2.png||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]]: | ||
| 150 | |||
| 151 | 1. Помещаем макрос в целевую ячейку, куда хотим вывести результаты вычислений. | ||
| 152 | 1. В поле "Formula" макроса задаем формулу расчета с указанием ячеек-источников данных. Например, формула (% style="color:#2980b9" %)$A*$B+2*$C(%%) вычисляет произведение значений в первых двух ячейках текущей строки и прибавляет к нему удвоенное значение третьей. Символы A,B и C обозначают позицию ячейки (A – ячейка первой колонки, B – второй и т.д.); вместо заглавных латинских букв можно использовать выражение (% style="color:#2980b9" %)row.get(#)(%%), где в скобках дается номер колонки; в этом случае формула будет выглядеть так: (% style="color:#2980b9" %)$row.get(1)*$row.get(2)+2*$row.get(3)(%%). | ||
| 153 | 1. В поле "Format" задается формат вывода результат вычислений – число знаков после точки (по умолчанию(% style="color:#d35400" %) (% style="color:#2980b9" %)0.00(%%)), также здесь можно задать единицы измерения. | ||
| 154 | |||
| 155 | Код макроса в разметке выглядит следующим образом: | ||
| 156 | |||
| 157 | (% bis_skin_checked="1" class="box" %) | ||
| 158 | ((( | ||
| 159 | ##~{~{calc formula="$A*$B+2*$C" format="0.00"/}}## | ||
| 160 | ))) | ||
| 161 | |||
| 162 | (% class="wikigeneratedid" %) | ||
| 163 | Рассмотрим пример таблицы с вычисляемыми строками в разметке. | ||
| 164 | |||
| 165 | (% bis_skin_checked="1" class="box" %) | ||
| 166 | ((( | ||
| 167 | ##~(% style="width:60%" %) | ||
| 168 | ~|=Заголовок колонки A|=Заголовок колонки B|=Заголовок колонки C|=Заголовок колонки D | ||
| 169 | ~|2|3|1|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}} | ||
| 170 | ~|4|2|2|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}} | ||
| 171 | ~|3|4|3|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}## | ||
| 172 | ))) | ||
| 173 | |||
| 174 | (% class="wikigeneratedid" %) | ||
| 175 | Результат рендеринга представлен ниже: | ||
| 176 | |||
| 177 | (% style="width:60%" %) | ||
| 178 | |=Заголовок колонки A|=Заголовок колонки B|=Заголовок колонки C|=Заголовок колонки D | ||
| 179 | |2|3|1|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}} | ||
| 180 | |4|2|2|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}} | ||
| 181 | |3|4|3|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}} | ||
| 182 | |||
| 183 | (% class="wikigeneratedid" %) | ||
| 184 | Ячейки колонки D являются вычисляемыми. | ||
| 185 | |||
| 186 | === Макрос «**Sum»** === | ||
| 187 | |||
| 188 | Позволяет суммировать данные по столбцам. Макрос помещается в целевую ячейку, куда нужно вывести сумму значений вышестоящих// //ячеек в колонке (нижестоящие ячейки не учитываются). | ||
| 189 | |||
| 190 | Код макроса в разметке выглядит следующим образом: | ||
| 191 | |||
| 192 | (% bis_skin_checked="1" class="box" %) | ||
| 193 | ((( | ||
| 194 | ##~{~{sum type="col" format="0.00"/}}## | ||
| 195 | ))) | ||
| 196 | |||
| 197 | Добавим к таблице из предыдущего примера строку итогов, где будут суммироваться данные по колонкам. Для выделения итоговой строки, с помощью символа {{code}}={{/code}} присвоим ее ячейкам признак заголовка. Код таблицы в разметке будет выглядеть так: | ||
| 198 | |||
| 199 | (% bis_skin_checked="1" class="box" %) | ||
| 200 | ((( | ||
| 201 | ##~(% style="width:60%" %) | ||
| 202 | ~|=Заголовок колонки A|=Заголовок колонки B|=Заголовок колонки C|=Заголовок колонки D | ||
| 203 | ~|2|3|1|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}} | ||
| 204 | ~|4|2|2|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}} | ||
| 205 | ~|3|4|3|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}} | ||
| 206 | ~|=~{~{sum type="col" format="0.00 (руб)"/}}|=~{~{sum type="col" format="0.00 (руб)"/}}|=~{~{sum type="col" format="0.00 (руб)"/}}|=~{~{sum type="col" format="0.00 (руб)"/}}## | ||
| 207 | ))) | ||
| 208 | |||
| 209 | Результат рендеринга кода разметки: | ||
| 210 | |||
| 211 | (% style="width:60%" %) | ||
| 212 | |=Заголовок колонки A|=Заголовок колонки B|=Заголовок колонки C|=Заголовок колонки D | ||
| 213 | |2|3|1|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}} | ||
| 214 | |4|2|2|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}} | ||
| 215 | |3|4|3|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}} | ||
| 216 | |={{sum type="col" format="0.00 (руб)"/}}|={{sum type="col" format="0.00 (руб)"/}}|={{sum type="col" format="0.00 (руб)"/}}|={{sum type="col" format="0.00 (руб)"/}} | ||
| 217 | |||
| 218 | Как видим, внизу добавилась строка, в ячейки которой выводятся итоговые суммы значений по колонкам. | ||
| 219 | |||
| 220 | === Макрос «**Summary»** === | ||
| 221 | |||
| 222 | Данный макрос позволяет нам проводить агрегацию данных и создавать сводные таблицы из нескольких таблиц-источников, находящихся на одной странице. Совместим с макросами **«Sum»** и **«Calc»** и учитывает результаты их вычислений. | ||
| 223 | |||
| 224 | Макрос **«Summary» **имеет следующие настройки ([[см. рисунок>>attach:2021-10-04 15_55_17-2021-10-04_153233.png||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]]): | ||
| 225 | |||
| 226 | (% style="color:#c0392b" %)**1)**(%%) поле «Type» отвечает за тип сводной таблицы – по заголовкам ((% style="color:#2980b9" %)heading(%%)) или по колонкам ((% style="color:#2980b9" %)column(%%)), подробности чуть ниже; | ||
| 227 | (% style="color:#c0392b" %)**2)**(%%) в поле «Title» задается имя сводной таблицы; | ||
| 228 | (% style="color:#c0392b" %)**3)**(%%) в поле «Summary Title» вносится название итоговой строки сводной таблицы; | ||
| 229 | (% style="color:#c0392b" %)**4)**(%%) поле «Format 1» отвечает за формат вывода данных первой колонки сводной таблицы (здесь же можно задать единицы измерения); | ||
| 230 | (% style="color:#c0392b" %)**5)**(%%) поле «Format 2» отвечает за формат вывода данных второй колонки сводной таблицы (здесь также можно задать единицы измерения). | ||
| 231 | |||
| 232 | Если полю «Type» присвоено значение "(% style="color:#2980b9" %)heading(%%)", то элементы группируются по заголовкам разделов, в которых находятся таблицы-источники. Если полю «Type» присвоено значение "(% style="color:#2980b9" %)column(%%)", то элементы группируются по значению первого столбца таблицы-источника. | ||
| 233 | |||
| 234 | К примеру, на странице имеется [[две таблицы с однотипными данными>>attach:2021-10-04_153531.png||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]], которые будут служить источниками для сводных таблиц. Используя макрос **«Summary»**, мы легко можем агрегировать данные из них; при этом мы можем получить сводные таблицы двух типов: | ||
| 235 | |||
| 236 | [[~[~[image:2021-10-04_162823-2.png~]~]>>attach:2021-10-04_162823-2.png||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]] | ||
| 237 | |||
| 238 | Код макроса этих двух сводных таблиц в режиме разметки будет выглядеть так: | ||
| 239 | |||
| 240 | (% bis_skin_checked="1" class="box" %) | ||
| 241 | ((( | ||
| 242 | ##=== Сводные таблицы ===## | ||
| 243 | |||
| 244 | ##~{~{summary type="heading" title="Сводка по разделам (фичам)" summarytitle="ИТОГО" format1="0.00 (часы)" format2="0.00 (уе)"/}}## | ||
| 245 | |||
| 246 | ##~{~{summary type="column" title="Сводка по колонкам (участникам)" summarytitle="ИТОГО" format1="0.00 (часы)" format2="0.00 (уе)"/}}## | ||
| 247 | ))) | ||
| 248 | |||
| 249 | (% class="wikigeneratedid" id="HLiveTables" %) | ||
| 250 | Макрос **«Summary» **работает в пределах одной страницы. Если есть необходимость проводить агрегацию данных из разных вики-разделов и статей, используется более мощный инструмент – специальное расширение «**Live Table»**. |