Форум Flasher.ru
Ближайшие курсы в Школе RealTime
Список интенсивных курсов: [см.]  
  
Специальные предложения: [см.]  
  
 
Блоги Правила Справка Пользователи Календарь Поиск рулит! Сообщения за день Все разделы прочитаны
 

Вернуться   Форум Flasher.ru > Блоги > Критическая масса

Критическая масса — в диалектической логике минимальное количество мыслей, необходимых для начала самоизливающейся цепной реакции деления с общественностью.
Рейтинг: 5.00. Голосов: 3.

Генерация текстовых таблиц для моноширинных шрифтов

Запись от iNils размещена 25.01.2011 в 04:20
Обновил(-а) iNils 05.02.2011 в 02:04

Для текущей задачи понадобилось (для отладки) выводить в текстовое поле массив элементов с разным свойствами.
Удобно было все это показывать в виде таблицы. И на скорую руку накидал простой класс, который эту таблицу создает, с возможностью подсветки строк или заголовка для htmlText (если цвет не задавать, то html теги добавляться не будут), автоопределением ширины столбцов и выравниванием данных столбца по левой или правой стороне.

Пример использования
Код AS3:
import ru.inils.utils.textTable.TextTable;
var tt:TextTable = new TextTable (['ID', 'Number', 'Name', 'Year'], 0xFFC0CB);
/// Добавляем выравнивание по правому края для второй колонки.
tt.alignRight = [ , true];
/// Добавляем 4 строки и разделитель.
tt.addRow ([1, 100, 'Tom', 1966]);
tt.addRow ([2, 2, 'Anna', 1985]);
tt.addSeparator ();
tt.addRow ([3, 55, 'Serg', 2001]);
tt.addRow ([4, 4701, 'Nika', 1991]);
/// Результат
trace (tt.table);
получаем такой текст
Код:
<font color="#ffc0cb">+----+--------+------+------+
| ID | Number | Name | Year |
+----+--------+------+------+</font>
| 1  |    100 | Tom  | 1966 |
| 2  |      2 | Anna | 1985 |
+----+--------+------+------+
| 3  |     55 | Serg | 2001 |
| 4  |   4701 | Nika | 1991 |
+----+--------+------+------+
Как это будет выглядеть в текстовом поле
Код:
+----+--------+------+------+
| ID | Number | Name | Year |
+----+--------+------+------+
| 1  |    100 | Tom  | 1966 |
| 2  |      2 | Anna | 1985 |
+----+--------+------+------+
| 3  |     55 | Serg | 2001 |
| 4  |   4701 | Nika | 1991 |
+----+--------+------+------+
Таблицу можно сбросить и забить в нее новые данные (кроме заголовка)
Код AS3:
/// Отчищаем таблицу от данных.
tt.clear ();
/// Заполняем новыми данными
tt.addRow ([5, 46, 'Paul', 1981]);
tt.addRow ([6, 4, 'Victoria', 1975], 0x00BFFF);
tt.addSeparator (0xFFA500);
tt.addRow ([7, , 'Arnold', 1989]);
tt.addRow ([8, 956, false, 1998, 'out']);
/// Результат
trace (tt.table);
результат
Код:
<font color="#ffc0cb">+----+--------+----------+------+
| ID | Number | Name     | Year |
+----+--------+----------+------+</font>
| 5  |     46 | Paul     | 1981 |
<font color="#bfff">| 6  |      4 | Victoria | 1975 |</font>
<font color="#ffa500">+----+--------+----------+------+</font>
| 7  |   null | Arnold   | 1989 |
| 8  |    956 | false    | 1998 >
+----+--------+----------+------+
А в текстовом поле
Код:
+----+--------+----------+------+
| ID | Number | Name     | Year |
+----+--------+----------+------+
| 5  |     46 | Paul     | 1981 |
| 6  |      4 | Victoria | 1975 |
+----+--------+----------+------+
| 7  |   null | Arnold   | 1989 |
| 8  |    956 | false    | 1998 >
+----+--------+----------+------+
Если число элементов в строке больше числа столбцов, то строка заканчивается символом '>', а не '|'. Как в последней строке примера.

Используя tableText можно получить строку без html тегов. Также можно получить массив строк таблицы, также без html тегов, для других манипуляций.

Сам класс
Код AS3:
package ru.inils.utils.textTable {
	/**
	 * @author	iNils
	 * @version	1.0
	 *
	 * Класс строит текстовую таблицу данных.
	 * 
	 * @example <code>
	 * /// Создае новую таблицу
	 * var tt:TextTable = new TextTable (['ID', 'Number', 'Name', 'Year']);
	 * /// Добавляем выравнивание по правому края для второй колонки.
	 * tt.alignRight = [ , true];
	 * /// Добавляем 4 строку и разделитель.
	 * tt.addRow ([1, 100, 'Tom', 1966]);
	 * tt.addRow ([2, 2, 'Anna', 1985]);
	 * tt.addSeparator ();
	 * tt.addRow ([3, 55, 'Serg', 2001]);
	 * tt.addRow ([4, 4701, 'Nika', 1991]);
	 * /// Результат
	 * trace (tt.table);
	 * +----+--------+------+------+
	 * | ID | Number | Name | Year |
	 * +----+--------+------+------+
	 * | 1  |    100 | Tom  | 1966 |
	 * | 2  |      2 | Anna | 1985 |
	 * +----+--------+------+------+
	 * | 3  |     55 | Serg | 2001 |
	 * | 4  |   4701 | Nika | 1991 |
	 * +----+--------+------+------+ 
	 * 
	 * /// Отчищаем таблицу от данных.
	 * tt.clear ();
	 * /// Заполняем новыми данными
	 * tt.addRow ([5, 46, 'Paul', 1981]);
	 * tt.addRow ([6, 4, 'Victoria', 1975]);
	 * tt.addSeparator ();
	 * tt.addRow ([7, , 'Arnold', 1989]);
	 * tt.addRow ([8, 956, 'Lena', 1998, 55]);
	 * /// Результат
	 * trace (tt.table);
	 * +----+--------+----------+------+
	 * | ID | Number | Name     | Year |
	 * +----+--------+----------+------+
	 * | 5  |     46 | Paul     | 1981 |
	 * | 6  |      4 | Victoria | 1975 |
	 * +----+--------+----------+------+
	 * | 7  |   null | Arnold   | 1989 |
	 * | 8  |    956 | Lena     | 1998 >
	 * +----+--------+----------+------+ 
	 * </code>
	 * 
	 * Изменения:
	 * 	1.0 (24.01.2011 22:32)
	 *	[+]	...
	 */
	public class TextTable {
		/*  - VAR PRIVATE        *///{ /
		private var _alignRight:Array = [];
		private var _head:Array = [];
		private var _color/*int*/:Array = [];
		private var _row:Array = [];
		private var _size:Array = [];
		//}
		/*  * CONSTRUCTOR *      *///{ /
		/**
		 * Создает новую текстовую таблицу.
		 * @param	head - Массив названий столбцов таблицы.
		 * @param	color - Цвет заголовка таблицы (для вывода в htmlText поле).
		 */
		public function TextTable (head:Array, color:int = -1) {
			_head = head;
			addRow (_head, color);
		}
		//}
		/*  + METHOD PUBLIC      *///{ /
		/**
		 * Добавляет строку данных в таблицу. Если число элементов в строке больше числа столбцов, то строка заканчивается символом '>', а не '|'.
		 * @param	row - Строка таблицы.
		 * @param	color - Цвет строки таблицы (для вывода в htmlText поле).
		 */
		public function addRow (row:Array, color:int = -1):void {
			_row.push (row);
			_color.push (Math.max (-1, Math.min (color, 0xFFFFFF)));
			checkSize ();
		}
		/**
		 * Добавляет разделитель между строками.
		 * @param	color - Цвет разделителя (для вывода в htmlText поле).
		 */
		public function addSeparator (color:int = -1):void {
			_row.push (null);
			_color.push (Math.max (-1, Math.min (color, 0xFFFFFF)));
			checkSize ();
		}
		/**
		 * Отчищает таблицу от данных, оставляя заголовок таблицы и выравнивание данных.
		 */
		public function clear ():void {
			_row.length = 1;
			_color.length = 1;
			_size.length = 0;
			//addRow (_head, );
			checkSize ();
		}
		//}
		/*  - METHOD PRIVATE     *///{ /
		/**
		 * Строит текстовую таблицу.
		 * @return Текстовую таблицу в виде массива строк.
		 */
		private function buildTable (htmlMode:Boolean = true):Array {
			var array:Array = [];
 
			/// шаблоны строк
			var line:String = '+';
			for (var i:int = 0; i < _head.length; i++) {
				line += fillChars ('', _size[i], true, '-') + '+';
			}
 
			/// заполняем данными
			var row:String = ''
			var j:int;
			for (i = 0; i < _row.length; i++) {
				var isColor:Boolean = _color[i] != -1 && htmlMode;
				var color:String = '<font color="#' + fillChars (_color[i].toString (16), 6, false, '0') + '">';
				/// заголовок
				if (i == 0) {
					if (isColor) {
						row += color;
					}
					row += line + '\r' + '|'
					for (j = 0; j < _head.length; j++) {
						row += ' ' + fillChars (_row[i][j], _size[j] - 2) + ' |';
					}
					row += '\r' + line;
					if (isColor) {
						row += '</font>'
					}
					row += '\r';
					array.push (row);
				} else {
					row = '';
					/// строки
					if (_row[i]) {
						if (isColor) {
							row += color;
						}
						row += '|'
						for (j = 0; j < _head.length; j++) {
							if (j != 0) {
								row += '|';
							}
							row += ' ' + fillChars (_row[i][j], _size[j] - 2, !_alignRight[j]) + ' ';
						}
						if (_head.length < _row[i].length) {
							row += '>';
						} else {
							row += '|';
						}
						if (isColor) {
							row += '</font>'
						}
						array.push (row + '\r');
					} else {
						if (isColor) {
							row += color;
						}
						row += line;
						if (isColor) {
							row += '</font>'
						}
						array.push (row + '\r');
					}
				}
			}
			array.push (line + '\r');
			return array;
		}
		/**
		 * Вычисляет наибольшую ширину столбца.
		 */
		private function checkSize ():void {
			var array:Array = _row[_row.length - 1];
			if (!array) {
				return;
			}
			for (var i:int = 0; i < _head.length; i++) {
				var len:int = String (array[i] || '').length;
				if (len > 0) {
					len += 2;
				}
				_size[i] = Math.max (_size[i] || 0, len);
			}
		}
		/**
		 * Заполняет строку до заданной длины символом слева или справа.
		 * @param	data - Искходная строка.
		 * @param	len - Длина до которой нужно довести строку.
		 * @param	fillRight - Место заполнения символами, справа от строки (true) или слева (false).
		 * @param	char - Символ заполнения.
		 * @return
		 */
		private function fillChars (data:Object, len:int, fillRight:Boolean = true, char:String = ' '):String {
			var str:String = String (data);
			len -= str.length;
			var out:String = '';
			if (fillRight) {
				out += str;
			}
			for (var i:int = 0; i < len; i++) {
				out += char;
			}
			if (!fillRight) {
				out += str;
			}
			return out;
		}
		//}
		/*    GETTER / SETTER    *///{ /
		/// Массив выравнивания данных по правой (true) или левой стороне (false).
		public function get alignRight ():Array {
			return _alignRight;
		}
		public function set alignRight (value:Array):void {
			if (value == _alignRight) {
				return;
			}
			_alignRight = value;
		}
		/// Текстовая таблица в виде строки.
		public function get table ():String {
			return buildTable ().join ('');
		}
		/// Текстовая таблица в виде массива строк без тегов html.
		public function get tableArray ():Array {
			return buildTable (false);
		}
		/// Текстовая таблица в виде строки без тегов html.
		public function get tableText ():String {
			return buildTable (false).join ('');
		}
		//}
	}
}
Вложения
Тип файла: zip TextTable.zip (3.1 Кб, 443 просмотров)
Размещено в AS3
Комментарии 8 Отправить другу ссылку на эту запись
Всего комментариев 8

Комментарии

Старый 25.01.2011 05:50 JackFromChaos вне форума
JackFromChaos
 
Аватар для JackFromChaos
Прикольно.
В порядке бреда можно было бы добавить в класс что-нибудь вроде этого, могло бы быть полезно:
Код AS3:
		public function addArrayObject(arr:Array):void 
		{
			var c:int = _head.length;
			for each(var o:Object in arr)
			{
				var row:Array = new Array();
				for (var i:int = 0; i < c; i++)
					row.push(o[_head[i]]);
				addRow(row);
 
			}
		}
Хотя тут может быть много всяких вариаций...
Старый 25.01.2011 12:07 Psycho Tiger вне форума
Psycho Tiger
 
Аватар для Psycho Tiger
Клёво, утащу себе =)
Обновил(-а) iNils 25.01.2011 в 21:13
Старый 27.01.2011 00:41 dark256 вне форума
dark256
 
Аватар для dark256
Символы псевдографики ( │┤╡╢╖╕╕║╗╝и прочие) - не использованы намеренно?

Давноооо уже зуб точу сделать нечто аналогичное для построения текстовых таблиц на флэше.

В каком-то текстовом редакторе (DOS) QuickEdit что-ли, можно было включить режим рисования и клавиатурными стрелками гонять курсор, за которым оставался след из табличных символов псевдографики, причем пересечения линий изображались соотв символаами.
Старый 27.01.2011 01:37 iNils вне форума
iNils
 
Аватар для iNils
Цитата:
Символы псевдографики ( │┤╡╢╖╕╕║╗╝и прочие) - не использованы намеренно?
Была у меня такая идея. Но я отказался от нее по ряду причин, например не у всех шрифтов она может быть или сложно редактировать таблицу после копи-паста. Можно конечно добавить опцию, которая будет генерить таблицу и в псевдографике. Но все это писалось на скорую руку (сначала таблица в ручную создавалась, но после добавлении пары раз столбцов или изменения ширины данных, понял, что лучше генерить автоматом), к тому же параллельно я писал еще один вспомогательный инструмент (Wolsh видел уже), поэтому времени особо не было.
Обновил(-а) iNils 27.09.2011 в 05:40
Старый 27.01.2011 08:30 alexcon314 вне форума
alexcon314
Чего такие старики-то?
Цитата:
* tt.addRow ([1, 100, 'Tom', 1966]);
* tt.addRow ([2, 2, 'Anna', 1985]);
Старый 27.01.2011 12:03 iNils вне форума
iNils
 
Аватар для iNils
От балды
Старый 30.01.2011 13:46 ZGG вне форума
ZGG
 
Аватар для ZGG
круть!
Старый 23.04.2012 15:23 MikroAcse вне форума
MikroAcse
 
Аватар для MikroAcse
Супер! Давно искал!
 

 


Часовой пояс GMT +4, время: 18:53.


Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.