テーブルを5x5グリッドとして表示する必要があります。しかし、私がjsonデータとして持っているデータは、5列以上のデータを持つことができます。スクロールでjqueryスライダーを使ってtdデータを変更する
jqueryスライダを使用して、スライダのスクロールに基づいてテーブル> tdのデータを変更する方法。
var tData = [
["R1C1","R1C2","R1C3","R1C4","R1C5","R1C6","R1C7","R1C8","R1C9"],
["R2C1","R2C2","R2C3","R2C4","R2C5","R2C6","R2C7","R2C8","R2C9"],
["R3C1","R3C2","R3C3","R3C4","R3C5","R3C6","R3C7","R3C8","R3C9"],
["R4C1","R4C2","R4C3","R4C4","R4C5","R4C6","R4C7","R4C8","R4C9"],
["R5C1","R5C2","R5C3","R5C4","R5C5","R5C6","R5C7","R5C8","R5C9"]
];
データは以下の表のようになります。デフォルトで:
iは、次のJSONオブジェクトを持っています。
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ __
| R1C1 | R1C2 | R1C3 | R1C4 | R1C5 |
|_ _ _ | _ _ _ _ _ _ | _ _ _|_ _ _ |
| R2C1 | R2C2 | R2C3 | R2C4 | R2C5 |
|_ _ _ | _ _ _ _ _ _ | _ _ _|_ _ _ |
| R3C1 | R3C2 | R3C3 | R3C4 | R3C5 |
|_ _ _ | _ _ _ _ _ _ | _ _ _|_ _ _ |
| R4C1 | R4C2 | R4C3 | R4C4 | R4C5 |
|_ _ _ | _ _ _ _ _ _ | _ _ _|_ _ _ |
| R5C1 | R5C2 | R5C3 | R5C4 | R5C5 |
|_ _ _ | _ _ _ _ _ _ | _ _ _|_ _ __|
スライダースクロールでは、以下のようにデータを変更する必要があります。
_ _ _ _ _ _ _ _ _ _ _ _ _ __ _ _ _
| R1C2 | R1C3 | R1C4 | R1C5 | R1C6 |
| _ _ _|_ _ _ | _ _ _|_ _ _ |_ _ _ |
| R2C2 | R2C3 | R2C4 | R2C5 | R2C6 |
| _ _ _|_ _ _ | _ _ _|_ _ _ |_ _ _ |
| R3C2 | R3C3 | R3C4 | R3C5 | R3C6 |
| _ _ _|_ _ _ | _ _ _|_ _ _ |_ _ _ |
| R4C2 | R4C3 | R4C4 | R4C5 | R4C6 |
| _ _ _|_ _ _ | _ _ _|_ _ _ |_ _ _ |
| R5C2 | R5C3 | R5C4 | R5C5 | R5C6 |
| _ _ _|_ _ _ | _ _ _|_ _ __|_ _ _ |
と、それは次のように変更されます、次のスクロールの 、
_ _ _ _ _ _ _ _ _ __ _ _ _ _ _ _ _
| R1C3 | R1C4 | R1C5 | R1C6 | R1C7 |
|_ _ _ | _ _ _|_ _ _ |_ _ _ | _ _ _|
| R2C3 | R2C4 | R2C5 | R2C6 | R2C7 |
|_ _ _ | _ _ _|_ _ _ |_ _ _ | _ _ _|
| R3C3 | R3C4 | R3C5 | R3C6 | R3C7 |
|_ _ _ | _ _ _|_ _ _ |_ _ _ | _ _ _|
| R4C3 | R4C4 | R4C5 | R4C6 | R4C7 |
|_ _ _ | _ _ _|_ _ _ |_ _ _ | _ _ _|
| R5C3 | R5C4 | R5C5 | R5C6 | R5C7 |
|_ _ _ | _ _ _|_ _ __|_ _ _ | _ _ _|
あなたはjqueryのスライダーを使ってこれを行う方法を提案してくださいもらえますか?
あなたが好きな場合、一部のクリーンアップ:https://jsfiddle.net/Twisty/3osy7fvh/12/ – Twisty
スライダーの例。優れた。私はjqGridに似た少し細かく調整しようとします。 tdを隠す代わりに、それらのtdのデータを置き換えなければなりません。時間があれば、親切にjqGridのパラメータを参照してください。列の数が増えている間は、スライダのドラッグ中にデータのレンダリングに時間がかかります。これはjqGridで克服されました。 – Twisty
デュード:https://jsfiddle.net/Twisty/3osy7fvh/10/オーバーフローを使用して、VS – Shakthi