Измените значение ячейки с датой на входной текст с помощью YUI - PullRequest
Новая
       20

Измените значение ячейки с датой на входной текст с помощью YUI

1 голос
/ 24 марта 2020

Я работаю над проектом с javascript библиотекой YUI и JSP. Я пытаюсь манипулировать YUI datatable, некоторые ячейки таблицы select options и input text: я пытаюсь динамически манипулировать options из the select options input во время выполнения:

Во-первых, это объявление datatable: 

var CustomSelectCellEditor = Y.Component.create({

     NAME: 'CustomSelectCellEditor',

     ATTRS: {
         multiple: {
             value: false,
             validator: Y.Lang.isBoolean
         },
         strings: {
             value: {
                 edit: 'Edit',
                 save: 'OK',
                 cancel: 'Annuler'
             }
         }
     },

     EXTENDS: Y.BaseOptionsCellEditor,

     UI_ATTRS: ['multiple'],

     prototype: {
         ELEMENT_TEMPLATE: '<select class="celleditor-element error-field"></select>',...

var ruleTypeCreateColumns = [{editor: new CustomSelectCellEditor({editable: false,options: types}), ...

var newRulesTable = new Y.DataTable({
        columns : ruleTypeCreateColumns,
        width: "80%",
        editable: true,
        editEvent: 'click'
    });

, где будет выглядеть таблица данных, datatable с ячейками ввода, редактор ввода появляется в событии щелчка:

enter image description here

Во время выполнения я пытался изменить редактор, например с select options на input text, в соответствии с вводом первого столбца: 

newRulesTable.after('*:criteriaTypeChange', function(o){
        for(var i=0; i<newRulesTable.data.size();i++) {
            if(newRulesTable.data.item(i).get('criteriaType') == getTypes().date) {
                // TODO HERE
            }
        }
    });

После многих попыток я не смог достичь своей цели, поэтому мне нужно знать, какой объект я должен изменить?

1 Ответ

1 голос
/ 26 марта 2020

манипулирование данными во время выполнения является препятствием при использовании нативных JavaScript, в отличие от известных библиотек, таких как angular, реагирующих, которые автоматически обновляют ваше представление при изменении ваших данных (связывание двумя способами), в нативном JavaScript вы должны реализовать это logi c вручную через слушателей и чистый код:

Вот простой пример , мы хотим обновить нашу опцию выбора, когда нажимаем кнопку 

<!DOCTYPE html>
<html lang="en" xml:lang="en">

<head>
    <title>an example </title>
    <meta content="text/html; charset=utf-8" />
</head>

</div>

<body>
    <h1>
        This is a dynamic select
    </h1>
    <div id="select-container">
        <button id="button">Change Select Dynamiclly</button>
        <select id="select" name="pets" id="pet-select">
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
        </select>
    </div>
    <script>
        const button = document.querySelector("#button");
        button.addEventListener("click", event => {
            window.alert('Content has been changed !')
            changeContent();
        });
        var changeContent = function () {
            var animals = ["Fish","Horse","Pig"]
            const select = document.querySelector("#select");
            for (var i = 0; i < animals.length; i++) {
                var opt = document.createElement('option');
                opt.value = animals[i];
                opt.innerHTML = animals[i];
                select.appendChild(opt);
            }
        }

    </script>
</body>

</html>

Я действительно не знаю, как работает библиотека YUI, но я надеюсь, что это вам немного поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...