質問

Dojo(1.3)チェックボックスを使用して、チェックボックスの下に表示されるDojoグリッドで列を表示/非表示にしようとしています。私はその機能を正常に動作させることができましたが、チェックボックスを少し良く整理したかったのです。そこで、テーブルに置いてみました。私のdojo.addOnLoad関数は次のようになります。

dojo.addOnLoad(function(){
    var checkBoxes = [];
    var container = dojo.byId('checkBoxContainer');
    var table = dojo.doc.createElement("table");
    var row1= dojo.doc.createElement("tr");
    var row2= dojo.doc.createElement("tr");
    var row3= dojo.doc.createElement("tr");

    dojo.forEach(grid.layout.cells, function(cell, index){
        //Add a new "td" element to one of the three rows
    });

    dojo.place(addRow, table);
    dojo.place(removeRow, table);
    dojo.place(findReplaceRow, table);

    dojo.place(table, container);
});

イライラするのは:

  1. Dojoデバッガーを使用すると、テーブルに対してHTMLが適切に生成されていることがわかります。
  2. そのHTMLを取得し、テーブルだけを空のHTMLファイルに入れると、テーブル内のチェックボックスが正常にレンダリングされます。
  3. IE6ではなくFirefoxでページが正しく表示されます。

生成されるHTMLは次のようになります。

<div id="checkBoxContainer">
    <table>
        <tr>
            <td>
                <div class="dijitReset dijitInline dijitCheckBox"
                    role="presentation" widgetid="dijit_form_CheckBox_0"
                    wairole="presentation">
                    <input class="dijitReset dijitCheckBoxInput"
                        id="dijit_form_CheckBox_0"
                        tabindex="0" type="checkbox"
                        name="" dojoattachevent=
                        "onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"
                        dojoattachpoint="focusNode" unselectable="on"
                        aria-pressed="false"/>
                </div>
                <label for="dijit_form_CheckBox_0">
                    Column 1
                </label>
            </td>
            <td>
                <div class="dijitReset dijitInline dijitCheckBox"
                    role="presentation" widgetid="dijit_form_CheckBox_1"
                    wairole="presentation">
                    <input class="dijitReset dijitCheckBoxInput"
                        id="dijit_form_CheckBox_1"
                        tabindex="0" type="checkbox"
                        name="" dojoattachevent=
                        "onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"
                        dojoattachpoint="focusNode" unselectable="on"
                        aria-pressed="false"/>
                </div>
            </td>
        </tr>
        <tr>
            ...
        </tr>
    </table>
</div>

私は公式のDOJOフォーラムに投稿するはずでしたが、廃止され、現在メーリングリストを使用しているとのことです。メーリングリストが機能しない場合は、StackOverflow.comを使用してください。だから、ここにいる!

役に立ちましたか?

解決

<tbody>要素を作成するのを忘れたようです。

他のヒント

IE7でdojoを使用してテーブルを生成しようとしたときにも、この問題が発生しました。 htmlはありますが、何もレンダリングされません。繰り返しますが、解決策はthead、tbodyタグを使用することです。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top