Question

我有一个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"}
    ]
}

Answer 1

您是否尝试过指定特定的打印样式表？

BTW，Prob更好地链接到代码的工作版本，而不是期望stackoverflow用户在本地重新创建。

Answer 2

默认情况下，将在所有浏览器中禁用背景图像和颜色。只需启用它之后它会正确打印。

此致凯拉什库马尔电子邮件：kailashkumarp@gmail.com

为什么我的YUI数据表在IE中无法正确显示？

2 个答案: