2

Появилась одна проблемка. Связать то текст с checkbox я могу, но с одним кодом который я нашел и вроде более менее разобрался, отредактировал чуть-чуть под себя - не выходит. Нужно это для того, что-бы можно было удалить\добавить ветку. То есть через checkbox выделить и потом уже как-то взаимодействовать. Я думал что лучшим вариантом будет добавить в объект еще одно свойство, типа id c которым нужно связаться. Удобнее всего было бы конечно же использовать цифры, но они уже есть... Помогите пожалуйста! Вроде бы и есть мысль, но никак "додумать" не могу.

var listCategories = {
  data: [

    {
      itemId: 1,
      itemName: "пункт №1",
      itemParentId: 0
    },

    {
      itemId: 2,
      itemName: "пункт №1.1",
      itemParentId: 1
    },

    {
      itemId: 3,
      itemName: "пункт №1.2",
      itemParentId: 1
    },

    {
      itemId: 4,
      itemName: "пункт №2",
      itemParentId: 0
    },

    {
      itemId: 5,
      itemName: "пункт №3",
      itemParentId: 0
    },

    {
      itemId: 6,
      itemName: "пункт №3.1",
      itemParentId: 5
    },

    {
      itemId: 7,
      itemName: "пункт №3.2",
      itemParentId: 5
    },

    {
      itemId: 8,
      itemName: "пункт №3.3",
      itemParentId: 5
    },

    {
      itemId: 9,
      itemName: "пункт №4",
      itemParentId: 0
    },

    {
      itemId: 10,
      itemName: "пункт №5",
      itemParentId: 0
    },

    {
      itemId: 11,
      itemName: "пункт №5.1",
      itemParentId: 10
    }

  ]
};

function createTree(data, parentId) {

  parentId = parentId || 0;
  var items = data.filter(function(el) {
    return el.itemParentId == parentId;
  });
  if (items.length == 0) return null;

  var tree = $('<ul>').addClass('tree');
  tree.append(
    items.map(
      function(el) {

        var li = $('<li>').append(
            $('<input type="checkbox">')
          ).append(
            $('<a>').addClass('state')
          ).append(
            $('<label>').html(el.itemName).attr('id', el.itemId).addClass('item')
          ),
          nestedTree = createTree(data, el.itemId);
        if (nestedTree !== null) {
          li.append(nestedTree)
            .addClass('collapse');
        }
        return li;
      }
    )
  );
  return tree;
}

$(document).ready(function() {
  var tree = createTree(listCategories.data);

  $('#tree').append(tree)
            .on('dblclick', '.item',function(){
                $(this).attr("contenteditable", "true");
            })

            .on('click', '.item',function(){
                $('.active').not(this).removeClass('active');
                $(this).toggleClass('active');
            })

            .on('click', '.state',function(){
                $(this).parent().toggleClass('collapse expand');
            })

});
ul.tree {
  list-style-type: none;
  position: relative;
}
.active {
  background-color: orange;
}
.state {
  position: absolute;
  left: 1em;
}
.collapse > .state::after {
  content: '+';
}
.expand > .state::after {
  content: '-';
}
.collapse > ul {
  display: none;
}
.expand > ul {
  display: block;
}
.item {
  cursor: pointer;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tree"></div>

3
  • 1
    объясните что Вы хотите сделать? Только больше конкретики и меньше своего объяснений что у Вас не получилось и почему, это отвлекает :)
    – user220409
    17 окт 2016 в 11:22
  • @OlmerDale Нужно связать текст с checkbox для выделения ветки - что бы можно было ее удалить или же добавить новую. Текст в label уже "обернул", осталось каким-то образом дописать id у checkbox и добавить атрибут for в этот самый label
    – Mark_8
    17 окт 2016 в 11:30
  • Вам нужно по нажатию на пункт №... сделать активным чекбокс?
    – user220409
    17 окт 2016 в 13:25

1 ответ 1

1

Может быть так:

var listCategories = {
  data: [

    {
      itemId: 1,
      itemName: "пункт №1",
      itemParentId: 0
    },

    {
      itemId: 2,
      itemName: "пункт №1.1",
      itemParentId: 1
    },

    {
      itemId: 3,
      itemName: "пункт №1.2",
      itemParentId: 1
    },

    {
      itemId: 4,
      itemName: "пункт №2",
      itemParentId: 0
    },

    {
      itemId: 5,
      itemName: "пункт №3",
      itemParentId: 0
    },

    {
      itemId: 6,
      itemName: "пункт №3.1",
      itemParentId: 5
    },

    {
      itemId: 7,
      itemName: "пункт №3.2",
      itemParentId: 5
    },

    {
      itemId: 8,
      itemName: "пункт №3.3",
      itemParentId: 5
    },

    {
      itemId: 9,
      itemName: "пункт №4",
      itemParentId: 0
    },

    {
      itemId: 10,
      itemName: "пункт №5",
      itemParentId: 0
    },

    {
      itemId: 11,
      itemName: "пункт №5.1",
      itemParentId: 10
    }

  ]
};

function createTree(data, parentId) {

  parentId = parentId || 0;
  var items = data.filter(function(el) {
    return el.itemParentId == parentId;
  });
  if (items.length == 0) return null;

  var tree = $('<ul>').addClass('tree');
  tree.append(
    items.map(
      function(el) {

        var li = $('<li>').append(
            $('<input type="checkbox">').attr('id', el.itemId)
          ).append(
            $('<a>').addClass('state')
          ).append(
            $('<label>').html(el.itemName).attr('for', el.itemId).addClass('item')
          ),
          nestedTree = createTree(data, el.itemId);
        if (nestedTree !== null) {
          li.append(nestedTree)
            .addClass('collapse');
        }
        return li;
      }
    )
  );
  return tree;
}

$(document).ready(function() {
  var tree = createTree(listCategories.data);

  $('#tree').append(tree)
            .on('dblclick', '.item',function(){
                $(this).attr("contenteditable", "true");
            })

            .on('click', '.item',function(){
                $('.active').not(this).removeClass('active');
                $(this).toggleClass('active');
            })

            .on('click', '.state',function(){
                $(this).parent().toggleClass('collapse expand');
            })

});
ul.tree {
  list-style-type: none;
  position: relative;
}
.active {
  background-color: orange;
}
.state {
  position: absolute;
  left: 1em;
}
.collapse > .state::after {
  content: '+';
}
.expand > .state::after {
  content: '-';
}
.collapse > ul {
  display: none;
}
.expand > ul {
  display: block;
}
.item {
  cursor: pointer;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tree"></div>

Связь <input type="checkbox" id="InputID"> с <label for="InputId"> происходит по id и for.

3
  • Благодарю! :) А вот еще вопрос, как можно было бы вывести на экран текст который находится внутри label? Решил попробовать, а не получилось.
    – Mark_8
    17 окт 2016 в 13:40
  • @Mark_8, простите не поняла. Там же и находятся пункт №1 ...
    – SVE
    17 окт 2016 в 13:47
  • Прошу прощения, спросил глупость. Не берите в голову :)
    – Mark_8
    17 окт 2016 в 17:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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