Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Помогите с resize-ом столбцов таблыцы 
:(
    Опции темы
GrafF812
Дата 27.8.2010, 00:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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



Amphiluke, спасибо Вам большое Вы мне очень сильно помогли.
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 08:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Оказывается, по-видимому, что таскание сплиттеров получалось не с первого раза из-за того, что событие mousemove сменялось в FF и IE событием drag! В Opera такое событие, кажется, не поддерживается, поэтому там работало нормально.

В общем, вот последний на текущий момент наиболее стабильный вариант со сплиттерами
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
     div.cDrag div {
        /*background: repeat scroll 0 0 transparent;*/
        background: red;
        cursor:col-resize;
        display:block;
        height:24px;
        position:absolute;
        width:5px;
        border: 1px dotted #000000;
}
</style>
<script type="text/javascript">
    var inDrag = false;
    var splitter = null;
    function registerHandler(obj, evntDOM, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evntDOM, handler, false);
        } else {
            obj.attachEvent("on" + evntDOM, handler);
        }
    }
    function getTruthPos(obj) {
        var x = 0;
        while (obj) {
            x += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return x;
    }
    function moveSplitters() {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth).toString() + "px";
        }
    }
    function downHandler(e) {
        if (inDrag) return true;
        inDrag = true;
        splitter = (e.target) ? e.target : e.srcElement;
    }
    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var td = document.getElementById("resizeTbl").rows[0].cells[tdNo];
        var tdLeft = getTruthPos(td);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            td.style.width = newWidth.toString() + "px";
        }
        moveSplitters();
    }
    function moveHandler(e) {
        if (!inDrag) return true;
        if (!e) e = event;
        if (e.clientX > 2)
            splitter.style.left = (e.clientX - 2).toString() + "px";
    }
    function setResizeHandlers(e) {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        registerHandler(document, "mouseup", upHandler);
        registerHandler(document, "dragend", upHandler);
        registerHandler(document, "mousemove", moveHandler);
        registerHandler(document, "drag", moveHandler);
        registerHandler(document, "dragover", moveHandler);
        for (var i = 0; i < divs.length; i++) {
            registerHandler(divs[i], "mousedown", downHandler);
        }
        moveSplitters();
    }
    
    
    registerHandler(window, "load", setResizeHandlers);
</script>
</head>

<body>
     <div class="cDrag" style="top: 27px;" id="splitters">
        <div style="height: 70px; left: 109px;" id="_0"></div>
        <div style="height: 70px; left: 212px;" id="_1"></div>
        <div style="height: 70px; left: 315px;" id="_2"></div>
         <div style="height: 70px; left: 418px;" id="_3"></div>
    </div>
    <table border="2" rules="all" id="resizeTbl" style=" border-collapse: collapse;">
        <tr>
            <td>_____1.1_____</td>
            <td>_____1.2_____</td>
            <td>_____1.3_____</td>
            <td>_____1.4_____</td>
            <td>_____1.5_____</td>
        </tr>
        <tr>
            <td>_____2.1_____</td>
            <td>_____2.2_____</td>
            <td>_____2.3_____</td>
            <td>_____2.4_____</td>
            <td>_____2.5_____</td>
        </tr>
        <tr>
            <td>_____3.1_____</td>
            <td>_____3.2_____</td>
            <td>_____3.3_____</td>
            <td>_____3.4_____</td>
            <td>_____3.5_____</td>
        </tr>
    </table>
    <p id="test"></p>
</body>
</html>



Это сообщение отредактировал(а) Amphiluke - 27.8.2010, 09:24
PM   Вверх
GrafF812
Дата 27.8.2010, 11:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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



Amphiluke, Вы просто умничка спасибо Вам огромное. еще если Вам не трудно, подскажите как сделать так, чтобы ширина самой таблицы оставалась фиксированной (например 700 px), а при изменении ширины столбцов, эта дельта изменения ширины столбца всегда изменяла последний столбец. И можно ли так сделать чтобы при изменении ширины столбца - текст ячейки переносился ниже строчкой (в этой же ячейки)?

Добавлено через 5 минут и 14 секунд
Amphiluke, до Вас доходят мои приватные сообщения?

Это сообщение отредактировал(а) GrafF812 - 27.8.2010, 11:33
PM MAIL   Вверх
GrafF812
Дата 27.8.2010, 11:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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



Цитата(GrafF812 @  27.8.2010,  11:32 Найти цитируемый пост)
эта дельта изменения ширины столбца всегда изменяла последний столбец

т. е таким образом я хочу добиться того, чтобы остальные столбцы не меняли свою ширину - только последний. Если так можно?
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 11:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Цитата(GrafF812 @  27.8.2010,  15:32 Найти цитируемый пост)
при изменении ширины столбцов, эта дельта изменения ширины столбца всегда изменяла последний столбец.

Не понял. Какая дельта? Что получается, мы изменяем ширину, допустим, первого столбца, а в результате меняется ширина последнего?


Цитата(GrafF812 @  27.8.2010,  15:32 Найти цитируемый пост)
И можно ли так сделать чтобы при изменении ширины столбца - текст ячейки переносился ниже строчкой (в этой же ячейки)?

Для этого в содержимом текста ячеек должны быть пробелы, по которым можно будет сделать перенос.

Добавлено @ 11:58
Цитата(GrafF812 @  27.8.2010,  15:50 Найти цитируемый пост)
т. е таким образом я хочу добиться того, чтобы остальные столбцы не меняли свою ширину - только последний. Если так можно?

И как это можно у таблицы фиксированной ширины изменять ширину последнего столбца, не меняя ширину других?

Это сообщение отредактировал(а) Amphiluke - 27.8.2010, 12:01
PM   Вверх
GrafF812
Дата 27.8.2010, 12:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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



Цитата(Amphiluke @  27.8.2010,  11:52 Найти цитируемый пост)
Что получается, мы изменяем ширину, допустим, первого столбца, а в результате меняется ширина последнего
 Почти, смотрите когда мы меняет размер первого столбца, он меняет свою ширину. Но поскольку таблица должна быть фиксированной ширины (700-800 px), то ширина второго столбца станет меньше или больше (за счет изменения ширины первого). А мне нужно, чтобы ширина второго и соответственно других столбцов не менялась. Менялась бы ширина только последнего столбца  на эту дельту ширины изменения первого столбца. Надеюсь понятно объяснил  smile  

PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 12:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Вот заменить обработчик upHandler.
Код

function upHandler(e) {
    if (!inDrag) return true;
    inDrag = false;
    var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
    var tds = document.getElementById("resizeTbl").rows[0].cells;
    var widths = new Array();
    for (var i = 0; i < tds.length - 1; i++) {
        widths.push(tds[i].offsetWidth);
    }
    var tdLeft = getTruthPos(tds[tdNo]);
    var newWidth = getTruthPos(splitter) - tdLeft;
    if (newWidth > 0) {
        for (var i = 0; i < tds.length - 1; i++) {
            tds[i].style.width = (i == tdNo) ? newWidth.toString() + "px" : widths[i].toString() + "px";
        }
    }
    moveSplitters();
}


Добавлено через 46 секунд
И, разумеется, ширину табличке дать
Код

<table border="2" rules="all" id="resizeTbl" style=" border-collapse: collapse;" width="700">

PM   Вверх
GrafF812
Дата 27.8.2010, 12:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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



Amphiluke, да это именно то что мне нужно, только Вот знаете что я заметил, например если изменять ширину первого столбца, то все нормально, а если изменять ширину других столбцов, то при отпускании все предыдущие Div-ы перемещаются на небольшое расстояние 1-2 px, мне нужно чтобы они стояли не двигаясь. Вот попробуйте например потянуть за второй Div и перенести его скажем немного впрапво, после отпуская мыши первый див также сместиться немного вправо, таким образом ширина первой ячейки немного изменяется, а нужно чтобы он не менялся. smile 
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 13:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Ну так и вычесть эти два пикселя при позиционировании.
Код

divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth - 2).toString() + "px";



Вот, привожу состояние сценария на текущий момент. smile 
Код

    var inDrag = false;
    var splitter = null;
    function registerHandler(obj, evntDOM, handler) {
        if (obj.addEventListener) {
            obj.addEventListener(evntDOM, handler, false);
        } else {
            obj.attachEvent("on" + evntDOM, handler);
        }
    }
    function getTruthPos(obj) {
        var x = 0;
        while (obj) {
            x += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return x;
    }
    function moveSplitters() {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.left = (getTruthPos(tds[i]) + tds[i].offsetWidth - 2).toString() + "px";
        }
    }
    function downHandler(e) {
        if (inDrag) return true;
        inDrag = true;
        splitter = (e.target) ? e.target : e.srcElement;
    }
    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        var widths = new Array();
        for (var i = 0; i < tds.length - 1; i++) {
            widths.push(tds[i].offsetWidth);
        }
        var tdLeft = getTruthPos(tds[tdNo]);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            for (var i = 0; i < tds.length - 1; i++) {
                tds[i].style.width = (i == tdNo) ? newWidth.toString() + "px" : widths[i].toString() + "px";
            }
        }
        moveSplitters();
    }
    function moveHandler(e) {
        if (!inDrag) return true;
        if (!e) e = event;
        if (e.clientX > 2)
            splitter.style.left = (e.clientX - 2).toString() + "px";
    }
    function setResizeHandlers(e) {
        var divs = document.getElementById("splitters").getElementsByTagName("div");
        registerHandler(document, "mouseup", upHandler);
        registerHandler(document, "dragend", upHandler);
        registerHandler(document, "mousemove", moveHandler);
        registerHandler(document, "drag", moveHandler);
        registerHandler(document, "dragover", moveHandler);
        for (var i = 0; i < divs.length; i++) {
            registerHandler(divs[i], "mousedown", downHandler);
        }
        moveSplitters();
    }
    
    
    registerHandler(window, "load", setResizeHandlers);

PM   Вверх
GrafF812
Дата 27.8.2010, 13:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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



Amphiluke, Вы знаете, все равно если перемещать 2, 3 или 4 DIV не важно вправо или влево, то первый DIV все равно смещается вправо  smile 
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 13:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Да это сама ячейка чуть-чуть расширяется, а div уже подстраиваеися под нее. 

Короче, вот радикальный метод. smile 
Код

    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        var widths = new Array();
        for (var i = 0; i < tds.length - 1; i++) {
            if (tds[i].currentStyle) {
                widths.push(tds[i].currentStyle.width);
            } else {
                widths.push(getComputedStyle(tds[i], null).width);
            }
        }
        var tdLeft = getTruthPos(tds[tdNo]);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            for (var i = 0; i < tds.length - 1; i++) {
                tds[i].style.width = (i == tdNo) ? newWidth.toString() + "px" : widths[i].toString();
            }
        }
        moveSplitters();
    }


Добавлено через 1 минуту и 28 секунд
Блин, проверил только в FF. В остальных, похоже, не катит.  smile

Добавлено через 3 минуты и 12 секунд
Если бы таблица не пыталась сама подстроить размеры после каждого программного изменения ширины ячейки, было бы легче.

Добавлено через 6 минут и 11 секунд
FF возвращает вычисляемый стиль width нормально, в пикселях, а остальные — auto. Ррр.
PM   Вверх
GrafF812
Дата 27.8.2010, 13:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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



Amphiluke, а это как-то можно поправить?

Добавлено через 1 минуту и 43 секунды
Amphiluke, а может поставить для таблицы какой-нибудь fixed стиль, если такой имеется?

Добавлено через 5 минут и 9 секунд
GrafF812, Вы знаете я для таблицы поставил стиль table-layout: fixed вроде теперь нормально, посмотрите пожалуйста как у Вас?

Добавлено через 7 минут и 27 секунд
Цитата(GrafF812 @  27.8.2010,  13:45 Найти цитируемый пост)
Вы знаете я для таблицы поставил стиль table-layout: fixed

Только есть одна особенность: в IE и наверное других все работает нормально, только при условии что Вы хотя бы один раз переместили первый DIV, в противном случае не работает.)))) В чем интересно дело?

Добавлено через 10 минут и 55 секунд
Цитата(GrafF812 @  27.8.2010,  13:45 Найти цитируемый пост)
Только есть одна особенность: в IE и наверное других все работает нормально, только при условии что Вы хотя бы один раз переместили первый DIV

Новое наблюдение, нужно переместить первый и последний, тогда все работает.

Добавлено через 14 минут и 49 секунд
Цитата(GrafF812 @  27.8.2010,  13:45 Найти цитируемый пост)
Новое наблюдение, нужно переместить первый и последний, тогда все работает. 

Ну в общем если все DIV-вы передергать тогда все точно работает. А может быть нужно ячейкам присваивать фиксированные размеры, а то видимо браузер их понимает после инициализации, когда мы перемещаем Div-ы. Попробуйте пожалуйста эту идею smile 
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 14:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Методом бездумной подгонки можно подобрать значение поправки, чтобы работало как надо…
Код

    function upHandler(e) {
        if (!inDrag) return true;
        inDrag = false;
        var tdNo = parseInt(splitter.id.match(/_(\d+)/)[1]);
        var tds = document.getElementById("resizeTbl").rows[0].cells;
        var widths = new Array();
        for (var i = 0; i < tds.length - 1; i++) {
            widths.push(tds[i].clientWidth - 2);
        }
        var tdLeft = getTruthPos(tds[tdNo]);
        var newWidth = getTruthPos(splitter) - tdLeft;
        if (newWidth > 0) {
            for (var i = 0; i < tds.length - 1; i++) {
                tds[i].style.width = (i == tdNo) ? newWidth.toString() + "px" : widths[i].toString() + "px";
            }
        }
        moveSplitters();
    }

Без table-layout:fixed

Добавлено через 1 минуту и 10 секунд
 smile  smile 
PM   Вверх
GrafF812
Дата 27.8.2010, 14:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 3.12.2009

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



Цитата(Amphiluke @  27.8.2010,  14:00 Найти цитируемый пост)
Методом бездумной подгонки можно подобрать значение поправки, чтобы работало как надо…

Прошу прощения, а универсальным средством можно решить эту проблему? Начальная ширина ячеек не подойдет?
PM MAIL   Вверх
Amphiluke
Дата 27.8.2010, 14:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


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

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



Цитата(GrafF812 @  27.8.2010,  18:05 Найти цитируемый пост)
а универсальным средством можно решить эту проблему?

Это вы разрешения спрашиваете? Можно. Разрешаю. smile 

Цитата(GrafF812 @  27.8.2010,  18:05 Найти цитируемый пост)
Начальная ширина ячеек не подойдет?

Что это значит?


Все атрибуты типа offsetWidth, clientWidth дают ширину ячейки, варьирующую относительно CSS атрибута width на 1—2px. Хз, как еще извратиться, чтобы обойтись без подгоночной поправки.

Добавлено через 2 минуты и 46 секунд
Хотел сделать через вычисляемый стиль, а везде, кроме FF выходит width: auto
PM   Вверх
Страницы: (4) Все 1 [2] 3 4 
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0971 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.