Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Последние сообщения
Тема закрыта
1

Многоуровневые сортируемые списки

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#1
В общем можете почитать статейку на морде и поймете о чем речь. Так вот как используя это сделать многоуровневые сортируемые списки? Я проепался пол ночи, но удалось сделать только подобие. То что я хочу увидеть в конечном счете можно увидеть на юкозе в редактировании меню. Я хочу сделать такой же редактор меню для Фапоса.

На идею натолкнул r00t_san.

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

r00t_san

  • ДиЗиГнЕр
  • Пользователь
  • 169
  • Репутация:11 
  • Предупреждения: 0 
  • Регистрация:
    2 Окт 2010
#2
Я конечно не гуру PHP но у меня работало примерно все вот так:
1. В хтмл:
Code:
<div id='group' class='group'></div>
<script>showgroup();</script>

2. Java
Code:
//показать группы
function showgroup()
{
    $.ajax
    ({
        type: "POST",
        url: "/group.html",
        data: "showgroup=1",
        success: function(html)
        {
            $("#group").append(html);
            $("#group").fadeIn('slow');
        }
    });
}


function groupadd()
{
    document.getElementById('gradd').innerHTML = "<div style='float:left;'><a href='#' onclick='groupclose()'><img src='/images/minus_18.gif' border='0'></a></div><input type='text' id='newgroup'>";
    $("#gradd").fadeIn('slow');
}

//добавить группы
function addgrsub()
{
    $("#gradd").fadeOut('slow');
    var grname = $('#newgroup').val();
    $.ajax
    ({
        type: "POST",
        url: "/group.html",
        data: "addgroup=1"+"&grname="+grname,
        success: function(html)
        {
            $("#newgrapp").append(html);
            $("#newgrapp").fadeIn('slow');
        }
    });
}

//удалить группу
function groupdel(id)
{
    if(!confirm('Вы уверенны что хотите удалить группу?')) 
    {
        return false;
    }
    $("#grid_"+id).fadeOut('slow');
    $.ajax
    ({
        type: "POST",
        url: "/group.html",
        data: "delgroup=1"+"&id="+id,
        success: function(html)
        {}
    });
    if (id = '1')
    {
        $("#grid_"+id).fadeIn('slow');
    }
}

function groupclose()
{
    $("#gradd").fadeOut('slow');
}

3. Пыха
Code:
if ($_POST['showgroup']=='1')
    {
    showgroup();
    }

    if ($_POST['addgroup']=='1')
    {
    addgroup();
    }

    if ($_POST['delgroup']=='1')
    {
    delgroup();
    }


    // функкция сортировки в БД
    if ($_POST['update'] == "update"){

    $str2 = $_POST['gr'];
    $str=str_replace (',newgrapp,','',$str2);
    $array = explode(',', $str);

    $categories = array();
    foreach ($array as $value) {
         if (strpos($value, 'grid_') !== false) {
              $categories[$value] = array();
              $category = &$categories[$value];
              continue;
         }
        $category[] = $value;
    }

    foreach ($categories as $key => $value) {
          foreach ($value as $id) {

    $group=str_replace ('grid_','',$key);
    $nid=str_replace ('gr_','',$id);
    $query = "UPDATE news SET `group` = " . $group . " WHERE id = " . $nid;
    mysql_query($query) or die('Error, insert query failed');
         }
    }
    }

    // функкция показа групп
    function showgroup ()
    {
    echo "
    <script>
    $(document).ready(function()
    {
    $(function()
    {
    $(\"#list\").sortable({ opacity: 0.8, cursor: 'move', update: function()
    {
    var order = $(this).sortable('serialize');
    var order2 = $(this).sortable('toArray');
                        $.ajax({
                        type: \"POST\",
                        url: \"/group.html\",
                        data: \"update=update\"+\"&grid=\"+order+\"&gr=\"+order2,
                        success: function(html){
                            $(\"#list\").append(html);
                        }
                    });
            }
            });
        });

    });
    </script>
    ";
    echo "<div style='float:left;'><a href='#' onclick='groupadd()'><img src='/images/plus_18.gif' border='0'></a></div>
    ";
    echo "<div class='gr1' id=\"list\">";
    $grnsql = "SELECT * FROM news_g  ORDER BY id";
    $grncon = mysql_query ($grnsql);
    while($row = mysql_fetch_array($grncon))
    {
    echo "<div class='gr' id='grid_".$row['id']."'>";

    if ($row['id'] == '1')
    {echo "<div style='float:left;'><img src='/images/grbl.png' border='0' width='15'></div>";}
    else
    {
    echo "<div style='float:left;'><a href='#' onclick='groupdel(".$row['id'].")'><img src='/images/minus_18.gif' border='0' width='15'></a></div>";
    }
    echo "&nbsp&nbsp&nbsp<a href='#' ondblclick='newsonly(".$row['id'].");'>".$row['name']."</a></div>
    ";

    $grsql = "SELECT `name`, `ico`, `group`,`id` FROM news WHERE `group`='".$row['id']."' ORDER BY ico ASC";
    $grcon = mysql_query ($grsql);


    while($row = mysql_fetch_array($grcon))
    {
    echo "<div class='gr_all' id='gr_".$row['id']."'><a href='".$row['id']."' class='gr_link'>
    <div class='gr_ico'><img src='".$row['ico']."' width='20' absalign='top' border='0'></div>
    <div class='gr_text'>|| ".$row['name']."</div></a></div>";
    }
    }
    echo "<div class='gr' id='newgrapp' style='display:none;'></div>";
    echo "";

    echo "
    <form action='javascript://addgrsub()'><div id='gradd' class='gradd'></div><input type='submit' onclick='addgrsub()' style='display:none;'></form>";
    }

    // функкция добавлениея групп
    function addgroup ()
    {
        $grname = strip_tags(iconv('utf-8','utf-8',$_POST['grname']));
        mysql_query("INSERT INTO news_g (name) VALUES ('$grname')");
        $grsql = mysql_query ("SELECT * FROM news_g ORDER BY id DESC");
        $grcon = mysql_fetch_array ($grsql);
        echo "".$grcon['name']."<br>";
    }

    // функкция удаления групп
    function delgroup ()
    {
        $id = intval($_POST['id']);
        if ($id == '1')
        {echo "Главную группу удалить нельзя.";}
        else
        {
    $grdelsql = mysql_query ("SELECT count(*) as count FROM news WHERE `group`='".$id."' ORDER BY ico ASC");
    $grdelcon = mysql_fetch_array ($grdelsql);
    if ($grdelcon['count'] > '1'||$grdelcon['count'] == '1')
    {
        mysql_query("UPDATE news SET `group`=1 WHERE `group` = $id");
        mysql_query("DELETE FROM news_g WHERE id=$id");
    } else {
        mysql_query("DELETE FROM news_g WHERE id=$id");
        }
        }
    }

5. group.html к которому обращается ява прописан в htaccess
RewriteRule ^(.*)group.html$ engine/functions/group.class.php [L,QSA]

Отредактировано автором 21 Июл 2011
Если где то нет чего то значит что то где то есть.

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#3
а я что-то не понял. Где тут многоуровневость? ))

Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)

skad0

  • Атом-мозг
  • Юзер
  • 841
  • Репутация:10 
  • Предупреждения: 0 
  • Регистрация:
    2 Окт 2010
#4
Цитата
2. Java

javascript
не путай.

Drunya

  • Man of God
  • Админ
  • 3527
  • Репутация:110 
  • Предупреждения: 0 
  • Регистрация:
    30 Ноя -0001
#5
В общем сделал так.

Сортируемые многоуровневые списки на JavaScript

1. Подключаем JQuery и плагин Sortable

Code:
<script language="JavaScript" type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>


2. Инициализируем сортируемый список
Code:
<script type="text/javascript">
$(function(){
    $('#sort').sortable({
        items:"li",
        appendTo:"ul",
        placeholder:"plholder",
        update:function(){
            //alert(ui.item);
        },
    });
});
</script>



3. Сам список
Code:
<ul id="sort" class="ui-sortable">
    <li>
        <div class="item">1111</div>
        <ul>
            <li>
                <div class="item">111222</div>
                <ul>
                    <li></li>
                </ul>
            </li>
            <li></li>
        </ul>
    </li>
    <li>
        <div class="item">222</div>
        <ul>
            <li>
            <div class="item">222111</div>
                <ul>
                    <li></li>
                </ul>
            </li>
            <li></li>
        </ul>
    </li>
    <li>
        <div class="item">3333</div>
        <ul>
            <li>
                <div class="item">333111</div>
                <ul>
                    <li></li>
                </ul>
            </li>
            <li></li>
        </ul>
    </li>            
</ul>

Отредактировано автором 27 Июл 2011
Я горжусь тем, что создал бесплатную CMS - AtomX. И люблю нашу команду)
1
Сейчас online: 177. Зарегистрированных: 1. Гостей: 176.