如何添加名为“类型（链接到文档的图标）”的文档库列进入列表视图？

发布于 2024-08-29 01:17:42 字数 130 浏览 2 评论 0原文

我正在使用列表视图。我希望一个列看起来与名为“类型（链接到文档的图标）”列的文档库列类似。我还应该能够设置此超链接图标应打开的路径。我对现有的网站栏进行了很多尝试，但仍然不知道如何做到这一点。有没有人更早实施过这个。请分享您的专业知识。提前致谢。

原文

分享到QQ

分享到微博

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

发布评论

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

江南烟雨〆相思醉 2024-09-05 01:17:42

从开箱即用的能力来看，您无法直接准确地实现这样的列。类型（链接到文档的图标）使用计算字段类型。设置这些，特别是对于这样一个简单的目标，非常复杂，并且需要部署解决方案。但是，还有其他方法可以实现此目的。

基本上，您想要实现的基本目标是链接图片。 URL 字段的超链接功能和图片功能的组合。您可以采用两种方法来实现此目的，而无需部署解决方案。我将列出这两种，您可以尝试您认为更符合您口味的一种或两种。

选项一：URL 字段修改

此选项涉及更改位于 SharePoint 服务器上的 12 配置单元中的 FLDTYPES.XML。当然，建议您在执行此操作之前备份当前文件。 FLDTYPES.XML 位于 \Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\XML。此更改允许我们在配置为显示超链接时使用 SharePoint UI 中的默认 URL 字段，以在指定情况下显示图片。

将文件备份为 FLDTYPES.OLD 或其他文件后，在文本编辑器中打开 FLDTYPES.XML 并搜索 URL 字段。 URL 行将位于开头，因此只需搜索该行即可。现在，在大字段类型定义中将有一个字段开关。除了我现在手动添加的注释之外，它看起来如下所示。

<FieldSwitch>
    <Expr><Property Select="Format"/></Expr>
    <Case Value="Image">
        <FieldSwitch>
            <Expr><Property Select="Width"/></Expr>
            <Case Value="">
                <HTML><![CDATA[<IMG SRC="]]></HTML><Column HTMLEncode="TRUE"/><HTML>" ALT="</HTML><Column2 HTMLEncode="TRUE"/><HTML><![CDATA[">]]></HTML>
            </Case>
            <Default>
                <HTML><![CDATA[<IMG SRC="]]></HTML><Column HTMLEncode="TRUE"/><HTML>" ALT="</HTML><Column2 HTMLEncode="TRUE"/><HTML><![CDATA[" WIDTH="]]></HTML><Property Select="Width"/><HTML><![CDATA[" HEIGHT="]]></HTML><Property Select="Height"/><HTML><![CDATA["> ]]></HTML>
            </Default>
        </FieldSwitch>
    </Case>
    <Default>
        <HTML><![CDATA[<A HREF="]]></HTML><Column HTMLEncode="TRUE"/><HTML><![CDATA[">]]></HTML>
        <Switch>
            <Expr><Column2/></Expr>
            <Case Value="">
                <Column HTMLEncode="TRUE"/>
            </Case>
            <Default>                        
                <Column2 HTMLEncode="TRUE"/>   <!-- This is where we work -->               
            </Default>
        </Switch>
        <HTML><![CDATA[</A>]]></HTML>
    </Default>
</FieldSwitch>

现在，我们要替换我添加注释的行中的。这是当 URL 字段设置为超链接时显示内容的逻辑，并且填写了描述，当前仅显示该描述。我们想要更改它，以便当此描述是图像的 URL 时，它将显示该图像。以下是我使用的示例。

<Switch>
    <Expr>
        <GetFileExtension>
            <Column2/>
        </GetFileExtension>
    </Expr>
    <Case Value="pnG">
        <HTML><![CDATA[<IMG STYLE="border:0" SRC="]]></HTML>
        <Column2 HTMLEncode="TRUE"/>
        <HTML><![CDATA[">]]></HTML>
    </Case>
    <Default>
        <Column2 HTMLEncode="TRUE"/>
    </Default>
</Switch>

基本上，它将描述视为文件名，检查它是否有扩展名，如果匹配，它将把它渲染为没有边框的图像。现在，我使用 pnG，因为此开关大小写比较区分大小写，但图像的源 url 不区分大小写。因此，当我创建一个字段并将描述指定为“/_layouts/images/FlagRed.pnG”时，它将显示我保存为“/_layouts/images/FlagRed.png”的FlagRed图片。这样，当我确实想显示实际的图像文本 url 时，我可以不将结尾大写。当然，您必须将 case 语句中的“pnG”替换为您使用的任何文件扩展名，并在有更多情况时添加额外的情况。完成后保存文件。

完成所有设置后，在计算机上运行 IISRESET。完成此操作后，您的 URL 字段现在将能够呈现图像链接。创建新 URL 字段时，您所需要做的就是将其指定为超链接类型，将目标链接作为 URL，并将图像源 url 作为描述。将 URL 列添加到列表视图中的方式与添加任何其他字段类型的方式相同。

选项二：计算的 HTML 字段

您可以在内容编辑器 Web 部件中使用一些 JavaScript，而不是扰乱服务器。基本上，在具有列表视图的页面上插入内容编辑器 Web 部件，确保它位于列表视图下方。通过在此 CEWP 中输入脚本，您可以运行它来更改列表视图的显示。在这种特殊情况下，我们使用一个脚本，允许将 HTML 在计算列中呈现为 HTML。

以下内容应包含获取脚本所需的所有资源：使用计算列编写 HTML。这里有很多阅读内容，但是您可以通过实现此脚本获得很大的潜力，因此我推荐它。当您最终使用脚本设置 CEWP 时，我们将需要您的列表中的两个字段。

一种是文本字段，它不会显示在您的列表视图中，但会显示在您的编辑表单上。这将是他们指定超链接路径的地方。
然后，您需要创建一个输出为单行文本的计算列。使用如下所示的公式：=CONCATENATE("")
- 将 {0} 替换为您在方括号中创建的文本字段的名称。所以，如果你称它为“Path”，那么它应该是[Path]。
- 将 {1} 替换为您的图标的图像源网址。如果图像有多个选项，您要么必须添加另一个文本字段来指定图像 url，要么使用一些 IF 逻辑。请查看本文了解计算列公式的语法以进行设置逻辑。

将计算列添加到列表视图中。现在，填写文本字段后，您将获得图像链接。

希望这两个至少之一有帮助！

In terms of out-of-the-box capability, you cannot directly implement such a column exactly. The Type (icon linked to document) uses a computed field type. Setting those up, especially for a simple objective as this, is very complicated and requires deploying solutions. However, there are other ways to accomplish this.

The basic thing you want to achieve is a linked picture, basically. A combination of the URL field's Hyperlink functionality and picture functionality. There are two approaches you can take to this which can be done without needing to deploy a solution. I'll list both and you can try whichever one, or both, that you feel is more to your taste.

Option One: URL Field Modification

This one involves changing the FLDTYPES.XML located in the 12 hive on your SharePoint server. Naturally, it is recommended you make a back-up of your current file before doing this. The FLDTYPES.XML is located at \Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\XML. This change will let us use the default URL field in the SharePoint UI, when configured to show a HyperLink, to show a picture under specified circumstances.

After you back up the file as something lke FLDTYPES.OLD or what-have-you, open FLDTYPES.XML in a text editor and search for the URL field. The line <Field Name="TypeName">URL</Field> will be at the start, so just search for that. Now, in the large fieldtype definition will be a field switch. Except for the comment that I manually added right now, it looks like the following.

<FieldSwitch>
    <Expr><Property Select="Format"/></Expr>
    <Case Value="Image">
        <FieldSwitch>
            <Expr><Property Select="Width"/></Expr>
            <Case Value="">
                <HTML><![CDATA[<IMG SRC="]]></HTML><Column HTMLEncode="TRUE"/><HTML>" ALT="</HTML><Column2 HTMLEncode="TRUE"/><HTML><![CDATA[">]]></HTML>
            </Case>
            <Default>
                <HTML><![CDATA[<IMG SRC="]]></HTML><Column HTMLEncode="TRUE"/><HTML>" ALT="</HTML><Column2 HTMLEncode="TRUE"/><HTML><![CDATA[" WIDTH="]]></HTML><Property Select="Width"/><HTML><![CDATA[" HEIGHT="]]></HTML><Property Select="Height"/><HTML><![CDATA["> ]]></HTML>
            </Default>
        </FieldSwitch>
    </Case>
    <Default>
        <HTML><![CDATA[<A HREF="]]></HTML><Column HTMLEncode="TRUE"/><HTML><![CDATA[">]]></HTML>
        <Switch>
            <Expr><Column2/></Expr>
            <Case Value="">
                <Column HTMLEncode="TRUE"/>
            </Case>
            <Default>                        
                <Column2 HTMLEncode="TRUE"/>   <!-- This is where we work -->               
            </Default>
        </Switch>
        <HTML><![CDATA[</A>]]></HTML>
    </Default>
</FieldSwitch>

Now, we want to replace the <Column2 HTMLEncode="TRUE"/> at the line I put the comment on. This is the logic for what displays for a URL field when it is set to HyperLink, and the description is filled out, which currently will just show that description. We want to change it so that when it this description is the URL of an image, then it will show that image. The following is an example of what I use.

<Switch>
    <Expr>
        <GetFileExtension>
            <Column2/>
        </GetFileExtension>
    </Expr>
    <Case Value="pnG">
        <HTML><![CDATA[<IMG STYLE="border:0" SRC="]]></HTML>
        <Column2 HTMLEncode="TRUE"/>
        <HTML><![CDATA[">]]></HTML>
    </Case>
    <Default>
        <Column2 HTMLEncode="TRUE"/>
    </Default>
</Switch>

Basically, it treats the description as a filename, checks if it has an extension, and in the case of a match, it will render it as an image without a border. Now, I use pnG because this switch-case comparison is case-sensitive, but the source url for an image is not. So, when I create a field and specify the description as "/_layouts/images/FlagRed.pnG", then it will show the FlagRed picture that I have saved as "/_layouts/images/FlagRed.png". This way, when I do want to show an actual image text url, then I can just not capitalize the end. Of course, you'll have to substitute the "pnG" in the case statement for whatever file extension you use, and add extra cases when you have more. Save the file when you are done.

After that is all setup, run IISRESET on the machine. Once this is complete, your URL fields will now be able to render image links. All you have to do when creating a new URL field is specify it as a HyperLink type, put the destination link as the URL, and put the image source url as the Description. Add the URL column to your list view the same way you'd do with any other field type.

Option Two: Calculated HTML Fields

Instead of messing with the server, you can instead use some javascript in a Content Editor Web Part. Basically, insert a Content Editor Web Part on the page with your list view, make sure it is below the list view. By inputting a script in this CEWP, you can run it to change the display for the list view. This particular case, we use a script that allows HTML to be rendered as HTML in a Calculated column.

The following should have all the resources you need to get the script: Using Calculated Columns to Write HTML. There's a lot of reading here, but there is a lot of potential you can get from implementing this script, so I recommend it. When you've finally setup the CEWP with the script, we'll need two fields in your list.

One is a text field, this won't be shown in your list view but it will be on your edit form. This will be where they specify the hyperlink's path.
Then you'll need to create a Calculated Column that outputs as a single line of text. Use a formula like the following: =CONCATENATE("<a href='",{0},"'><img src='",{1},"' style='border:0' /></a>")
- Replace {0} with the name of text field you created in square brackets. So, if you called it "Path", then it should be [Path].
- Replace {1} with the image source url for your icons. If there are multiple options for the image, you either have to add another text field to specify the image url, or use some IF logic. Check this article for the syntax of Calculated Column formulas to set up that logic.

Add the calculated column to your list view. Now, when the text field is filled out, you'll get your image link.

Hope that at least one of these two helps!

回复收藏 0 原文

~没有更多了~