1

私がやろうとしているのは、ユーザーが jQuery UI 選択可能を使用して一度に 1 つの列から行を選択できるようにすることです。

ただし、ドラッグ/ハイライト効果が複数の列にまたがらないように制限する必要があります。たとえば、ユーザーがどの列でドラッグ イベントを開始しても、その列の外側を強調表示することはできません。

テーブルコード

<table id="selectable">
  <tr>
    <td data-col="0">
    <td data-col="1">
    <td data-col="2">
  </tr>
  <tr>
    <td data-col="0">
    <td data-col="1">
    <td data-col="2">
  </tr>
  <tr>
    <td data-col="0">
    <td data-col="1">
    <td data-col="2">
  </tr>
  ...etc
</table>

jQuery:

var currentCol;

$("#selectable").selectable({
    filter:'td',
    selecting: function(event, ui){
        console.log($(ui.selected));
    }
});

しかし、私は の値にアクセスできません。data-colそれは常にnullです。

4

3 に答える 3

4

気にするのが列インデックスだけの場合、これはそれを取得するために機能するはずです:

$("#selectable").selectable({
    filter: "td",
    selecting: function(event, ui) {
        console.log($(ui.selecting).prevAll().length);   
    }
});

$(ui.selecting).attr('data-col')その方法を引き続き使用したい場合にも機能するはずです。あなたの例では、使用ui.selectedすべき場所を使用していますui.selecting。

jsフィドル

于 2013-07-05T17:19:51.390 に答える
0

JQueryセレクターを使用できることに注意してくださいtd:nth-child($column_index)（インデックスは1から始まります）

$("#selectable").selectable({
    filter: "td:nth-child(1)",
    selecting: function (e, ui) {
         $(ui.selecting).css({'border':'1px solid black'})
    },
    unselecting: function (e, ui) {
         $(ui.unselecting).css({ 'border': '' })
    }
});
于 2016-06-18T15:19:47.727 に答える