Редактирование макетов таблиц в jQuery

Question

Итак, я создаю CMS, и для данной страницы я хочу позволить клиенту макетировать страницу (не макет сайта, макет страницы, то есть содержимое; заголовок, текст, графические блоки, дополнительные ссылки и тому подобное) с заданными элементами. Поскольку расположение таблиц легко понять для клиента, я собираюсь использовать это. Избавьте меня от комментариев "всегда используйте CSS макеты". Я обычно использую CSS, но для этого я действительно считаю, что макет таблицы - лучший способ предоставить клиентам простую в использовании среду.

Таким образом, клиент должен иметь кнопку «Редактировать макет», которая переносит его на новую страницу с показанной сеткой макета и всеми «модулями» контента, отображаемыми в виде блоков. Они должны иметь возможность переупорядочивать коробки и сортировать их внутри ячеек таблицы по желанию. Для меня это не проблема, но я ТАКЖЕ хочу, чтобы клиент мог сам редактировать таблицу макетов.

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

Я много гуглял, но большинство плагинов для таблиц jQuery - это редактирование таблицы DATA, а не самой таблицы.

У кого-нибудь есть хорошее предложение, с чего начать?

Answer 1

Просто несколько коротких примеров, чтобы вы начали (с оговорками, что вы ничего не тестировали, но, по крайней мере, вы бы начали)

Конечно, у клиента должен быть способ узнать, какую строку, ячейку и столбец выбрать. Я оставляю это вам, но $('table').click() может работать нормально.

Копирует последнюю строку таблицы и вставляет ее после последней:

$('#main-table-layout tr:last').after($('#main-table-layout tr:last').clone());

Вставляет новый столбец в таблицу (создает тд в каждой из строк)

$('#main-table-layout tr).each(function(){
  $(this).find('td:last').after($('<td></td>'));
});

Регулируя ширину ячейки, вы лучше всего справляетесь с css:

$('#the-cell-that-you-want-to-change').css('width','500px');

Чтобы настроить ширину всех ячеек:

$('td').css('width','500px');

Или к 3-му столбцу (3-я ячейка в каждом ряду)

$('tr').each(function(){$(this).find('td:eq(2)').css('width','500px')});

возможно сделать предыдущее как

$('tr').find('td:eq(2)').css('width','500px');

но я не совсем уверен, как jQuery делает выбор там.

Но, в конце концов, я думаю, вам лучше позволить им использовать редактор вроде CKEditor или что-то похожее. Избавляет вас от необходимости заботиться об этом самостоятельно.