treedata onclick by id

ANDYSAY · October 7, 2014, 9:21am

Hello evrybody , i have next question…


    var tree_data = [
		{ "id":"1", "value":"Каталог журналов",},
		{ "id":"2", "value":"Авторский указатель",},
		{ "id":"3", "value":"Полнотекстовый поиск",},
		{ "id":"4", "value":"Тематический рубрикатор",},
		{ "id":"5", "value":"Предметный указатель",},
		{ "id":"6", "value":"Каталог книг",},
		{ "id":"7", "value":"Научные издательства",},
		{ "id":"8", "value":"Новые поступления",},
		{ "id":"9", "value":"Новые журналы",},
		{ "id":"10", "value":"Правила пользования",},
		{ "id":"11", "value":"Руководство пользователя",},
		
		];

and if i click id: 2 and id:3 can i apply function destructor ?

id11 have , form, id:"2 have list …

Helga · October 7, 2014, 9:53am

Hello,

Could you provide more details? For what view do you need to call a destructor?

ANDYSAY · October 7, 2014, 10:54am

http://webix.com/snippet/4296a8f9

в этом снипе содержится сразу два вопроса,

к примеру если кликнуть на содержимое в таблице, откроются разные окна по id и если нажать close то одно закроется а другие перестанут закрываться…

и 2ой это если кликнуть на раздел Music или video хотелось бы менять содержимое я полагаю то что функция destructor подходит, как можно прикрепить ее к tree ? спасибо

P.S да и еще почему то в id:clsEdit опция position:“center”, не работает

Helga · October 7, 2014, 11:36am

Окна. В вашей конфигурации одновременно существуют несколько окон с одним и тем же ID (‘clsEdit’). И это уже нарушение принципа уникальности ID-шки. Если подключить во время разработки webix_debug.js версию (непожатый код), то в этой ситуации появилось бы сообщение об ошибке.

var panel = webix.ui({
  //id: 'clsEdit',
  view: "window",
  head: {
  view: "toolbar", cols: [
    { view: "button",  label: "Close", width:60, click:function(){
       var win = this.getTopParentView(); //получаем объект окна
       closewin(win);
     }}
   ]
},
...
});

http://webix.com/snippet/bca33d08

Helga · October 7, 2014, 11:44am

position:“center” не работает, потому что в вызове метода show() у вас другие параметры позиционирования - panel.show({ x: 25, y: 5 });

Достаточно просто panel.show().

Helga · October 7, 2014, 11:52am

А содержимое какого объекта вы хотите менять? desctuctor - это метод компонента, но напрямую его вызывать нет большого смысла, потому что он автоматически вызывается в следующих ситуациях:

при перезагрузке страниц;
при вызове метода close() для окон;
при вызове метода removeView для layout-ов.

Также, можно заменять вьюшки с помощью webix.ui() - и также сработает деструктор.

А клик событие можно ловить следующим образом:

view:tree
on: {
      onItemClick:function(id, e){....}
}

ANDYSAY · October 7, 2014, 12:19pm

http://webix.com/snippet/b654ff03 вот тут я добавил

on:{“itemClick”: function(){alert(“item has just been clicked”);}}, не срабатывает

а вообще я допустим хочу в варианте если в разделе music у меня datatable1 > если кликну в друой раздел , то там допустим бы создался другой уже datatable с другими полями.

Helga · October 7, 2014, 12:31pm

Событиe onItemClick: http://webix.com/snippet/60c82908.

Для замены грида идеально подходит использование webix.ui() метода. В примере http://docs.webix.com/samples/01_layout/13_reconfiguration.html - часть с Replace grid.

Документация: Dynamic UI Modifications of Guides, Configuring Components Webix Docs

Можно, конечно, и перерисовывать уже существующий грид:

grid.config.columns = [..new column array];
grid.refreshColumns();
grid.clearAll();
grid.parse(..new data..); //или grid.load(..script..)

ANDYSAY · October 7, 2014, 5:33pm

окей мне ясен метод on:{“onItemClick”: function replaceGrid(){

					 webix.ui({

						template:"Другой модуль", height:900

					}, $$('oxt'));

тогда подскажите , как задавать к каждому ID из TREE свой модуль допустим в ID:1 у меня
" Другой модуль 1" а в ID:2 , teamplte:“Другой модуль 2”,

Helga · October 8, 2014, 5:17am

В событие передаётся ID элемента, по которому происходит клик.

on:{ 
    "onItemClick": function replaceGrid(id){
        webix.ui({
             template:"Другой модуль "+id, height:900
        }, $$("parent"),  replace_here);
     }
}

http://webix.com/snippet/d9a11f11

Если использовать событие onAfterSelect - другой модуль будет рисоваться сразу после загрузки дерева ( за счёт селекта в ready).

http://webix.com/snippet/17d38911

Helga · October 8, 2014, 5:18am

И да, пользуясь методом webix.ui() для замены вьюшек, нужно избегать одинаковых ID у старого и нового вью.

ANDYSAY · October 8, 2014, 8:32am

Helga, данная вид конструкции мне так же ясен, на что Вам большое спасибо.

Но остается вопрос в том что если у каждого ID свой webix.ui в id1 это datatable, в id2 эото может быть list, в id 3 это к пример dataview как строить модули исходя из этого параметра, в данном примере он строится только на основное заготовленного варианта

например может передавать в “template” функцию с построенными компонентами и чтобы в template помещалось? типа такого http://webix.com/snippet/6ad6437a

можно разобрать по подробнее буду очень признателен

Helga · October 8, 2014, 10:08am

В webix.ui метод можно передавать кофигурацию компонента, а готовую конфигурацию можно где-то хранить.

var config = {
   view:"template",
   template:"tree"
};

webix.ui(config, parent, replacer);

В обработчики событий нельзя сразу передать какой-либо параметр извне, у этой фунцкии уже есть определенный набор параметров. Внутри этого обработчика можно вызывать любую функцию с любыми параметрами:

 "onItemClick": function(id, e, node){
      //id - ID элемента, e -объект события, node - HTML элемент
      replaceGrid(id, ...)
}

В примере http://webix.com/snippet/2539a374, я храню готовые конфиги в configs, а в данных элементов дерева - указатели на них.

В момент срабатывания селекта, я получаю этот указатель, обращаясь к нужному элементу по ID

tree.getItem(id).config;

Получаю нужную конфигурацию и передаю её в webix.ui()

var config = configs[tree.getItem(id).config];
webix.ui(config, $$("parent"),  replace_here);

ANDYSAY · October 8, 2014, 5:22pm

Окей весьма благодарен, но в моем случае почему то код ведет себя так
http://webix.com/snippet/9f81dcac это глюк?

Helga · October 9, 2014, 4:23am

У вас неверно определяется компонент, который надо заменять.

В моём примере строчка tree.getParentView().getChildViews()[1]; - это соседняя ячейка layout, в которую нужно поместить новую конфигурацию.

У вас другое построение приложения, поэтому нужно определять

var replace_here =$$("oxt").getChildViews()[0];
var config = configs[wrap.getItem(id).config];
if(config)
      webix.ui(config, $$("oxt"), replace_here);

где

$$(“oxt”) - родительский элемент для того компонента, который надо заменить
replace_here - компонент, который надо заменить

http://webix.com/snippet/632d7c16

ANDYSAY · October 10, 2014, 1:09pm

Хельга здравствуйте!
Вот из этой конструкции вывел следующее http://webix.com/snippet/f75ae64f
если кликнув на с test1 на test2 а потом на test1 снова то вложения внутри пропадут, и вернувшись в test2 данные в таблице так же исчезнут почему так ?

Helga · October 13, 2014, 5:58am

Поведение нехорошее. Но существует гораздо более простое решение.

А почему в этом случае не использовать multiview, переключаясь между вью по клику дерева? Приложение не будет строить компоненты с нуля, и состояние их будет сохраняться.

ANDYSAY · October 13, 2014, 6:01am

Helga а можно пример с multiview под мою конструкцию а поведение которое у меня с данным кодом это в будущем вы исправите ? Вообще жаль что так было бы здорово если работало корректно

Helga · October 13, 2014, 10:43am

Вот пример с multiview http://webix.com/snippet/9b14840b.

В нём сейчас отключена анимация, можно вернуть обратно и поставить нужный вам тип.

{
   animate:false, cells:[  .. configs of components ...]
}

Чтобы показать какую либо ячейку, нужно вызвать метод show()

$$(cell_id).show();

где cell_id - ID ячейки (самого верхнего вложенного в неё компонента).

В случае со одними и теми же вью, которые должны поочередно открываться и прятаться по к-л событию, именно этот вариант следует использовать.