Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Ассоциативный массив


Автор: izOne 23.3.2005, 17:20
Как правильно сделать следующее:
Код

    var ns = new Array();
        ns[0]['left']    = 1;
        ns[0]['right']    = 18;
        ns[0]['level']    = 0;
        ns[1] = new Array('left' = 2,    'right' = 7,    'level' = 1);
        ns[2] = new Array("left" = 3,    "right" = 4,    "level" = 2);
        ns[3] = new Array("left" = 5,    "right" = 6,    "level" = 2);
        ns[4] = new Array("left" = 8,    "right" = 15,    "level" = 1);
        ns[5] = new Array("left" = 9,    "right" = 10,    "level" = 2);
        ns[6] = new Array("left" = 11,    "right" = 12,    "level" = 2);
        ns[7] = new Array("left" = 13,    "right" = 14,    "level" = 2);
        ns[8] = new Array("left" = 16,    "right" = 17,    "level" = 1);

т.е. положить в элемент массива массив с строковыми ключами.

Автор: Aliance 23.3.2005, 19:42
Что требуется-то? Многомерный массив? Вот он:
Код

var array1 = new Array(1, 2, 3);
var array2 = new Array(4, 5, 6);
var array3 = new Array(7, 8, 9);
var totalArray = new Array(array1, array2, array3);

Автор: Sardar 23.3.2005, 19:57
izOne это будет не совсем массив:
Код
var ns = [
 {left:1, right:18, level:0},
 [
   {left:2, right:7, level:1},
   {left:3, right:4, level:2} //и так дальше
 ]
];

alert(ns[0].left+", "+ns[1][0].left);

Но дерево лучше записать не так, я для нешего FAQ'a структуру меню отсылал в таком виде дерева обьектов. Каждый узел имеет свойство subtree, массив всех подузлов/листьев:
Код
var tree={name:"root", lft: 0. rgt: , subtree: [
  {name: "sub1", lft:1, rgt:2, subtree:null},
  {name: "sub2", lft:3, rgt:8, subtree: [
       {name: "subsub1", lft:4, rgt:5, subtree:null},
       {name: "subsub2", lft:6, rgt:7, subtree:null},
   ]},
]};

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

Автор: izOne 23.3.2005, 23:04
Aliance
Цитата(Aliance @ 23.3.2005, 19:42)
Что требуется-то? Многомерный массив? Вот он:

положить в элемент массива массив с строковыми ключами.

На PHP это выглядит следующим образом:
Код

$rs = array();
array_push($rs, array(
  "left"     => 1,
  "right"   => 2,
  "name"  => 'Название1'
));
array_push($rs, array(
  "left"     => 3,
  "right"   => 4,
  "name"  => 'Название2'
));

Используется дерево NestedSet. Отсортировав массив по ключу "left", получаем правильное дерево.

Сейчас стоит задача: сделать визуальный редактор этого дерева, т.е. перемещение, удаление, добавление элементов посредством браузера и мыши.

Можно конечно после кадожго event'a посылать запрос на сервер, там скриптом обрабатывать, и посылать новую страницу клиенту, но это долго.

Сейчас хоче сделать нечто следующее: при каждом event'e пишется в переменную лог действий, напр.:
Код

MOVE 13 UP
MOVE 25 UP
MOVE 166 DOWN
DELETE 54
DELETE 4

Потом при нажатии кнопки это дело посылается скрипту, который уже и делает конечные манипуляции с БД.

Есть идеи? Может есть готовые решения?

Автор: Sardar 24.3.2005, 00:54
Значит не нужно просто передать данные на клиент, да так что бы под всеми браузерами, ты бы задачу полней выкладывал smile
Делай XML файл, в нём создавай все необходимые ноды. При работе используй XPath для выборок конкретных нод. Реализовывать это всё на JS в ручную запаришся smile

Код
if (document.implementation && document.implementation.createDocument)
        xmlDoc = document.implementation.createDocument("", "", null);
else {
       if (window.ActiveXObject) xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
       else {
        alert('Your browser can\'t handle this script');
        return;
    }
}

//теперь можем подгузить данные, но нам это не нужно, либо создать первые ноды в дереве юзая
//xmlDoc.loadXML("<treeroot></treeroot>");


Далее методами DOM редактируем дерево и XPath выборки.

Автор: izOne 24.3.2005, 01:59
Sardar Мне кажется предложенный вариант я не потяну: я в JS с трудом плаваюsmile
К тому же, по-моему, Gecko-браузеры ActiveX не поддерживают. Может я ошибаюсь.

smile Результатом сегоднящней работы стал следующий "шедевр":

Код

<HTML>
    <HEAD>
        <TITLE>Testing NestedSet WYSIWYG Editor</TITLE>
<script ="JavaScript">
function nsInit(){
    for (i = 0; i < document.forms.length; i++) {
        if(document.forms[i].onsubmit) continue;
        document.forms[i].onsubmit = function(e) {
            var form = e ? e.target : window.event.srcElement;
            nsFormSBMT();
            return false;
        }
    }
    rebuild();
}
</script>
    </HEAD>
<BODY onload="nsInit()">

<script ="JavaScript">
    function nsFormSBMT(){
        alert("onSubmit event");
    }
    var handlerURL = "/test/manageNS.php";
    var nsHTTPop = "";
    var ns = new Array();
        ns[0] = new Array();
        ns[0]['id']    = 0;
        ns[0]['left']    = 1;
        ns[0]['right']    = 18;
        ns[0]['level']    = 0;
        ns[0]['name']    = "0.0";
        ns[1] = new Array();
        ns[1]['id']    = 1;
        ns[1]['left']    = 2;
        ns[1]['right']    = 7;
        ns[1]['level']    = 1;
        ns[1]['name']    = "1.0";
        ns[2] = new Array();
        ns[2]['id']    = 2;
        ns[2]['left']    = 3;
        ns[2]['right']    = 4;
        ns[2]['level']    = 2;
        ns[2]['name']    = "1.1";
        ns[3] = new Array();
        ns[3]['id']    = 3;
        ns[3]['left']    = 5;
        ns[3]['right']    = 6;
        ns[3]['level']    = 2;        
        ns[3]['name']    = "1.2";
        
        ns[5] = new Array();
        ns[5]['id']    = 4;
        ns[5]['left']    = 8;
        ns[5]['right']    = 15;
        ns[5]['level']    = 1;    
        ns[5]['name']    = "2.0";        
        
        ns[4] = new Array();
        ns[4]['id']    = 5;
        ns[4]['left']    = 9;
        ns[4]['right']    = 10;
        ns[4]['level']    = 2;
        ns[4]['name']    = "2.1";
        
        ns[6] = new Array();
        ns[6]['id']    = 6;
        ns[6]['left']    = 11;
        ns[6]['right']    = 12;
        ns[6]['level']    = 2;                                
        ns[6]['name']    = "2.2";
        ns[7] = new Array();
        ns[7]['id']    = 7;
        ns[7]['left']    = 13;
        ns[7]['right']    = 14;
        ns[7]['level']    = 2;    
        ns[7]['name']    = "2.3";        
        ns[8] = new Array();
        ns[8]['id']    = 8;
        ns[8]['left']    = 16;
        ns[8]['right']    = 17;
        ns[8]['level']    = 1;
        ns[8]['name']    = "3.0";

function moveU(){
    var form = document.getElementById('nsNodesForm');
    var select = form.nsNodesSelect;
    idx = select.selectedIndex;
    //alert(idx);
    //alert(idx + ":" +ns[select.options[idx].value]['left']);
    if(idx !== -1){
        var debug = "";
        for(var i=0; i<idx; i++){// Цикл, т.к. могут перемещаться меню, у которых есть дети
            if(ns[select.options[i].value]['right'] == (ns[select.options[idx].value]['left']-1)){
                //alert("Можем перемещать");
                // Левая ветвь -->
                var x = this.ns[select.options[idx].value]['right'] - ns[select.options[i].value]['right'];
                var y = this.ns[select.options[idx].value]['left'] - ns[select.options[i].value]['left'];
                for(var m = i; m<idx; m++){
                    this.ns[select.options[m].value]['right'] = ns[select.options[m].value]['right'] + x;
                    this.ns[select.options[m].value]['left']     = ns[select.options[m].value]['left'] + x;
                }
                // Правая ветвь <--
                var n = (this.ns[select.options[idx].value]['right'] - this.ns[select.options[idx].value]['left']+1)/2;
                //alert("idx=" + idx + " | idx+n=" + (idx+n));
                for(var m = idx; m<idx+n; m++){
                    // mid
                    this.ns[select.options[m].value]['right']    = this.ns[select.options[m].value]['right'] - y;
                    this.ns[select.options[m].value]['left']    = this.ns[select.options[m].value]['left'] - y;
                }
                //select.options[1].style.selected = "selected";
                rebuild();
                return true;
            }else{
                continue
            }
        }
    }else{
        alert('Не выбран раздел');
    }
    alert('Перемещение вверх невозможно');
    rebuild();
    return false;
}
function rebuild(){
    this.ns.sort(cmp);
    var select = document.getElementById('nsNodesForm').nsNodesSelect;
    for(var i=0; i< ns.length; i++){
        select.options[i].text = this.ns[i]['name'] + "|=|" + ns[i]['left'] + "::" + ns[i]['right'] + "::" + ns[i]['level'];
        select.options[i].value = this.ns[i]['id'];            
    }
    //alert("Можем перемещать");
    return true;
}
function cmp(a, b){
    if (a['left'] > b['left'])
        return 1;
    if (a['left'] < b['left'])
        return -1;
    return 0;
}

function notice(msg){
    alert(msg);
}
</script>
<form name="nsNodes" id="nsNodesForm" target="">
    <select size=15 style="width: 200px; font-family: monospace;" name="nsNodesSelect">
        <option value="0">Root</option> <!-- 1:18 | 0-->
        <option value="1">1.0</option> <!-- 2:7 | 1-->
        <option value="2">--> 1.1</option><!-- 3:4 | 2 |-->
        <option value="3">--> 1.2</option><!-- 5:6 | 2 |-->
        <option value="4">2.0</option><!-- 8:15 | 1 | -->
        <option value="5">--> 2.1</option><!--9:10   | 2 | -->
        <option value="6">--> 2.2</option><!-- 11:12 | 2 |-->
        <option value="7">--> 2.3</option><!-- 13:14 | 2 |-->
        <option value="8">3.0</option><!-- 16:17 | 1 | -->
    </select>
    <br>
    <a onClick="moveU(); return false;" href="/">Вверх</a>&nbsp;|&nbsp;<a href="" onclick="rebuild(); return false;">Перестроить меню</a>
    <br><input type="submit" name="submit" value="Сохранить изменения" style="width: 200px"/>
</form>
</BODY>
</HTML>


Сначла все перемещается правильно, но потом дерево рушится. Если у кого-нибудь будет время и желание потестить и выловить баг - буду благодарен.

Автор: Sardar 24.3.2005, 02:08
Цитата(izOne @ 24.3.2005, 00:59)
Результатом сегоднящней работы стал следующий "шедевр":

Самому всё реализовывать не особо нужно smile Выборки из дерева, нормальное редактирование и т.п. ребром встанут, особенно когда при больших деревьях всё тормозить начнёт smile

Цитата(izOne @ 24.3.2005, 00:59)
К тому же, по-моему, Gecko-браузеры ActiveX не поддерживают. Может я ошибаюсь

Там два варианта, для мозиллы и для ИЕ. К счастью интерфейс у конечных обьектов одинаковый, обращаемся к xmlDoc.documentElement и вперёд, по стандартам DOM, как ты бы это сделал в любом другом языке.

С помощью XML документа будет проще, у тебя готовая структура, которую довольно просто редактировать. В конце генеришь по дерево код обратно, либо отсылаешь XML данные на сервер, что будет лучше.

Автор: Gorcer 6.4.2005, 12:19
Цитата(Sardar @ 24.3.2005, 02:08)
С помощью XML документа будет проще, у тебя готовая структура, которую довольно просто редактировать. В конце генеришь по дерево код обратно, либо отсылаешь XML данные на сервер, что будет лучше.


а вы немоглибы привести пример обращения к какойнибудь ветви или атрибуту ветви через DOM в javascript
Добавлено @ 12:22
какие там базовые методы, функции и атрибуты?

Автор: Aliance 6.4.2005, 12:47
Gorcer
http://www.adaptivepath.com/publications/essays/archives/000385.php (за ссылку говори спасибо Sardar)
Добавлено @ 12:51
Еще полещно почитать официальную доку:
http://support.microsoft.com/default.aspx?scid=kb;en-us;234486
http://support.microsoft.com/default.aspx?scid=kb;en-us;285081

Автор: Sardar 6.4.2005, 18:56
Gorcer создавай новый топик с отдельными вопросами smile
Aliance поддержка XML и обьект XMLHTTPRequest это немного разные вещи, второй используется для коммуникаций клиента с сервером.

Gorcer те же методы(document.createElement и т.п.) что и в HTML документе + поддержка XPath. Подзагрузка документов: http://www.quirksmode.org/dom/importxml.html, получаем обьект Document, затем отркываем: http://www.w3.org/DOM/ и читаем что же можно со всем этим сделать.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)