熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

JQuery-tableDnD 拖拽的基本使用介紹

2013-11-15 12:00:30  來源: JSP教程 
本篇文章是對JQuerytableDnD拖拽的基本使用進行了詳細的分析介紹需要的朋友參考下  

  在頁面上導入js

復制代碼 代碼如下:
jqueryminjs
jquerytablednd__js
注意一定要先導入jqueryminjs 否則出錯

  
·建table

復制代碼 代碼如下:
<table id="table" cellspacing="" cellpadding="">
    <tr id=""><td></td><td>One</td><td>some text</td></tr>
    <tr id=""><td></td><td>Two</td><td>some text</td></tr>
    <tr id=""><td></td><td>Three</td><td>some text</td></tr>
    <tr id=""><td></td><td>Four</td><td>some text</td></tr>
    <tr id=""><td></td><td>Five</td><td>some text</td></tr>
    <tr id=""><td></td><td>Six</td><td>some text</td></tr>
</table>

  
·插入js代碼

復制代碼 代碼如下:
<script type="text/javascript">
  $(document)ready(function() {
        $("#table")tableDnD();
    });
 </script>

  
·ok
·例子

復制代碼 代碼如下:

  
<%
    String path = requestgetContextPath();
    String basePath = requestgetScheme() + "://" + requestgetServerName() + ":" + requestgetServerPort() + path + "/";
    pageContextsetAttribute("basePath" basePath);
%>
<!DOCTYPE HTML PUBLIC "//WC//DTD HTML Transitional//EN">
<html>
    <head>
       <script type="text/javascript"
           src="${basePath}common/js/jqueryminjs"></script>
       <script type="text/javascript"
           src="${basePath}common/js/jquerytablednd__js"></script>
       <style type="text/css">
aa {
    background: #FF
}

bb {
    background: #FF
}
</style>

<script type="text/javascript">

  $(document)ready(function() { 
  color();
        $("#table")tableDnD({
           onDrop:function(tablerow){
           var b = $(row)children()eq()text();
           color();
            }
        });

    });

    function color()
    {
       var tbody = $("table[id=table] tr");
       tbodyeach(function(index){
          var cc = index%;
          if(==cc)
            {
            $(this)removeClass();
            $(this)addClass("aa");
            }
           else
           {
           $(this)removeClass();
            $(this)addClass("bb");
           }
       });
    }
 </script>
    </head>

    <body>
       <table id="table" cellspacing="" cellpadding="">
           <tr id=""><td></td><td>One</td><td>some text</td></tr>
           <tr id=""><td></td><td>Two</td><td>some text</td></tr>
           <tr id=""><td></td><td>Three</td><td>some text</td></tr>
           <tr id=""><td></td><td>Four</td><td>some text</td></tr>
           <tr id=""><td></td><td>Five</td><td>some text</td></tr>
           <tr id=""><td></td><td>Six</td><td>some text</td></tr>
       </table>

    </body>
</html>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20077.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.