当前位置： 文江博客话题详情

自定义 Ext.Net TreeGrid 节点？

发布于 2024-12-16 22:50:55 字数 280 浏览 2 评论 0原文

我将使用自定义节点创建 Ext.Net 的 TreeGrid。
例如：
TreeGrid 的所有节点都应在其前面有一个文本框，用户应在其中写入一个数字。
请参见下图：

Custom Ext.Net TreeGrid

另外，我必须在代码中获取每个节点的文本框值在回发时落后。

您能否指导我，如何使用 Ext.net 和 C# 创建它？
谢谢。

原文

I'm gonna create an Ext.Net's TreeGrid with custom nodes.
e.g :
All of TreeGrid's nodes should have a textbox at the front of itself and users should write a number at it.
See the below image :

Custom Ext.Net TreeGrid

Also, I have to get each nodes' textbox values in code behind at postback.

Could you please guide me, how I can create it with Ext.net and C# ?
Thanks.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

傾旎 2024-12-23 22:50:55

不幸的是，在 Ext.NET (v1.x) 中使用当前版本的 实现这些功能非常困难。 并未针对此类渲染进行设置。

下一个 Ext.NET 版本 (v2) 中将提供帮助，尽管目前尚未发布。

下面是一个基本示例，可帮助您开始渲染 字段。

示例

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TreeGrid - Ext.NET Examples</title>

    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        var formatHours = function (v) {
            if (v || v === 0) {
                return "Number : <input class=\"x-form-text x-form-field\" type=\"text\" value=\"" + v + "\" />";
            }
            return "";
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:TreeGrid 
            ID="TreeGrid1"
            runat="server"
            Title="Projects"
            Width="500"
            Height="300"
            NoLeafIcon="true"
            EnableDD="true">
            <Columns>
                <ext:TreeGridColumn Header="Task" Width="230" DataIndex="task" />
                <ext:TreeGridColumn Header="Score" Width="200" DataIndex="duration" Align="Center" SortType="AsFloat">
                    <XTemplate runat="server">
                        <Html>
                            {duration:this.formatHours}
                        </Html>
                        <Functions>
                            <ext:JFunction Name="formatHours" Fn="formatHours" />
                        </Functions>
                    </XTemplate>
                </ext:TreeGridColumn>
            </Columns>
            <Root>
                <ext:TreeNode Text="Tasks">
                    <Nodes>
                        <ext:TreeNode Icon="Folder" Expanded="true">
                            <CustomAttributes>
                                <ext:ConfigItem Name="task" Value="Project: Shopping" Mode="Value" />
                            </CustomAttributes>
                            <Nodes>
                                <ext:TreeNode Icon="Folder" Expanded="true">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="task" Value="Remodeling" Mode="Value" />
                                    </CustomAttributes>
                                    <Nodes>
                                        <ext:TreeNode Icon="Folder">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Paint bedroom" Mode="Value" />
                                            </CustomAttributes>
                                            <Nodes>
                                                <ext:TreeNode Leaf="true">
                                                    <CustomAttributes>
                                                        <ext:ConfigItem Name="task" Value="Ceiling" Mode="Value" />
                                                        <ext:ConfigItem Name="duration" Value="1.25" />
                                                    </CustomAttributes>
                                                </ext:TreeNode>
                                                <ext:TreeNode Leaf="true">
                                                    <CustomAttributes>
                                                        <ext:ConfigItem Name="task" Value="Walls" Mode="Value" />
                                                        <ext:ConfigItem Name="duration" Value="1.5" />
                                                    </CustomAttributes>
                                                </ext:TreeNode>
                                            </Nodes>
                                        </ext:TreeNode>
                                        <ext:TreeNode Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Decorate living room" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="12" />
                                            </CustomAttributes>
                                        </ext:TreeNode>
                                        <ext:TreeNode Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Fix lights" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0" />
                                            </CustomAttributes>
                                        </ext:TreeNode>
                                        <ext:TreeNode Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Reattach screen door" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="142" />
                                            </CustomAttributes>
                                        </ext:TreeNode>
                                        <ext:TreeNode Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Retile kitchen" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="96" />
                                            </CustomAttributes>
                                        </ext:TreeNode>
                                    </Nodes>
                                </ext:TreeNode>
                            </Nodes>
                        </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
        </ext:TreeGrid>        
    </form>
</body>
</html>

Unfortunately, implementing these features with the current release of <ext:TreeGrid> in Ext.NET (v1.x) is annoyingly difficult. The <ext:TreeGrid> is just not setup for this type of rendering.

There's help coming in the next Ext.NET release (v2), although at this point it has not been released.

Here's a basic sample to help get you started with rendering the <input> fields.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TreeGrid - Ext.NET Examples</title>

    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        var formatHours = function (v) {
            if (v || v === 0) {
                return "Number : <input class=\"x-form-text x-form-field\" type=\"text\" value=\"" + v + "\" />";
            }
            return "";
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:TreeGrid 
            ID="TreeGrid1"
            runat="server"
            Title="Projects"
            Width="500"
            Height="300"
            NoLeafIcon="true"
            EnableDD="true">
            <Columns>
                <ext:TreeGridColumn Header="Task" Width="230" DataIndex="task" />
                <ext:TreeGridColumn Header="Score" Width="200" DataIndex="duration" Align="Center" SortType="AsFloat">
                    <XTemplate runat="server">
                        <Html>
                            {duration:this.formatHours}
                        </Html>
                        <Functions>
                            <ext:JFunction Name="formatHours" Fn="formatHours" />
                        </Functions>
                    </XTemplate>
                </ext:TreeGridColumn>
            </Columns>
            <Root>
                <ext:TreeNode Text="Tasks">
                    <Nodes>
                        <ext:TreeNode Icon="Folder" Expanded="true">
                            <CustomAttributes>
                                <ext:ConfigItem Name="task" Value="Project: Shopping" Mode="Value" />
                            </CustomAttributes>
                            <Nodes>
                                <ext:TreeNode Icon="Folder" Expanded="true">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="task" Value="Remodeling" Mode="Value" />
                                    </CustomAttributes>
                                    <Nodes>
                                        <ext:TreeNode Icon="Folder">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Paint bedroom" Mode="Value" />
                                            </CustomAttributes>
                                            <Nodes>
                                                <ext:TreeNode Leaf="true">
                                                    <CustomAttributes>
                                                        <ext:ConfigItem Name="task" Value="Ceiling" Mode="Value" />
                                                        <ext:ConfigItem Name="duration" Value="1.25" />
                                                    </CustomAttributes>
                                                </ext:TreeNode>
                                                <ext:TreeNode Leaf="true">
                                                    <CustomAttributes>
                                                        <ext:ConfigItem Name="task" Value="Walls" Mode="Value" />
                                                        <ext:ConfigItem Name="duration" Value="1.5" />
                                                    </CustomAttributes>
                                                </ext:TreeNode>
                                            </Nodes>
                                        </ext:TreeNode>
                                        <ext:TreeNode Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Decorate living room" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="12" />
                                            </CustomAttributes>
                                        </ext:TreeNode>
                                        <ext:TreeNode Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Fix lights" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="0" />
                                            </CustomAttributes>
                                        </ext:TreeNode>
                                        <ext:TreeNode Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Reattach screen door" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="142" />
                                            </CustomAttributes>
                                        </ext:TreeNode>
                                        <ext:TreeNode Leaf="true">
                                            <CustomAttributes>
                                                <ext:ConfigItem Name="task" Value="Retile kitchen" Mode="Value" />
                                                <ext:ConfigItem Name="duration" Value="96" />
                                            </CustomAttributes>
                                        </ext:TreeNode>
                                    </Nodes>
                                </ext:TreeNode>
                            </Nodes>
                        </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
        </ext:TreeGrid>        
    </form>
</body>
</html>
回复 原文
挽清梦 2024-12-23 22:50:55

我可以找到答案：

<ext:TreeGrid ID="KnowledgeFieldsTreeGridWithTextBox1" runat="server" Title="Fileds "
    Icon="Plugin" Height="300" AutoHeight="true" AutoExpandColumn="KnowledgeFiled">
    <TopBar>
        <ext:Toolbar ID="KnowledgeFieldsTreeGridWithTextBoxToolbar1" runat="server">
            <Items>
                <ext:ToolbarFill ID="KnowledgeFieldsTreeGridWithTextBoxToolbarFill1" runat="server" />
                <ext:ToolbarTextItem ID="KnowledgeFieldsTreeGridWithTextBoxTextItem1" runat="server"
                    Text=" Filter : " />
                <ext:TriggerField ID="KnowledgeFieldsTreeGridWithTextBox_TriggerField1" runat="server" EnableKeyEvents="true">
                    <Triggers>
                        <ext:FieldTrigger Icon="Clear" />
                    </Triggers>
                    <Listeners>
                        <KeyUp Fn="KnowledgeFieldsTreeGridWithTextBox_KeyUp" Buffer="250" />
                        <TriggerClick Fn="KnowledgeFieldsTreeGridWithTextBox_ClearFilter" />
                    </Listeners>
                </ext:TriggerField>
            </Items>
        </ext:Toolbar>
    </TopBar>
    <Columns>
        <ext:TreeGridColumn Header="Filed Name" DataIndex="KnowledgeFiledName" Width="100" Align="Center" />
        <ext:TreeGridColumn Header="Score" DataIndex="KnowledgeScore" Width="200" Align="Right">
            <XTemplate runat="server">
                <Html>
                    <tpl if="values.leaf">
                        <input type="text" style="width:30px; text-align:left;" maxlength="5" value="{KnowledgeFiledScore}"></input>
                    </tpl>
                </Html>
            </XTemplate>
        </ext:TreeGridColumn>
    </Columns>
    <Root>

    </Root>
    <Listeners>
        <BeforeClick Handler="return !Ext.fly(e.getTarget()).is('input[type=text]');" />
    </Listeners>
</ext:TreeGrid>

I could found the answer :

<ext:TreeGrid ID="KnowledgeFieldsTreeGridWithTextBox1" runat="server" Title="Fileds "
    Icon="Plugin" Height="300" AutoHeight="true" AutoExpandColumn="KnowledgeFiled">
    <TopBar>
        <ext:Toolbar ID="KnowledgeFieldsTreeGridWithTextBoxToolbar1" runat="server">
            <Items>
                <ext:ToolbarFill ID="KnowledgeFieldsTreeGridWithTextBoxToolbarFill1" runat="server" />
                <ext:ToolbarTextItem ID="KnowledgeFieldsTreeGridWithTextBoxTextItem1" runat="server"
                    Text=" Filter : " />
                <ext:TriggerField ID="KnowledgeFieldsTreeGridWithTextBox_TriggerField1" runat="server" EnableKeyEvents="true">
                    <Triggers>
                        <ext:FieldTrigger Icon="Clear" />
                    </Triggers>
                    <Listeners>
                        <KeyUp Fn="KnowledgeFieldsTreeGridWithTextBox_KeyUp" Buffer="250" />
                        <TriggerClick Fn="KnowledgeFieldsTreeGridWithTextBox_ClearFilter" />
                    </Listeners>
                </ext:TriggerField>
            </Items>
        </ext:Toolbar>
    </TopBar>
    <Columns>
        <ext:TreeGridColumn Header="Filed Name" DataIndex="KnowledgeFiledName" Width="100" Align="Center" />
        <ext:TreeGridColumn Header="Score" DataIndex="KnowledgeScore" Width="200" Align="Right">
            <XTemplate runat="server">
                <Html>
                    <tpl if="values.leaf">
                        <input type="text" style="width:30px; text-align:left;" maxlength="5" value="{KnowledgeFiledScore}"></input>
                    </tpl>
                </Html>
            </XTemplate>
        </ext:TreeGridColumn>
    </Columns>
    <Root>

    </Root>
    <Listeners>
        <BeforeClick Handler="return !Ext.fly(e.getTarget()).is('input[type=text]');" />
    </Listeners>
</ext:TreeGrid>
回复 原文
~没有更多了~

关于作者

荒岛晴空

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

你列表最软的妹

文章 0 评论 0

晚安先生.

文章 0 评论 0

究竟谁懂我的在乎

文章 0 评论 0

mmi23

文章 0 评论 0

梦中的蝴蝶

文章 0 评论 0

skjfmsvd

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文