0

我们正在使用流行的 JQuery Datatables 插件以及相应的Row Reordering插件。

我们的数据表包含一个滚动条。

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 回答