Как сгенерировать событие не в дочерний элемент?

Во всей документации на "docs.webix.com" не смог найти содержание параметра "array params" для:

boolean callEvent(string name,array params);
Parameters
name string the event name, case-insensitive
params array an array of the event related data

Что задаётся в params?


На самом деле, вопрос немного сложнее:

    this.ui = {
      view:  "tabview",
      cells: this.menu,
      multiview: {
        animate:true
      }
   }

, где this.menu - это 10 закладок вида:

{ header:"<span class='webix_icon fa-home'></span>",
        body:{
          cols:[
            { view:"datatable", id:"kquest1", editable:true,
              columns: [
                { id:"kqid", header:"", hidden:true, tooltip:false },
                { id:"kqgrp", header:"", hidden:true, tooltip:false },
                { id:"questionk", header:poly.t("Q u e s t i o n"), hidden:false, fillspace:true, tooltip:"#questionk#",
                  css:{'text-align':'left'},
                  template:"<span class='questionk_textarea'>#questionk#</span>"
                }
              ],
              on:{
                "onFocus":function(current_view, prev_view){
                ...
                },
                "onItemClick":function(id){
                ...
              },
              tooltip:function(obj, common){
                return "<span class='webix_tooltip_my1'>"+obj[common.column.id]+"</span>";
              },
              datatype: "json",
              data: k.getQall()[0]
            },

            { view:"resizer" },

            { view:"datatable", id:"kanswe1", editable:true,
              columns: [
                { id:"kqid", header:"", hidden:true, tooltip:false },
                { id:"kaid", header:"", hidden:true, tooltip:false },
                { id:"kqgrp", header:"", hidden:true, tooltip:false },
                { id:"answerk", header:poly.t("A n s w e r"), hidden:false, fillspace:true,
                  editor:"popup", css:"webix_textarea_my2",
                  tooltip:"#answerk#",
                  template:"<span class='answerk_textarea'>#answerk#</span>"
                }
              ],
              on:{
                "onFocus":function(current_view, prev_view){
                ...
                },
                "onItemClick":function(id){
                ...
                },
                "onBeforeEditStop":function(id){
                ...
                }
              },
              tooltip:function(obj, common){
                return "<span class='webix_tooltip_my2'>"+obj[common.column.id]+"</span>";
              },
              datatype: "json",
              data: k.getAall()[0],
              save: Gkernr+"/kaw/11"
            }
          ]
        }
});

И по click в поле левой таблицы мне нужно инициировать такое же событие, но в правой таблице в соответствующем поле.

Это всё завёрнуто в Webix Jet. Я совершенно запутался в этой иерархии.
"id" объектов Webix, Webix Jet и document.getElementById(id) - это совершенно разные сущности. Пытаюсь достучаться до DOM, так нативных id не могу определить, или в конец запутался, или...что-то с головой.

Да, кстати, а массив в callEvent - нигде не описан?

Comments

  • edited February 2018

    Работает такое решение: вводим в шаблоны столбцов уникальные id -

    template:
    { span id='kans#kqid#' class='answerk_textarea' }#answerk#{ /span }

    kqid - индекс из таблицы mySQL, то есть, kans#kqid# = уникальность;
    По логике проекта индексы таблиц вопросов и ответов - совпадают.

    Тогда в левой таблице - вопросов - по событию 'onItemClick' делаю:

    сonst itm_kqid = this.getItem(id.row).kqid;
    сonst row2kansw = document.getElementById("kans"+itm_kqid);
    const event = new Event("click", {bubbles: true, cancelable: true})
    row2kansw.dispatchEvent(event);

    Последняя строка при 'click' по полю левой таблицы делает справа то, что нужно: вызывает popup-редактор поля ответа, соответствующего полю вопроса слева.

    Но не получилось-таки добиться того же эффекта средствами webix.
    Что, видимо, не очень... По крайней мере, когда я попытался оставить красивое модальное окно, работавшее в html-странице до загрузки webix, попытка его использования в среде webix приводила к ступору браузера.

  • edited February 2018

    Здравствуйте,

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

    $$("kanswe1").callEvent("onItemClick", [ {row: row, column:column} ]);    
    

    Метод callEvent действительно может принимать любой массив аргументов, но если Вы вызываете существующее событие Webix view, то и аргументы должны быть теми же (они описаны в API каждого события). Например, у обработчика события onItemClick аргументы следующие: id, event, node.

    Чтобы получить id элемента с искомым qkid из таблицы с ответами, можно воспользоваться методом find:

    onItemClick:function(id){ 
       var kqid  = this.getItem(id.row).kqid;
       var found  = $$("kanswe1").find(function(obj){
          return obj.kqid ==kqid;
       }, true);
    
       $$("kanswe1").callEvent("onItemClick", [{row:found.id, column:"answerk"}]);
    }
    

    Вот рабочий пример: https://webix.com/snippet/9182db43.

  • Ай да красота!
    Спасибо за пояснения по callEvent.
    find я именно так и использую! Но событие по callEvent не мог передать...

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!