Работа с таблицами

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

8

9

10

== Создание и редактирование таблиц ==

11

12

Для создания используйте кнопку [[image:2021-09-24_142336.png]](% style="color:#16a085" %)[Таблица](%%), которая вызывает окно мастера таблиц.

13

14

15

[[~[~[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;"]]

16

17

18

На вкладке **«Свойства таблицы»** мы задаем число строк и столбцов, выбираем расположение заголовков. Также здесь можно задавать размеры таблицы, толщину границ и отступы. В блоке «Выравнивание» настраивается обтекание текстом. На вкладке **«Дополнительно»** можно задать CSS-стиль оформления, а также присвоить таблице уникальный идентификатор, который используется для автоматической нумерации (подробности в статье «[[Автонумерация рисунков и таблиц>>doc:База знаний.Работа в XWIKI.Советы и рецепты.Автонумерация рисунков и таблиц.WebHome||target="_blank"]]»).

19

20

Чтобы в отредактировать эти свойства, можно в любой момент вернуться к мастеру, используя пункт **«Свойства таблицы»** контекстного меню таблицы в режиме редактирования.

21

22

23

== Настройка таблиц ==

24

25

Для настройки и редактирования свойств таблицы используйте ее контекстное меню. Оно позволяет добавлять строки и колонки, разбивать и объединять ячейки. Каждой ячейке мы можем задавать индивидуальные свойства – высоту и ширину, цвет фона и границ, выравнивание и переносы текста, а также присваивать свойства заголовка.

26

27

28

[[~[~[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;"]]

29

30

31

Кроме мастера создания и редактирования таблиц, мы можем использовать язык разметки (доступ с помощью кнопки [[image:2021-09-24_100802.png]] (% style="color:#16a085" %)[Источник](%%) панели инструментов редактора). Приведенная на рисунке выше таблица в разметке будет выглядеть следующим образом:

32

33

(% class="box" bis_skin_checked="1" %)

34

(((

35

##~(% style="width:60%" %)

36

~|=Заголовок колонки 1|=Заголовок колонки 2|=Заголовок колонки 3|=Заголовок колонки 4

37

~|ячейка 1-1|ячейка 1-2|ячейка 1-3|ячейка 1-4

38

~|~(% colspan="2" rowspan="1" %)ячейка 2-1 + ячейка 2-2|ячейка 2-3|ячейка 2-4

39

~|ячейка 3-1|ячейка 3-2|ячейка 3-3|ячейка 3-4

40

~|ячейка 4-1|ячейка 4-2|ячейка 3-3|ячейка 4-4##

41

)))

42

43

Результат рендеринга разметки:

44

45

(% style="width:60%" %)

46

|=Заголовок колонки 1|=Заголовок колонки 2|=Заголовок колонки 3|=Заголовок колонки 4

47

|ячейка 1-1|ячейка 1-2|ячейка 1-3|ячейка 1-4

48

|(% colspan="2" rowspan="1" %)ячейка 2-1 + ячейка 2-2|ячейка 2-3|ячейка 2-4

49

|ячейка 3-1|ячейка 3-2|ячейка 3-3|ячейка 3-4

50

|ячейка 4-1|ячейка 4-2|ячейка 3-3|ячейка 4-4

51

52

== Размещение данных ==

53

54

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

55

56

Проиллюстрируем вышесказанное:

57

58

(% style="width:60%" %)

59

|=(% style="width: 624px;" %)Заголовок колонки 1|=(% style="width: 330px;" %)Заголовок колонки 2

60

|(% style="width:624px" %)(% bis_skin_checked="1" %)

61

(((

62

Текст с ##**форматированием**##:

* пункт;

** подпункт;

* пункт.

(% class="box infomessage" bis_skin_checked="1" %)

(((

информационный блок

)))

(% class="wikigeneratedid" %)

74

и т.п...

75

)))|(% style="text-align:center; vertical-align:middle; width:330px" %)[[ссылка на вики-страницу>>doc:Stati.Funktsii-XWiki.Annotirovanie-dokumentov-v-XWiki.WebHome||target="_blank"]]

76

|(% colspan="1" rowspan="1" style="width:624px" %)(% bis_skin_checked="1" %)

(((

видео:

{{video url="https://www.youtube.com/watch?v=4bNkU3qbrHA&ab_channel=AwesomeOpenSource"/}}

81

82

83

)))|(% style="width:330px" %)(% bis_skin_checked="1" %)

(((

рисунок:

[[~[~[image:УПРАВЛЕНИЕ ПРОЕКТАМИ.BPMS.Спринты статус.WebHome@1628772366231-507.png~]~]>>attach:УПРАВЛЕНИЕ ПРОЕКТАМИ.BPMS.Спринты статус.WebHome@1628772366231-507.png||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]]

88

)))

89

|(% style="width:624px" %)(% bis_skin_checked="1" %)

(((

Вложенная таблица:

|=Заголовок колонки 1|=Заголовок колонки 2|=Заголовок колонки 3|=Заголовок колонки 4

94

|ячейка 1-1|ячейка 1-2|ячейка 1-3|ячейка 1-4

95

|(% colspan="2" rowspan="1" %)ячейка 2-1 + ячейка 2-2|ячейка 2-3|ячейка 2-4

96

|ячейка 3-1|ячейка 3-2|ячейка 3-3|ячейка 3-4

97

|ячейка 4-1|ячейка 4-2|ячейка 3-3|(% bis_skin_checked="1" %)(% bis_skin_checked="1" %)

98

(((

99

|=(% style="text-align: left; vertical-align: top;" %)еще|=(% style="text-align: left; vertical-align: top;" %)одна|=(% style="text-align: left; vertical-align: top;" %)вложен-ная

| | |

| | |

| | |

)))

)))|(% style="width:330px" %)(% bis_skin_checked="1" %)

(((

картинка по url:

[[image:https://w-dog.ru/wallpapers/10/12/429061979999934/priroda-derevo-vetki-listya-solnechnyj-svet-luchi-krasota.jpg]]

109

)))

110

|(% style="width:624px" %)(% bis_skin_checked="1" %)

(((

макрос **«Status»**:

)))|(% style="width:330px" %)(% bis_skin_checked="1" %)

116

(((

117

макрос «HTML» с кодом чекбокса:

)))

== Импорт готовых таблиц ==

125

126

Импортировать готовые таблицы можно двумя способами:

127

128

1) используя буфер обмена – копируя таблицу в исходном документе и вставляя ее в вики-статью в режиме редактирования;

129

2) с помощью отдельной процедуры импорта – создавая документ по специальному шаблону «Страница из Office» и загружая в него файл с исходной таблицей, процедура импорта показана в обучающем ролике «[[Импорт офисных документов>>attach:База знаний.Работа в XWIKI.Видеоуроки.WebHome@XWIKI_Импорт офисных документов.mp4||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]]».

130

131

132

== Сортировка и фильтрация данных ==

133

134

Наша платформа позволяет [[включать сортировку и фильтрацию>>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»**. В нем задаются два параметра:

135

136

1) "Sortable" ((% style="color:#2980b9" %)yes(%%)/(% style="color:#2980b9" %)no(%%)) – отвечает за сортировку данных по колонкам;

137

2) "Filtrable" ((% style="color:#2980b9" %)yes(%%)/(% style="color:#2980b9" %)no(%%)) – добавляет к заголовку таблицы поля фильтрации значений.

138

139

(% class="box warningmessage" bis_skin_checked="1" %)

140

(((

141

**Внимание!** (% style="color:#000000" %)Действие макроса **«Sortable Table»** затрагивает //все //таблицы на странице, т.е. они все становятся сортируемыми и/или фильтруемыми независимо от позиции макроса.

142

)))

143

144

== Простые вычисления в таблицах ==

145

146

Мы можем проводить вычисления в таблицах, для этого в арсенале платформы есть специальные макросы.

147

148

=== Макрос «**Calc»** ===

149

150

Позволяет производить в строках таблиц простые вычисления по заданным формулам. [[Алгоритм использования таков>>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;"]]:

151

152

1. Помещаем макрос в целевую ячейку, куда хотим вывести результаты вычислений.

153

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)(%%).

154

1. В поле "Format" задается формат вывода результат вычислений – число знаков после точки (по умолчанию(% style="color:#d35400" %) (% style="color:#2980b9" %)0.00(%%)), также здесь можно задать единицы измерения.

155

156

Код макроса в разметке выглядит следующим образом:

157

158

(% class="box" bis_skin_checked="1" %)

159

(((

160

##~{~{calc formula="$A*$B+2*$C" format="0.00"/}}##

161

)))

162

163

(% class="wikigeneratedid" %)

164

Рассмотрим пример таблицы с вычисляемыми строками в разметке.

165

166

(% class="box" bis_skin_checked="1" %)

167

(((

168

##~(% style="width:60%" %)

169

~|=Заголовок колонки A|=Заголовок колонки B|=Заголовок колонки C|=Заголовок колонки D

170

~|2|3|1|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}

171

~|4|2|2|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}

172

~|3|4|3|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}##

173

)))

174

175

(% class="wikigeneratedid" %)

176

Результат рендеринга представлен ниже:

177

178

(% style="width:60%" %)

179

|=Заголовок колонки A|=Заголовок колонки B|=Заголовок колонки C|=Заголовок колонки D

180

|2|3|1|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}

181

|4|2|2|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}

182

|3|4|3|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}

183

184

(% class="wikigeneratedid" %)

185

Ячейки колонки D являются вычисляемыми.

186

187

=== Макрос «**Sum»** ===

188

189

Позволяет суммировать данные по столбцам. Макрос помещается в целевую ячейку, куда нужно вывести сумму значений вышестоящих// //ячеек в колонке (нижестоящие ячейки не учитываются).

190

191

Код макроса в разметке выглядит следующим образом:

192

193

(% class="box" bis_skin_checked="1" %)

194

(((

195

##~{~{sum type="col" format="0.00"/}}##

196

)))

197

198

Добавим к таблице из предыдущего примера строку итогов, где будут суммироваться данные по колонкам. Для выделения итоговой строки, с помощью символа {{code}}={{/code}} присвоим ее ячейкам признак заголовка. Код таблицы в разметке будет выглядеть так:

199

200

(% class="box" bis_skin_checked="1" %)

201

(((

202

##~(% style="width:60%" %)

203

~|=Заголовок колонки A|=Заголовок колонки B|=Заголовок колонки C|=Заголовок колонки D

204

~|2|3|1|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}

205

~|4|2|2|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}

206

~|3|4|3|~{~{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}

207

~|=~{~{sum type="col" format="0.00 (руб)"/}}|=~{~{sum type="col" format="0.00 (руб)"/}}|=~{~{sum type="col" format="0.00 (руб)"/}}|=~{~{sum type="col" format="0.00 (руб)"/}}##

208

)))

209

210

Результат рендеринга кода разметки:

211

212

(% style="width:60%" %)

213

|=Заголовок колонки A|=Заголовок колонки B|=Заголовок колонки C|=Заголовок колонки D

214

|2|3|1|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}

215

|4|2|2|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}

216

|3|4|3|{{calc formula="$A*$B+2*$C" format="0.00 (руб)"/}}

217

|={{sum type="col" format="0.00 (руб)"/}}|={{sum type="col" format="0.00 (руб)"/}}|={{sum type="col" format="0.00 (руб)"/}}|={{sum type="col" format="0.00 (руб)"/}}

218

219

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

220

221

=== Макрос «**Summary»** ===

222

223

Данный макрос позволяет нам проводить агрегацию данных и создавать сводные таблицы из нескольких таблиц-источников, находящихся на одной странице. Совместим с макросами **«Sum»** и **«Calc»** и учитывает результаты их вычислений.

224

225

Макрос **«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;"]]):

226

227

(% style="color:#c0392b" %)**1)**(%%) поле «Type» отвечает за тип сводной таблицы – по заголовкам ((% style="color:#2980b9" %)heading(%%)) или по колонкам ((% style="color:#2980b9" %)column(%%)), подробности чуть ниже;

228

(% style="color:#c0392b" %)**2)**(%%) в поле «Title» задается имя сводной таблицы;

229

(% style="color:#c0392b" %)**3)**(%%) в поле «Summary Title» вносится название итоговой строки сводной таблицы;

230

(% style="color:#c0392b" %)**4)**(%%) поле «Format 1» отвечает за формат вывода данных первой колонки сводной таблицы (здесь же можно задать единицы измерения);

231

(% style="color:#c0392b" %)**5)**(%%) поле «Format 2» отвечает за формат вывода данных второй колонки сводной таблицы (здесь также можно задать единицы измерения).

232

233

Если полю «Type» присвоено значение "(% style="color:#2980b9" %)heading(%%)", то элементы группируются по заголовкам разделов, в которых находятся таблицы-источники. Если полю «Type» присвоено значение "(% style="color:#2980b9" %)column(%%)", то элементы группируются по значению первого столбца таблицы-источника.

234

235

К примеру, на странице имеется [[две таблицы с однотипными данными>>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»**, мы легко можем агрегировать данные из них; при этом мы можем получить сводные таблицы двух типов:

236

237

[[~[~[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;"]]

238

239

Код макроса этих двух сводных таблиц в режиме разметки будет выглядеть так:

240

241

(% class="box" bis_skin_checked="1" %)

242

(((

243

##=== Сводные таблицы ===##

244

245

##~{~{summary type="heading" title="Сводка по разделам (фичам)" summarytitle="ИТОГО" format1="0.00 (часы)" format2="0.00 (уе)"/}}##

246

247

##~{~{summary type="column" title="Сводка по колонкам (участникам)" summarytitle="ИТОГО" format1="0.00 (часы)" format2="0.00 (уе)"/}}##

248

)))

249

250

(% class="wikigeneratedid" id="HLiveTables" %)

251

Макрос **«Summary» **работает в пределах одной страницы. Если есть необходимость проводить агрегацию данных из разных вики-разделов и статей, используется более мощный инструмент – специальное расширение «**Live Table»**. Оно обладает богатым функционалом и позволяет автоматизировать обработку данных на нашей платформе. Инструкция по работе с этим расширением будет написана по итогам его полноценного изучения, а пока интересующиеся могут почитать о нем [[Developer Guide>>https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/FrontendResources/LiveTable/||rel="noopener noreferrer" target="_blank"]] и [[описании макроса>>https://extensions.xwiki.org/xwiki/bin/view/Extension/Livetable%20Macro||rel="noopener noreferrer" target="_blank"]].

Исходный код вики Работа с таблицами

Навигация

Закажите бесплатную демонстрацию