0

人気のあるJQueryDatatablesプラグインと、それに対応するRowReorderingプラグインを使用しています。

データテーブルにはスクロールバーが含まれています。

IE8で問題が発生し、行を下から上にドラッグしようとしてもスクロールバーが移動しません。これはChromeとFirefoxで正常に機能し、IEでJSコンソールエラーを生成しません。私はこれをトラブルシューティングする方法について少し途方に暮れているので、始める方法について何かアドバイスをいただければ幸いです。

以下は私のデータテーブルの設定です。

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.blockUI.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.cookie.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.core.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.tabs.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.accordion.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.autocomplete.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.position.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.dataTables.js"></script>    
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.sortable.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.ui.custom.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/javascript/jquery/jquery.dataTables.rowReordering.js"></script>
<title>Test reordering</title>
</head>
<body>
    <body onload="setupTables() ;">
    <div id="myDiv" style="height:250px; border:1px; color: blue">
        <table id="myTable">
            <thead>
                <tr>
                    <th>Element Heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Element 1</td>
                </tr>
                <tr>
                    <td>Element 2</td>
                </tr>
                <tr>
                    <td>Element 3</td>
                </tr>
                <tr>
                    <td>Element 4</td>
                </tr>
                <tr>
                    <td>Element 5</td>
                </tr>
                <tr>
                    <td>Element 6</td>
                </tr>
                <tr>
                    <td>Element 7</td>
                </tr>
                <tr>
                    <td>Element 8</td>
                </tr>
                <tr>
                    <td>Element 9</td>
                </tr>
                <tr>
                    <td>Element 10</td>
                </tr>
            </tbody>    
        </table>
    </div>
    <script type="text/javascript"> 
        function setupTables() {
            /* $('#myTable').dataTable({
                "sScrollY":"10px",
                "sScrollX":"10px",
                "bScrollCollapse":false,
                "bRetrieve":false,
                "bProcessing":false,
                "bDestroy":true,
                "bServerSide":false,
                "bPaginate":false,
                "bLengthChange":true,
                "bFilter":false,
                "bSort":true,
                "bInfo":false,
                "bAutoWidth":true,
                "bJQueryUI":true,
                "aoColumns":[
                    null,
                    null,
                    null,
                    null,
                    null,
                    null,
                    null,
                    null ]
            });*/ 
            $('#myTable').dataTable({
                "sScrollY":"200px",
                "sScrollX":"1050px",
                "bScrollCollapse":false,
                "bRetrieve":false,
                "bProcessing":false,
                "bDestroy":true,
                "bServerSide":false,
                "bPaginate":false,
                "bLengthChange":true,
                "bFilter":false,
                "bSort":true,
                "bInfo":false,
                "bAutoWidth":true,
                "bJQueryUI":true

            }).rowReordering();
        } 

    </script>
</body>
</html>
4

2 に答える 2

0

いくつかのコード例またはスタイルシートを提供すると役立ちます。おそらくそれはjavascriptではなくCSSです。

div要素のスクロールバーでは、幅と高さを定義する必要があります。

于 2012-09-17T15:54:09.630 に答える
0

この問題に対して私が見つけた唯一の「解決策」は、スクローラープラグインを含めることでした。これに続いて、スクロールはIEで正しく機能しました。バグトラッカーで問題を開きます

于 2012-09-21T20:36:46.343 に答える