Почему моя таблица данных YUI не отображается правильно в IE? - PullRequest
Новая
       12

Почему моя таблица данных YUI не отображается правильно в IE?

0 голосов
/ 20 марта 2009

У меня настроена таблица данных YUI, в которой содержится около 90 строк данных, и я хочу, чтобы пользователь упорядочил столбцы по своему усмотрению, а затем распечатал страницу.

У меня есть все настройки YUI, и они прекрасно работают. Однако при печати он удаляет все цвета и играет с макетом таблицы.

Я добавил это: 

[
H1 { 
    text-align: center 
}

.hideOnPrint { visibility: hidden; display: none; }

.yui-skin-sam .yui-dt table {
    font-size:10px;
    border:1px solid #808080;
    border-collapse:collapse;border-spacing:1;
}
.yui-skin-sam .yui-dt thead {
    text-align:center;
    font-family:"Lucida Grande","Verdana",sans-serif;
    font-size:12px;
    font-weight:bold;
    font-style:italic;
    display: table-header-group;
}

.yui-skin-sam tr {
    border:1px solid #888888;
}
]

Теперь он хорошо печатается в Firefox 3, однако в IE7 он не работает.

Firefox 3 берет таблицу, которая имеет длину около 1,5 страниц, и разделяет ее на 2/3 на одну страницу и 1/3 на другую, обе страницы имеют заголовки, заголовки и правильно отформатированы.

В IE7 он разрезает данные пополам и дублирует первую половину данных на обеих страницах.

Я не уверен, что это из-за разметки YUI, или если IE нужны какие-то специальные настройки, или что.

это страница: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Intercom List</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" />

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
    margin:0;
    padding:0;
}

H2 { 
    font-size: 10px;
    font-style: italic;
 }


/* basic skin styles */
.yui-skin-sam .yui-dt table {
    filter: alpha(opacity=100);margin:0;padding:2,3,2,3;text-align:center;font-family:"Lucida Grande","Verdana",sans-serif;font-size:11px;border-collapse:separate;*border-collapse:collapse;border-spacing:0;}
.yui-skin-sam .yui-dt thead {border-spacing:0;border:none;border-right:0px solid #CBCBCB;} /* for safari bug */
.yui-skin-sam .yui-dt caption {padding-bottom:0em;text-align:left;}

.yui-skin-sam tr.yui-dt-even { background-color:#DFD2C2; } /* white */
.yui-skin-sam tr.yui-dt-odd { background-color:#F3ECE4; } /* light blue */
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color:#D3C7B8; } /* light blue sorted EDF5FF */
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-odd td.yui-dt-desc { background-color:#E0D9D2; } /* dark blue sorted DBEAFF */

</style>

 <STYLE type="text/css" media="print">
 H1 { 
    text-align: center 
}

.hideOnPrint { visibility: hidden; display: none; }

.yui-skin-sam .yui-dt table {
    font-size:10px;
    border:1px solid #808080;
    border-collapse:collapse;border-spacing:1;
}
.yui-skin-sam .yui-dt thead {
    text-align:center;
    font-family:"Lucida Grande","Verdana",sans-serif;
    font-size:12px;
    font-weight:bold;
    font-style:italic;
    display: table-header-group;
}

.yui-skin-sam tr {
    border:1px solid #888888;
}
</STYLE>



<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
.yui-skin-sam .yui-dt-liner { white-space:nowrap; } 
</style>

<!--end custom header content for this example-->

</head>

<body class="yui-skin-sam">

<h1>INTERCOM List</h1>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div class="hideOnPrint"> <h2>Order List by clicking on the column header, resort the list by clicking and dragging the column header, resize the column by clicking on the devider line and dragging left or right.</h2></div>

<div id="intercomList"></div>

<script type="text/javascript" src="employee data.js"></script>

<script type="text/javascript">

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Basic = function() {

        var sortLastName = function(a, b, desc) {
            // Deal with empty values
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            }
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }

            // First compare by lastname
            var comp = YAHOO.util.Sort.compare;
            var compState = comp(a.getData("lastname"), b.getData("lastname"), desc);

            // If states are equal, then compare by firstname
            return (compState !== 0) ? compState : comp(a.getData("firstname"), b.getData("firstname"), desc);
        };


        var sortFirstName = function(a, b, desc) {
            // Deal with empty values
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            }
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }

            // First compare by firstname
            var comp = YAHOO.util.Sort.compare;
            var compState = comp(a.getData("firstname"), b.getData("firstname"), desc);

            // If states are equal, then compare by lastname
            return (compState !== 0) ? compState : comp(a.getData("lastname"), b.getData("lastname"), desc);
        };


        var sortBuildingName = function(a, b, desc) {
            // Deal with empty values
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            }
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }

            // First compare by firstname
            var comp = YAHOO.util.Sort.compare;
            var compState = comp(a.getData("building"), b.getData("building"), desc);

            var compState2 = (compState !== 0) ? compState : comp(a.getData("firstname"), b.getData("firstname"), desc);

            // If states are equal, then compare by lastname
            return (compState2 !== 0) ? compState2 : comp(a.getData("lastname"), b.getData("lastname"), desc);
        };

        var sortCompanyName = function(a, b, desc) {
            // Deal with empty values
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            }
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }
            // First compare by firstname
            var comp = YAHOO.util.Sort.compare;
            var compState = comp(a.getData("company"), b.getData("company"), desc);

            var compState2 = (compState !== 0) ? compState : comp(a.getData("firstname"), b.getData("firstname"), desc);

            // If states are equal, then compare by lastname
            return (compState2 !== 0) ? compState2 : comp(a.getData("lastname"), b.getData("lastname"), desc);
        };



        var myColumnDefs = [
            {key:"extension", width: 65, sortable:true, resizeable:true},
            {key:"firstname", width: 100, sortOptions:{sortFunction:sortFirstName}, sortable:true, resizeable:true},
            {key:"lastname", width: 100, sortOptions:{sortFunction:sortLastName}, sortable:true, resizeable:true},
            {key:"company", width: 100, sortOptions:{sortFunction:sortCompanyName}, sortable:true, resizeable:true},
            {key:"building", width: 100, sortOptions:{sortFunction:sortBuildingName}, sortable:true, resizeable:true}
        ];

        var myDataSource = new YAHOO.util.DataSource(YAHOO.Data.employees);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        myDataSource.responseSchema = {
            fields: ["extension","firstname","lastname","company","building"]
        };

        var myDataTable = new YAHOO.widget.DataTable("intercomList",
                myColumnDefs, myDataSource, {draggableColumns:true});

        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>

Это файл данных сотрудника: 

YAHOO.Data = {
    employees: [
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"},
        {extension:"265", firstname:"firstname", lastname:"lastname", company:"company", building:"st addresss"}
    ]
}

Ответы [ 2 ]

0 голосов
/ 07 января 2010

По умолчанию фоновые изображения и цвета будут отключены во всех браузерах. Просто включите его после этого он будет печатать правильно.

С уважением Кайлаш Кумар П E-mail: kailashkumarp@gmail.com

0 голосов
/ 20 марта 2009

Вы пытались указать конкретную таблицу стилей печати?

Кстати, вероятно, лучше связать с рабочей версией кода, чем ожидать, что пользователи stackoverflow воссоздают локально.

...