0

Syncfusion TreeView コントロールを使用して Web ページにフォルダー ブラウザーを作成しています。私たちのデザインでは CSS を使用してテーブルのレイアウトを制御していますが、TreeView のレイアウトに影響を与えるテーブル CSS を停止する方法がわかりません。

現在、私のツリービューは次のようになっています。

http://imagebin.org/63035

チェックボックスとテキスト ラベルが、フォルダ アイコンのようにツリーの左側に配置されていないことを確認してください。

私の TreeView は次のように定義されています。

           <div class="TreeViewTable">
                <cc1:TreeView ID="tvFileSystem" 
                    runat="server" 
                    Width="100%"
                    Height="500px"
                    CssClass="TreeView" 
                    ImageBaseURL="/images/treeIcons/"
                    DropChildCssClass="DropChildCss" 
                    EditNode="False" 
                    OnNodeExpanded="tvFileSystem_NodeExpanded"
                    OnNodeCheckChanged="tvFileSystem_NodeCheckChanged" 
                    AutoPostBackOnNodeCheckChanged="true" 
                    AutoCheckChildNodes="true">
                </cc1:TreeView>

                <asp:ListBox ID="listFiles" runat="server" Visible="false" Height="150px"></asp:ListBox>
            </div>

コントロールによって生成される HTML は次のようになります。

<div id="ctl00_mainPageContent_tvFileSystem_R2" class="tvItemRow" style="width:100%;">
<table cellspacing="0" cellpadding="0">
<tr>
    <td align="right" class="tvLineImgTD">
        <img src="/WebResource.axd" alt="" />
    </td>

    <td align="right" class="tvLineImgTD tvLineImgTD_1">
        <img src="/WebResource.axd" alt="" />
    </td>

    <td>
        <div id="ctl00_mainPageContent_tvFileSystem_I2" class="tvItem">
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <td     id="ctl00_mainPageContent_tvFileSystem_I2_TI" class="tvImgCell">
                        <div id="ctl00_mainPageContent_tvFileSystem_I2_CI" class="tvImgCont"><img src="/images/treeIcons/folder.gif" id="ctl00_mainPageContent_tvFileSystem_I2_I" class="tvImg" alt="" />
                        </div>
                    </td>

                    <td id="ctl00_mainPageContent_tvFileSystem_I2_TB" class="tvCheckCell">
                        <input name="ctl00$mainPageContent$tvFileSystem_I2_B" type="checkbox" id="ctl00_mainPageContent_tvFileSystem_I2_B" class="tvCheck" onclick="_sfctl00_mainPageContent_tvFileSystem.OnClick(this, event)" onmousedown="_sfctl00_mainPageContent_tvFileSystem.OnMouseDown(this, event)" />
                    </td>

                    <td id="ctl00_mainPageContent_tvFileSystem_I2_TT" class="tvTextCell">
                        <table cellspacing="0" cellpadding="0">
                            <tr>
                                <td id="ctl00_mainPageContent_tvFileSystem_I2_CT" class="tvTextCont" style="white-space:nowrap;">
                                    1
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </td>
</tr>
</table>
</div>

私のCSSコードは次のようになっています：


.TreeView 
{ 
  background-color:White;
  padding-top:4px; 
  padding-left:1px; 
  border: #7C7C94 1px solid; 
  cursor:default; 
  text-align: left;
}

.tvItemRow
{
    font-size:9pt;
    border: none;
    padding:0;
    width:auto;
    text-align:left;
}

/* TreeView Table Properties */

div.TreeViewTable
{
    border: none;
    border-bottom: none;
    padding:0;
    text-align:left;
}

div.TreeViewTable table {
    width:inherit;

}

div.TreeViewTable table tr th {
    border: none;
    padding: 0px;
    letter-spacing: 1px;
}

div.TreeViewTable table tr td {
    border: none;
    padding: 0px;
    letter-spacing: 1px;

}

div.TreeViewTable table tr.alt td {
    background-color:#EFEFEF;
}

要素を並べるために、このページにどの CSS コードを適用すればよいかについての提案をお待ちしております。

ありがとう...

4

1 に答える 1

0

投稿したものよりも多くの CSS が必要です。明らかに他の何かが干渉しています。これらの要素にどの CSS が適用されているかを確認するには、Firefox でFirebugを使用することをお勧めします。予想よりも広いスコープを持つ css クラスを持っている可能性があります。

于 2009-09-08T14:56:35.800 に答える