Ширина столбца GridView - как остановить поведение «сжатие к размеру» - PullRequest
Новая
       7

Ширина столбца GridView - как остановить поведение «сжатие к размеру»

3 голосов
/ 19 декабря 2011

В настоящее время я пытаюсь реализовать GridView с замороженным заголовком.Я получил замороженный заголовок, используя JavaScript, найденный онлайн.Вот код: 

    var GridId = "<%=dgContacts.ClientID %>";
    var ScrollHeight = 180;
    var ScrollWidth = 700;
    window.onload = function () {
        enablePostLog();
        var grid = document.getElementById(GridId);
        var gridWidth = grid.offsetWidth;
        var headerCellWidths = new Array();
        for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
            headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
        }
        grid.parentNode.appendChild(document.createElement("div"));
        var parentDiv = grid.parentNode;

        var table = document.createElement("table");
        for (i = 0; i < grid.attributes.length; i++) {
            if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
            }
        }
        table.style.cssText = grid.style.cssText;
        table.style.width = gridWidth + "px";
        table.style.tableLayout = "fixed";
        table.appendChild(document.createElement("tbody"));
        table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
        var headerRow = table.getElementsByTagName("TH");

        var gridRow = grid.getElementsByTagName("TR")[0];
        for (var i = 0; i < headerRow.length; i++) {
            var width;
            if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                width = headerCellWidths[i];
            }
            else {
                width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
            }
            headerRow[i].style.width = parseInt(width - 3) + "px";
            gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
        }
        parentDiv.removeChild(grid);

        var dummyHeader = document.createElement("div");
        dummyHeader.setAttribute('id', 'divHeader');
        dummyHeader.style.cssText = "margin-left: auto; margin-right: auto; overflow: hidden; width: " + ScrollWidth + "px";
        dummyHeader.appendChild(table);
        parentDiv.appendChild(dummyHeader);
        var scrollableDiv = document.createElement("div");
        gridWidth = parseInt(gridWidth) + 17;
        scrollableDiv.setAttribute('id', 'divBody');
        scrollableDiv.style.cssText = "margin-left: auto; margin-right: auto; overflow: auto; height: " + ScrollHeight + "px; width: " + ScrollWidth + "px";
        scrollableDiv.appendChild(grid);
        scrollableDiv.onscroll = scrollHeader;
        parentDiv.appendChild(scrollableDiv);
    }

    function scrollHeader() {
        var header = document.getElementById('divHeader');
        var body = document.getElementById('divBody');
        header.scrollLeft = body.scrollLeft;
    }

У меня проблема в том, что GridView находится в div с фиксированной шириной.Стили ширины, добавленные в столбцы, игнорируются.

Окончательный HTML-код выглядит следующим образом: http://i.stack.imgur.com/xDzez.png

Фактически отображаемая таблица выглядит следующим образом (проблема наиболее заметна в столбцах «Вид» и «Уведомить»): http://i.stack.imgur.com/rA35z.png

Если я удаляю фиксированную ширину на внешнем элементе div, ширины столбцов исправляются, но, очевидно, я теряю прокручиваемость.Похоже, он пытается уменьшить пробелы в ячейках таблицы, чтобы попытаться вписаться в div.В этом нет необходимости из-за overflow: auto на внешнем div.Есть ли какой-нибудь стиль или что-то, что я могу добавить, чтобы браузер не делал этого?

1 Ответ

6 голосов
/ 21 декабря 2011

Оказывается, мне нужно table-layout: fixed И width: 100% для обеих таблиц. Я попробовал решение для разметки стола, но не понял, что ширина должна быть на 100%.

Финальный JavaScript: 

    var GridId = "<%=dgContacts.ClientID %>";
    var ScrollHeight = 180;
    var ScrollWidth = 700;
    window.onload = function () {
        enablePostLog();


        var grid = document.getElementById(GridId);
        var gridWidth = grid.offsetWidth;
        var headerCellWidths = new Array();
        for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
            headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
        }
        grid.parentNode.appendChild(document.createElement("div"));
        var parentDiv = grid.parentNode;

        var table = document.createElement("table");
        for (i = 0; i < grid.attributes.length; i++) {
            if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
            }
        }
        table.style.cssText = grid.style.cssText;
        table.appendChild(document.createElement("tbody"));
        table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
        var headerRow = table.getElementsByTagName("TH");

        var gridRow = grid.getElementsByTagName("TR")[0];
        for (var i = 0; i < headerRow.length; i++) {
            var width;
            if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                width = headerCellWidths[i];
            }
            else {
                width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
            }
            gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
            if (i == headerRow.length - 1) {
                width = width + getScrollBarWidth();
            }
            headerRow[i].style.width = parseInt(width - 3) + "px";
        }
        parentDiv.removeChild(grid);
        grid.style.tableLayout = "fixed";
        table.style.tableLayout = "fixed";
        grid.style.width = "100%";
        table.style.width = "100%";
        var dummyHeader = document.createElement("div");
        dummyHeader.setAttribute('id', 'divHeader');
        dummyHeader.style.cssText = "margin-left: auto; margin-right: auto; overflow: hidden; width: " + ScrollWidth + "px";
        dummyHeader.appendChild(table);
        parentDiv.appendChild(dummyHeader);
        var scrollableDiv = document.createElement("div");
        scrollableDiv.setAttribute('id', 'divBody');
        scrollableDiv.style.cssText = "margin-left: auto; margin-right: auto; overflow: auto; height: " + ScrollHeight + "px; width: " + ScrollWidth + "px";
        scrollableDiv.appendChild(grid);
        scrollableDiv.onscroll = scrollHeader;
        parentDiv.appendChild(scrollableDiv);
    }

    function scrollHeader() {
        var header = document.getElementById('divHeader');
        var body = document.getElementById('divBody');
        header.scrollLeft = body.scrollLeft;
    }

    function getScrollBarWidth() {
        var inner = document.createElement('p');
        inner.style.width = "100%";
        inner.style.height = "200px";

        var outer = document.createElement('div');
        outer.style.position = "absolute";
        outer.style.top = "0px";
        outer.style.left = "0px";
        outer.style.visibility = "hidden";
        outer.style.width = "200px";
        outer.style.height = "150px";
        outer.style.overflow = "hidden";
        outer.appendChild(inner);

        document.body.appendChild(outer);
        var w1 = inner.offsetWidth;
        outer.style.overflow = 'scroll';
        var w2 = inner.offsetWidth;
        if (w1 == w2) w2 = outer.clientWidth;

        document.body.removeChild(outer);

        return (w1 - w2);
    }
...