0

Подскажите, плагин для jquery или просто либу на js для такой задачи:

Есть таблица с текстовыми данными. Колонок в ней не больше 12 (месяца), строчек произвольно, но тоже много не будет. Нужна возможность редактировать ячейку, WYSIWYG не нужен. Там только выравнивание, жирность да цвет нужен (может, кстати есть какой-нибудь такой простенький плагин для этого). А вот всякие объединялки для ячеек таблицы было бы неплохо (как минимум надо уметь объединять соседние по горизонтали ячейки). По сути, не хочется для объединялки ячеек мудрить, ну и какой-нибудь плагин простенький, который перекрывает стандартную textarea.

В общем-то я и сам могу написать, просто может есть уже полезное решение. Не люблю велосипеды )).

4
  • Общем понял, что задача очень специфична, все-таки таблицы мы для отображения данных используем, а тут получается что таблица это еще и рабочая область. Поставил вопрос заказчикам, что это вобще не совсем нужная задача( как бы выходит сам от денег отказался :) ), что проще копипастом в верстке все изменить, чем городить огород с таким редактированием =) Имхо если уж делать, то самое просто было бы на стороне сервера в адмике сделать сущность ячейка, строка, столбец у ячейкий атрибуты коллспан и роу спан и при рендере уже все это выводить, но кого устроит такая админка) жду что скажут =)
    – stasych
    2 окт 2011 в 15:46
  • странно что так мало ответов...я думал больше всяких штук предложат)
    – stasych
    2 окт 2011 в 15:47
  • Свои велосипеды очень часто намного полезнее. Особенно когда вам нужен велосипед а вокруг одни танки.
    – Arni
    2 окт 2011 в 17:15
  • да хорошее сравнение. Но удивило , что реально не нашел такого плагина, который происзовольное редактирование ячейки поддерживает. мне кажется, что я просто плохо искал или не доглядел. В итоге на эту тему у меня пока только одна идея - делать редактирование контента в отедельном окне с ckeditorom, а объединение колонок и строк : указывать номера ячеек которые надо объединять и проверять чтобы они были рядом чтобы они могли объединится , а потом просто склеивать их контент.
    – stasych
    2 окт 2011 в 17:19

2 ответа 2

2

покопайте jqGrid, самый большой плагин для работы с таблицами.

0

Приветствую. По-моему вот неплохое решение к решению твоей задачи) http://codepen.io/anon/pen/RWyvPe Только я понять не могу как там состояние которые изменяешь с помощью скрипта, можно сохранять в .html

$(document).ready(function() {

  function editState(thing) {
    var thingColor = thing.parent().attr('value');
    if (!tooggleToTrue) {
      thing.removeClass('active');
      thing.css({
        'background': '#333333'
      });
    } else {
      thing.addClass('active');
      thing.css({
        'background': thingColor
      });
    }
  }

  var isDown = false;
  var toggleToTrue = false;

  $('.thing li')
    .mousedown(function() {
      isDown = true;
      tooggleToTrue = !$(this).hasClass('active');
    })
    .mouseup(function() {
      isDown = false;
    });

  $(document).on('mouseover', '.thing li', function() {
    if (isDown) {
      editState($(this));
    }
  });

  $(document).on('mousedown', '.thing li', function() {
    editState($(this));
  });

  var colors = [
    "#2AD33F",
    "#EDF11A",
    "#D3412A",
    "#2D69E2",
    "#D32AD1",
    "#5F4695",
    "#FB8F17",
    "#FFFFFF",
    "#00FFD4"
  ];

  var itemAdded = 0;

  $('.addThing').click(function() {
    $(".template")
      .clone(true, true)
      .removeClass('template')
      .attr('value', colors[itemAdded])
      .appendTo(".things");

    if (itemAdded == 8) {
      itemAdded = 0;
    } else {
      itemAdded++;
    }
  });

  $(document).on('click', '.remove', function() {
    $(this).parent().fadeOut(500, function() {
      $(this).remove();
    });
  });
});
$background:#1d1e20;
 $darkerbackground:#333333;
 $textcolor:#ffffff;
 $primarycolor:#fd3e81;
 $secendarycolor:#00ffd4;
 body {
  background: $background;
  box-sizing: border-box;
  padding-top: 150px;
  padding-bottom: 50px;
  font-family: arial;
  min-width: 960px;
}
.intro {
  font-size: 30px;
  position: absolute;
  top: 60px;
  left: 140px;
  color: #fff;
  span {
    font-size: 15px;
    color: $secendarycolor;
  }
}
ul {
  user-select: none;
  .name {
    width: 85px;
    height: 20px;
    line-height: 20px;
    text-align: right;
    padding-right: 5px;
    margin-right: 5px;
    margin-left: 10px;
    box-sizing: border-box;
    color: $textcolor;
    float: left;
    cursor: default;
    font-size: 12px;
    background: transparent;
    border: 0;
    outline: 0;
    transition: .3s;
    border-radius: 2px;
  }
  input:hover {
    background: $darkerbackground!important;
    cursor: auto!important;
  }
}
.timeline {
  width: 100%;
  height: 20px;
  margin-bottom: 14px;
  li {
    display: block;
    float: left;
    width: 27px;
    height: 20px;
    background: $primarycolor;
    color: $textcolor;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    margin-right: 3px;
    user-select: none;
    cursor: default;
    border-radius: 2px;
  }
}
.thing {
  width: 100%;
  height: 20px;
  margin-bottom: 4px;
  animation: load .5s ease-in;
  li {
    display: block;
    float: left;
    width: 7px;
    height: 20px;
    background: $darkerbackground;
    text-align: center;
    margin-right: 0px;
    border-right: 3px solid $background;
    cursor: pointer;
    border-radius: 0px;
    transition: .3s;
    &: hover {
      opacity: .5;
    }
  }
  .remove {
    color: $textcolor;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    padding: 0 10px;
    margin-left: 5px;
    background: $primarycolor;
    display: block;
    float: left;
    border-radius: 2px;
    opacity: .2;
    transition: .3s;
    user-select: none;
    &: hover {
      opacity: 1;
    }
  }
}
@keyframes load {
  from {
    opacity: 0
  }
}
.template {
  display: none;
}
.addThing {
  color: $textcolor;
  font-size: 12px;
  width: 716px;
  transition: .3s;
  margin-left: 100px;
  text-align: center;
  border-radius: 2px;
  height: 30px;
  line-height: 30px;
  margin-top: 15px;
  cursor: pointer;
  &: hover {
    background: $darkerbackground;
  }
}
<h1 class="intro">
	Design my day
	<span>by joacimnilsson.se</span>
</h1>
<ul class="timeline">
  <div class="name">Hours</div>
  <li>00</li>
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
</ul>
<ul class="thing template">
  <input type="text" class="name" value="Example">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <div class="remove">Remove</div>
</ul>
<div class="things">
  <ul class="thing" value="#2AD33F">
    <input type="text" class="name" value="Sleeping">
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="" style="background: rgb(51, 51, 51);"></li>
    <li class="" style="background: rgb(51, 51, 51);"></li>
    <li class="" style="background: rgb(51, 51, 51);"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <li class="active" style="background: rgb(42, 211, 63);"></li>
    <div class="remove">Remove</div>
  </ul>
  <ul class="thing" value="#EDF11A">
    <input type="text" class="name" value="Travel">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active" style="background: rgb(237, 241, 26);"></li>
    <li class="active" style="background: rgb(237, 241, 26);"></li>
    <li class="active" style="background: rgb(237, 241, 26);"></li>
    <li class="" style="background: rgb(51, 51, 51);"></li>
    <li class="" style="background: rgb(51, 51, 51);"></li>
    <li class="" style="background: rgb(51, 51, 51);"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active" style="background: rgb(237, 241, 26);"></li>
    <li class="active" style="background: rgb(237, 241, 26);"></li>
    <li class="active" style="background: rgb(237, 241, 26);"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <div class="remove">Remove</div>
  </ul>
  <ul class="thing" value="#D3412A">
    <input type="text" class="name" value="Working">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li class="active" style="background: rgb(211, 65, 42);"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <div class="remove">Remove</div>
  </ul>
  <ul class="thing" value="#2D69E2">
    <input type="text" class="name" value="Eating">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active" style="background: rgb(45, 105, 226);"></li>
    <li class="active" style="background: rgb(45, 105, 226);"></li>
    <li class="active" style="background: rgb(45, 105, 226);"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active" style="background: rgb(45, 105, 226);"></li>
    <li class="active" style="background: rgb(45, 105, 226);"></li>
    <li class="active" style="background: rgb(45, 105, 226);"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active" style="background: rgb(45, 105, 226);"></li>
    <li class="active" style="background: rgb(45, 105, 226);"></li>
    <li class="active" style="background: rgb(45, 105, 226);"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active" style="background: rgb(45, 105, 226);"></li>
    <li class="active" style="background: rgb(45, 105, 226);"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <div class="remove">Remove</div>
  </ul>
  <ul class="thing" value="#D32AD1">
    <input type="text" class="name" value="Leisure">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="" style="background: rgb(51, 51, 51);"></li>
    <li class="" style="background: rgb(51, 51, 51);"></li>
    <li class="" style="background: rgb(51, 51, 51);"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li class="active" style="background: rgb(211, 42, 209);"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <div class="remove">Remove</div>
  </ul>
  <ul class="thing" value="#FB8F17">
    <input type="text" class="name" value="Codepen">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li class="active" style="background: rgb(251, 143, 23);"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <div class="remove">Remove</div>
  </ul>
</div>
<div class="addThing">
  Add new thing +
</div>

1
  • Классно :) Хотя имеет смысл скопировать кусок кода в ответ.
    – Qwertiy
    29 окт 2015 в 7:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.