JavaScript [jquery UI] selectable, start event, gesamte Auswahl löschen

Yuri_Orlov · 1. Februar 2011

Hallo Community,

ich möchte per Jquery UI Widget "selectable" eine Row einer Tabelle selectieren. (gruppiert nach tr)
Das funktioniert soweit.

Das Problem ist, das eine vorher gemachte Auswahl nicht wieder destroyed wird.
Es werden "alte" Auswahlen nicht gelöscht und die Tabelle wird immer voller.

Mein Ansatz war, per start-event die destroy() methode aufzurufen.
Ich scheitere aber vermutlich an der Syntax...
Mein nicht funktionierender jquery-code:

Code:

$(function() {
    $('.selectable tr').selectable({ 
               start: function() {     $('.selectable tr').selectable("destroy")  }   
});
});

Hat jemand Rat für mich?

Der gesamte, teilweise funktionierende code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
.ui-widget-content { padding: 20px; border: 1px solid #fff; }
.ui-selecting { border: 1px solid #f60; }
.ui-selected { background: #f60; color: #fff; }
</style>

<script>

$(function() {
$(".selectable tr").selectable(); 
});

</script>

</head>
<body>
 <table class="selectable">

   <tr>
       <td class="b1">asd</td>
       <td class="b1">asd</td>
       <td class="b1">dsa</td>
   </tr>


   <tr>
       <td class="b2">435</td>
       <td class="b2">444</td>
       <td class="b2">345</td>
   </tr>

   <tr>
       <td>534</div></td>
       <td class="ui-widget-content">543</div></td>
       <td class="ui-widget-content">234</div></td>
   </tr>

</table>
</body>
</html>

Yuri_Orlov · 10. Februar 2011

so geht es:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
.ui-widget-content { padding: 20px; border: 1px solid #fff; }
.ui-selecting { border: 1px solid #f60; }
.ui-selected { background: #f60; color: #fff; }
</style>

<script>

$(function() {
// http://jsbin.com/odofa4/3

$(".selectable tr").selectable({
	filter: "td.ja",
	start: function() { $('.selectable .ui-selected').removeClass('ui-selected')  },
	 stop: function(){
        var result = $("#select-result").empty();
        var result2 = $("#result2");
        $(".ui-selected", this).each(function(){
          var cabbage = this.id + ',';
          result.append(cabbage);
        });
        var newInputResult = $('#select-result').text(); 
            newInputResult = newInputResult.substring(0, newInputResult.length - 1);
            result2.val(newInputResult); 
      }

   
})



});

</script>

</head>
<body>
 <table border="1" class="selectable">

   <tr>
   		 <td>B123</td>
       <td class="ja" id="2011-01-01">01.01.2011</td>
       <td>belegt</td>
       <td class="ja" id="2011-01-03">03.01.2011</td>

   </tr>


   <tr >
   	<td class="nein">B212</td>
       <td class="ja" id="2011-01-01">01.01.2011</td>
       <td class="ja" id="2011-01-02">02.01.2011</td>
       <td class="ja" id="2011-01-03">03.01.2011</td>

   </tr>

   <tr>
   	<td class="nein">B323</td>
       <td class="ja" id="2011-01-01">01.01.2011</td>
       <td class="ja" id="2011-01-02">02.01.2011</td>
       <td class="ja" id="2011-01-03">03.01.2011</td>

   </tr>

</table>

<div id="select-result"></div>

</body>
</html>

Suche

JavaScript [jquery UI] selectable, start event, gesamte Auswahl löschen

Yuri_Orlov

Cadet 3rd Year

Yuri_Orlov

Cadet 3rd Year

Ähnliche Themen