jstree Узлы для редактирования значения - PullRequest
Новая
       16

jstree Узлы для редактирования значения

0 голосов
/ 02 мая 2011

Я создаю jstree, названия узлов которого состоят из категорий продуктов (скажем, «автомобили») и которые помимо этого названия («автомобили») содержат поле ввода (изменяемое) с ценой и три кнопки который отправляет команды на сервер и некоторые JS на клиенте, может выполнять функции «удалить», «сохранить» и «добавить новые». (Я бы поставил картинку с макетом, но не думаю, что это сильно увеличит ясность вопроса, но дайте мне знать).

Поскольку я использую плагин JSON и извлекаю дерево из базы данных, я отправляю данные с сервера, и до сих пор мне удалось добавить HTML-код к данным. Это отображает макет, который я хочу, но так как все внутри тега, у меня возникают неприятные проблемы, когда, например, я нажимаю на поле ввода (то есть: экран переходит вверх), или когда я пытаюсь поймать событие click на кнопки.

Может кто-нибудь, пожалуйста, указать мне правильный способ сделать это с Jstree? Я ползу по форумам и документам уже более 3 дней, и начинаю верить, что мой мозг уже давно накачался и только что заметил это. :)

Некоторый (обобщенный и «псевдоизображенный») код: 

class NewNode
    {
    var $data;
    var $attr;
    var $state;
    var $children;
    var $metadata;
    }

и позже ... 

$NNode = new (NewNode);
$NNode->data = 'the-price-category-from-my-database';   <-- pretty much pseudo code here...
$NNode->attr['value'] = 'the-price';            <-- pretty much pseudo code here...

$htm = "<div style='position:relative; width:400; float:left;'>";
$htm .= "<div style='float:left; font-weight:bold; width:250px;'>";
$NNode->data = $htm . $NNode->data;
$NNode->data .= "</div>";
$NNode->data .= "<div style='width:100px; float:left; text-align:right;'>";
$NNode->data .= "$<input type='text' value='" . $NNode->attr['value'] . "'width='20%' style='width:50px; text-align:right;'/>";
$NNode->data .= "<button class='btn_save_price'>&nbsp;</button>";                
$NNode->data .= "<button class='btn_new_price'>&nbsp;</button>";                
$NNode->data .= "<button class='btn_delete_price'>&nbsp;</button>";                
$NNode->data .= "</div>";
$NNode->data .= "</div>";

$MyTree->children[] = $NuevoNodo;

И это все ... 

die(json_encoed($MyTree))

Еще раз спасибо.

1 Ответ

0 голосов
/ 03 мая 2011

во-первых, добро пожаловать в SO.При публикации фрагмента кода, пожалуйста, используйте теги кода для форматирования кода.
также я думаю, что снимок экрана поможет прояснить ситуацию.
к вашему вопросу - я думаю, что размещение элементов управления, таких как текстовые поля, кнопки и т. Д. ВнутриУзлы дерева на самом деле не являются стандартными.
рассмотрите возможность использования другой панели для этих элементов управления (см. прикрепленное изображение (детали удалены, чтобы избежать проблем с уместностью), как я использую jsTree для редактирования).
enter image description here

Кроме того, когда вы создаете данные JSON на стороне сервера, вы создаете тесную связь между выбранным плагином jQuery и кодом на стороне сервера.
Это означает, что если вы решите переключиться с jQuery на другую платформу, илидаже переключитесь с jsTree на другой плагин - ваш серверный код должен будет измениться.
В идеале вы бы хотели, чтобы изменения в пользовательском интерфейсе были ограничены уровнем пользовательского интерфейса.

То, что я делаю в своем проекте, - это извлечение обычных объектов со стороны сервера и преобразование их в формат jsTree на стороне клиента.Таким образом, если что-то изменится на стороне пользовательского интерфейса, должен измениться только код js.

...