SuperTableは縦スクロール、横スクロールも実現できます。
ですが、RadioButtonを入れると、選択表示にならないという状態になる。HTMLのinputにはcheckedついているのに!
その原因は、スクロールテーブルの実現方法にあるんですが、SuperTableのスタイルシートを外すと見えてきます。
まず、fixedCol:0 = 列固定を無し に指定してみると、こんな感じになります。
行ヘッダーの列を2つにして、cssで縦スクロールを実現しているんですね。
次に、fixedCol:1 = 1つ目の列を固定 に指定してみると、こんな感じになります。
テーブル内のラジオボタンの行までガシガシ作られちゃってます。
ラジオボタンはグループ内で1つのみの選択という作りをしますので、複製された行は未選択状態になります。
この状態でSuperTableのcssをあてると、綺麗に全部未選択状態に見えてしまいます。
そこで、複製された方の列のラジオをJavaScriptで無理矢理選択状態にしてみる
try {
var myST = new superTable("matrixb41dbb", {
cssSkin : "sDefault",
headerRows : 0,
fixedCols : 1,
colWidths : [150,100,100,100]
});
} catch (e) { }
checkRadio(document.form1.test1, "あ");
checkRadio(document.form1.test2, "い");
checkRadio(document.form1.test3, "う");
checkRadio(document.form1.test4, "あ");
checkRadio(document.form1.test5, "い");
checkRadio(document.form1.test6, "う");
function checkRadio(radios, selected) {
for (i=radios.length - 1; i>=0;i--){
if (radios[i].value===selected) {
radios[i].checked = true;
break;
}
}
}
すると、上手く表示されるようになります。
この状態で、fixedCols : 2 = 2列目まで列固定 にして試してみると、2列目のラジオの選択が見えなくなってしまいます。
つまり、列固定している列は1つめのテーブルの情報を、列固定していない列は2つ目のテーブルの情報を見てるよーです。
なので、今回の例では2列目の「あ」の選択値の場合は、1つ目のテーブルのラジオを選択してあげれば見れるようになります。
checkRadioFirst(document.form1.test1, "あ");
checkRadio(document.form1.test2, "い");
checkRadio(document.form1.test3, "う");
checkRadioFirst(document.form1.test4, "あ");
checkRadio(document.form1.test5, "い");
checkRadio(document.form1.test6, "う");
function checkRadioFirst(radios, selected) {
for (i=0; i<radios.length - 1;i++){
if (radios[i].value===selected) {
radios[i].checked = true;
break;
}
}
}
cssを当てない状態ではこんな感じに仕上げる。
たまたま、ラジオで選択が表示されなくなって気づきましたが、textやcheckboxも2重に生成されることになります。
なので、HTMLで情報送信したがサーバで上手く反映されない...とハマるパターンもありそう。
なんにも考えずに使うと怖いなーと思った一件でした。