VPF::помогите просто отсортировать

anurbol

Дата 31.5.2007, 09:50 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 106
Регистрация: 30.5.2007
Где: Алматы, Казахстан

Репутация: нет
Всего: нет

Здравствуйте! Я хочу реализовать(желательно аяксом) такое чудо:
Человек нажимает на шапку одного из нескольких полей и таблица сортируется по значениям этого поля - по убыванию. Вроде несложно... но незнаю совсем как сделать. И еще. Можно попроще объяснить ?

vasac

Дата 31.5.2007, 10:39 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1060
Регистрация: 4.5.2006

Репутация: 13
Всего: 36

Таблица одностраничная? Тогда ajax тут нипричем.
Да и вообще ничего сложного. Пройтись по строкам, вытащить значения в нужном столбце, отсортировать по ним строки.
Есть какие-то свои мысли, наработки, более конкретные вопросы?

--------------------

Блог ГО | Таблица символов юникода

dstorm81

Дата 31.5.2007, 19:02 (ссылка)

(голосов:1)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

для начала
http://forum.vingrad.ru/forum/topic-104050.html

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

anurbol

Дата 3.6.2007, 23:15 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 106
Регистрация: 30.5.2007
Где: Алматы, Казахстан

Репутация: нет
Всего: нет

Спасибо большое, вот только это всего лишь поверхность айсберга. Там я в 3 комментариях написал три задачи:

Код


<html>
<head>
<title>Table test</title>
    <script type="text/javascript">
    /**
        created by Tjomi4
        19.08.2006
        version $1.2
    */
        var dsc=false;
        var selectedCol=0;
        var selectedCel="";
        function sortData(col,obj){
            selectedCol=col;
            var rowCount=document.getElementById(obj).getElementsByTagName("tr");
            var colContentArray=new Array();
        
            for(i=0;i<rowCount.length;i++)
                colContentArray[i]=rowCount[i];
            
            if(dsc){
                colContentArray=colContentArray.sort(doCompareDCS);    
                dsc=false;            
            }else{
                colContentArray=colContentArray.sort(doCompareASC);
                dsc=true;
            }
            
            elemTbody=document.createElement("tbody");
            
            for(r=0;r<colContentArray.length;r++)
                    elemTbody.appendChild(colContentArray[r]);                
            elemTable=document.getElementById(obj);
            elemTable.removeChild(elemTable.getElementsByTagName("tbody")[0]);
            elemTable.appendChild(elemTbody);
    
        }
            
        function doCompareDCS(a,b){            
            resA=getCellValue(a);
        resB=getCellValue(b);
        
            if (resA<resB) return 1;
            if (resA>resB) return -1;
            return 0;
        }
                
        function doCompareASC(a,b){
            resA=getCellValue(a);
        resB=getCellValue(b);
            if (resA<resB) return -1;
            if (resA>resB) return 1;
            return 0;
        }
        
        function getCellValue(elem){
            cellValue=elem.childNodes[selectedCol].firstChild;
            val=null;
            
        if(cellValue.nodeType!=3)
         val=cellValue.firstChild.nodeValue;                
        else
         val=cellValue.nodeValue;    
      if (!isNaN(val))    
         return Number(val);
     else
         return val;
        }
        
        function selectDadaGridCel(event){
                cel=event.target||event.srcElement;    
                if (cel.nodeName=="TD"){                
                    if (selectedCel!=""){
                        selectedCel.className="";
                    }
                    selectedCel=cel;            
                    cel.className="selectedCel";
                }
        }
        
        function selectRowMouseMove(event){
            cel=event.target||event.srcElement;
            rowSel=cel.parentNode;
            if (rowSel.nodeName=="TR"){
                rowSel.className="selectedRow";
            }
        }
        function rowMouseOut(event){
            cel=event.target||event.srcElement;
            rowSel=cel.parentNode;
            if (rowSel.nodeName=="TR"){
                rowSel.className="";
            }
        }
    </script>
    <style>
        .dataGrid{
            
        }
        .dataGrid_header{            
            background-color: #f5f5f5;
            border-collapse:collapse;
            font: normal 12px arial;
        }
        .dataGrid_header td {
            border: solid 1px #787878;
        }
        .dataGrid_body{
            border-collapse:collapse;
            background-color: #f5f5f5;
            font: normal 13px arial;
        }
         .dataGrid_body td{           
           border: solid 1px #787878;       
         }
         .selectedCel{
                background-color: #002266;
                font: normal 12px arial;
                color:#ffffff;
         }
            
            .selectedRow{
                background-color:#00BFFF;
            }
        .dataGrid_scrollBox{
            SCROLLBAR-FACE-COLOR: #e9e9e9; 
            SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
            SCROLLBAR-SHADOW-COLOR: #e9e9e9;
            SCROLLBAR-3DLIGHT-COLOR: #dbdbdb;
            SCROLLBAR-ARROW-COLOR: #787878; 
            SCROLLBAR-TRACK-COLOR: #f5f5f5; 
            SCROLLBAR-DARKSHADOW-COLOR: #aeaeae; 
            overflow:scroll;
        }
    </style>
</head>
    <body>
        <table cellpadding="0" cellpadding="0" border="0" width="100%" class="dataGrid">
            <tbody>
                <tr>
                    <td>
                        <table border="0" width="100%" cellpadding="0" cellspacing="0" class="dataGrid_header" >
                            <col width="20%"/><col width="20%"/><col width="20%"/><col width="20%"/>
                            <tbody>
                                <tr align="center" style="cursor:pointer">
                                    <td onClick="sortData(0,'dataGrid')">ãîä</td><td onClick="sortData(1,'dataGrid')">ôàìèëèÿ</td><td onClick="sortData(2,'dataGrid')">öåíà</td>
                                    <td onClick="sortData(3,'dataGrid')">Очки(рейтинг)</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                    <td width="14"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div style="overflow:hidden;height:130px">
                          <div style="height:146px" class="dataGrid_scrollBox">
                                <table id="dataGrid" border="0" width="100%" cellpadding="0" cellspacing="0" class="dataGrid_body" bordercolor="000000" onClick="selectDadaGridCel(event)" onMouseMove="selectRowMouseMove(event)" onMouseOut="rowMouseOut(event)">
                                    <col width="20%"/><col width="20%"/><col width="20%"/><col width="20%"/>
                                    <tbody>
                                        <tr onClick="alert('examle:inoke ajax')"><td>1956</td><td>Áèðþ÷åâ</td><td>1112.6</td><td>1</td></tr>
                                        <tr><td>2006</td><td>a</td><td>1.2</td><td>89</td></tr>
                                        <tr><td><a href="jhkjhkj">1998
                                          <!--При нажатии сюда что-нибудь открывается, где можно менять значение и оставлять факт (ссылка, какой-нибудь аргумент), подтверждающий правильность этого значения. Данные должны заноситься в БД. А также при наведении на сцылку должны выводиться эти самые аргументы и комментарии  -->
                                        </a></td>
                                        <td><a href="#">a
                                          <!--При наведении выводится комментарий с историей обьекта, с его кратким описанием. Причем этот комментарий можно менять зайдя по ссылке. Зайдя по ссылке внутри должно быть что-то вроде форума или блога, то есть нужно видеть не только последнее изменение, но и предыдущие. Как вам задачка? -->
                                        </a></td>
                                        <td>1.9</td><td>81</td></tr>
                                        <tr><td>1845</td><td>a</td><td>114.8</td><td>83</td></tr>
                                        <tr><td>1945</td><td>Òð</td><td>3.6</td><td>806</td></tr>
                                        <tr><td>2001</td><td>Ô</td><td>3.1</td><td>6</td></tr>
                                        <tr onClick="alert('examle:inoke ajax')"><td>1956</td><td>Áèðþ÷åâ</td><td>1112.6</td><td>1</td></tr>
                                        <tr><td>2006</td><td>a</td><td>1.2</td><td>89</td></tr>
                                        <tr><td>1998</td>
                                        <td>a</td><td>1.9</td><td>81</td></tr>
                                        <tr><td>1845</td><td>a</td><td>114.8</td><td>83</td></tr>
                                        <tr><td>1945</td><td>Òð</td><td>3.6</td><td>806</td></tr>
                                        <tr><td>2001</td><td>Ô</td><td>3.1</td><td>6</td></tr>
                                    </tbody>
                                </table>
                                <!--а при нажатии на эту ячейку, зарегистрированный пользователь смог бы поставить свой голос сюда. Два голоса нельзя добавлять, только один, можно только в другую ячейку поставить голос, при этом из этой он уберется. Естественно тут все из базы данных. вот -->
                            </div>
                        </div>
                    </td>
                <tr>
            <tbody>
        </table>
    </body>
</html>

dstorm81

Дата 4.6.2007, 07:41 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

2 anurbol почему то уверен на 87%, что тебе БОЛЬШЕ помогать не будут
включи мозг и ДУМАЙ, ДУМАЙ и еще раз ДУМАЙ
когда приведешь код который будет неправильно работать, то тогда добро пожаловать опять

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

anurbol

Дата 4.6.2007, 18:38 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 106
Регистрация: 30.5.2007
Где: Алматы, Казахстан

Репутация: нет
Всего: нет

спасибо. просто я всего 2 недели назад начал изучать хтмл, не говоря о других. А сайт нужно делать СРОЧНО. Вот я и ищу все наиболее быстрые пути решения задачи. Я тоже на 90 процентов уверен что с этими задачами мне не будут помогать, потому что слишком сложные. Возможные, но сложные. Вот как мне быть, если макс. через месяц сайт должен быть готов? Начать с основ? Мне кажется на то, чтобы самому до этого допереть, будучи нулем в веб-программировании нужно не меньше месяца:( А не сделаю сайт - мне пипец.(долгая история, не спрашивайте)

SelenIT

Дата 4.6.2007, 19:45 (ссылка)

(голосов:1)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

anurbol, без паники, все осуществимо. Просто разбивайте задачи на более мелкие. Скажем, добавление "фактов" и комментариев: сначала сделайте его обычным способом - с перезагрузкой всей страницы и отдельным файлом для формы, потом добавьте форму в основную страницу и сделайте скрипт ее скрытия-показа, потом замените обычную отправку формы на AJAX. С голосованием можно наоборот - сначала сделать Javascript, запоминающий выбор (напр., в глобальной переменной) и отображающий его визуально, а затем добавить туда отсылку этой переменной AJAX-ом на сервер...

База данных, насколько я понимаю, уже есть, или ее еще нужно проектировать?

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

vasac

Дата 5.6.2007, 07:03 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1060
Регистрация: 4.5.2006

Репутация: 13
Всего: 36

anurbol, т.е. ты подрядился делать кому-то сайт, не зная абсолютно ничего? С уверенностью в том, что на форумах это сделают за тебя?

--------------------

Блог ГО | Таблица символов юникода

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »