表格列交换,拖拽改变列宽效果

  表格可以拖拽更换每列循序,并且可以拖拽修改每列长度jquery插件。使用到了colResizable-1.3.min.js(更改列宽)和colExchange.js(拖拽交换列位置,并且扩展了2个方法removeCol删除列和addCol添加列API方法)这2个插件,效果如下。

表格列交换,拖拽改变列宽效果

  表格列交换,拖拽改变列宽示例,查看效果点击这里:表格列交换,拖拽改变列宽示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>表格列交换,拖拽改变列宽示例</title>  
<link rel="stylesheet" type="text/css" href="/demo/table-col-resize-exchange/css/main.css" />  
<script  src="/demo/table-col-resize-exchange/js/jquery.js"></script>
<script  src="/demo/table-col-resize-exchange/js/colResizable-1.3.min.js"></script>
<script src="/demo/table-col-resize-exchange/js/colExchange.js"></script>
</head>
<body>
<div class="center" >
     <br/><br/>
     <table id="tab" width="100%" border="0" cellpadding="0" cellspacing="0">
        <thead>
        <tr>
            <td title="点击拖动可以交换列的位置">标题一</td>
            <td title="点击拖动可以交换列的位置">标题二</td>
            <td title="点击拖动可以交换列的位置">标题三</td>
        </tr>
        </thead>
        <tr>
            <td class="left">cell1</td>
            <td>cell4</td>
            <td class="right">cell7</td>
        </tr>
        <tr>
            <td class="left">cell2</td>
            <td>cell5</td>
            <td class="right">cell8</td>
        </tr>
        <tr>
            <td class="left bottom">cell3</td>
            <td class="bottom">cell6</td>
            <td class="bottom right">cell9</td>
        </tr>																	
    </table>
    <input type="button" value="添加一列到最后" onclick="$('#tab').colExhange('addCol',$('#tab')[0].rows[0].cells.length,'标题new')"/> 
    <input type="button" value="删除最后一列" onclick="$('#tab').colExhange('removeCol', $('#tab')[0].rows[0].cells.length)" />
    <br />
    <br />

    <table id="tab1" width="100%" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <td title="点击拖动可以交换列的位置">标题一</td>
                <td title="点击拖动可以交换列的位置">标题二</td>
                <td title="点击拖动可以交换列的位置">标题三</td>
            </tr>
        </thead>
        <tr>
            <td class="left">cell1</td>
            <td>cell4</td>
            <td class="right">cell7</td>
        </tr>
        <tr>
            <td class="left">cell2</td>
            <td>cell5</td>
            <td class="right">cell8</td>
        </tr>
        <tr>
            <td class="left bottom">cell3</td>
            <td class="bottom">cell6</td>
            <td class="bottom right">cell9</td>
        </tr>
    </table>
    <input type="button" value="添加一列到最后" onclick="$('#tab1').colExhange('addCol',$('#tab')[0].rows[0].cells.length,'标题new')" />
    <input type="button" value="删除最后一列" onclick="$('#tab1').colExhange('removeCol', $('#tab')[0].rows[0].cells.length)" />
</div>
<script type="text/javascript">
    $(function () {
        $("#tab,#tab1").colResizable({ liveDrag: true, gripInnerHtml: "<div class='grip'></div>", draggingClass: "dragging" }).colExhange();
    });
</script>	
</body>
</html>

点击下载:表格列交换,拖拽改变列宽


原创文章,转载请注明出处:表格列交换,拖拽改变列宽效果

评论(0)Web开发网
阅读(520)喜欢(0)不喜欢(0)JavaScript/Ajax