0

Проблема в том, что я изучаю Java Script по мануалам и статьям, самостоятельно. Использую пока его просто для того, чтобы сделать тривиальные задачи. Сейчас решил сделать конструктор на базе Wijmo, там есть два блока Drag&Drop, в первом (верхнем) блоке находятся начальные элементы, которые парсятся с json (это я уже сделал, было не сложно), но мне надо взять собранную пользователем информацию со второго блока (нижнего) и спарсить её в новый json.

Проблема в том, что я начал читать спецификации и без примером не понимаю, как правильно записать их в коде, чтобы скрипт давал мне, то что обещает спецификация. Я начал искать парсер и там тоже ничего не понял.

Помогите разъяснить или укажите на статьи где объяснялось бы как понимать спецификации такого рода.

Вот пример того , что я не могу понять как записывать в коде:

getNode(item: any): TreeNode

Ссылки на спецификации:

https://github.com/andrejewski/himalaya/blob/master/text/ast-spec-v1.md

http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.nav.TreeView.Class.html

3
  • 1
    было бы не плохо увидеть пример того, что у тебя сейчас есть, и что конкретно не получается
    – Grundy
    6 апр 2018 в 10:28
  • @Grundy , вот архив с тем , что есть сейчас: drive.google.com/open?id=1QB2iDuPUO-Hior5xYW5vDLzo9GiedMFg 6 апр 2018 в 10:40
  • @Grundy как и писал ранее , не могу понять спецификацию Wijmo и не могу спарсить дерево которое формирует пользователь в нижней форме. 6 апр 2018 в 12:48

1 ответ 1

1

Описание классов приведено для компонентов Angular и, соответственно, они описывают не javascript, а typescript.

Однако, кроме декларации метода, нужно смотреть его описание, в котором описано что возвращает метод, и какие параметры принимает.

Для примера: getNode(item: any): TreeNode

Описание метода: Gets the TreeNode object representing a given data item. (Получает объект типа TreeNode, у которого значение свойства dataItem содержит значение item)

Параметры: item: any - The data item to look for. (данные которые ищутся) Возвращаемое значение: объект типа TreeNode.

Для примера: если в itemsSource, если объект var el = {header: 'header'}, то вызов tree.getNode(el) вернет TreeNode, в которой содержится искомый элемент.


Что касается получение обновленного json. Актуальный массив для второго дерева можно получить с помощью метода map примененного к свойству nodes и получения у каждого узла первого уровня свойства dataItem, в котором хранится конкретный объект.

Пример:

var t = {
  header: 'Custom'
}
// create trees to drag/drop between
var tvDragDrop1 = new wijmo.nav.TreeView('#tvDragDrop1', {
  displayMemberPath: 'header',
  childItemsPath: 'items',
  allowDragging: true,
  dragOver: dragOverBetweenTrees,
  itemsSource: [t, {
      header: 'Item 1.1'
    },
    {
      header: 'Item 1.2'
    },
    {
      header: 'Item 1.3'
    },
  ]
});
var tvDragDrop2 = new wijmo.nav.TreeView('#tvDragDrop2', {
  displayMemberPath: 'header',
  childItemsPath: 'items',
  allowDragging: true,
  dragOver: dragOverBetweenTrees,
  itemsSource: []
});

// allow drag/drop between tvDragDrop1 and tvDragDrop2
function dragOverBetweenTrees(s, e) {
  var t1 = e.dragSource.treeView,
    t2 = e.dropTarget.treeView;
  if (t1 == tvDragDrop1 || t1 == tvDragDrop2) {
    if (t2 == tvDragDrop1 || t2 == tvDragDrop2) {
      e.cancel = false;
    }
  }
}

function getjson() {
  var nodes = tvDragDrop2.nodes;
  var data = nodes.map(function recursiveNodes(node) {
    return node.dataItem;
  });
  console.log(JSON.stringify(data, null, 2));
}
.short {
  min-height: 30px;
  border: 1px solid red !important;
}
<!-- latest Wijmo version -->
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.436/controls/wijmo.nav.min.js"></script>
<link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet" />
<div class="short" id="tvDragDrop1"></div>
<div class="short" id="tvDragDrop2"></div>

<input type="button" onclick="getjson()" value="click" />

4
  • Огромное спасибо за вашу помощь. До того как вы ответили я к счастью сам смог разобраться в проблеме. Но ваше решение парсинга элементов оказалось куда совершеннее. Я начал парсить элементы с помощью : JSON.stringify(tvDragDrop2.itemsSource) , но к сожалению не всегда получал актуальные данные дерева , до сих пор не могу понять , почему оно то выдавало правильные данные , то не обновляло их вовсе. Может вы на этот вопрос тоже знаете ответ ? Буду рад , если вы сможете мне ответить . 6 апр 2018 в 22:42
  • кстати в вашем , как и моём варианте парсинга есть один недочёт (он больше недочёт модуля , но всё же) Когда мы вкладываем элемент друг в друга , а потом , вынимаем его обратно , то в массиве появляется такой элемент : ,"items":[] , я его устраняю с помощь: .replace(/\,\"items\"\:\[\]/, ""); не знаю , на сколько это грамотное решение , но оно работает ) 6 апр 2018 в 22:47
  • добавил флаг global : .replace(/\,\"items\"\:\[\]/g, ""); 6 апр 2018 в 22:54
  • @GreenBird, .itemsSource у них сохраняется ссылка на массив, который был передан в самом начале. Я не совсем понял как именно он обновляется. Удалять items нужно не после перевода в строку, а во время, например используя параметр replacer в JSON.stringify
    – Grundy
    7 апр 2018 в 11:09

Ваш ответ

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

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