javascript - JavaScript と jQuery を使用して、SharePoint リストからハイパーリンクとしてデータを表示するためのハイパーリンクフィールド/列を取得する

Question

解決するのは簡単な問題だと思うものがありますが、理解するのに時間がかかりすぎました。

したがって、これの背景は次のとおりです。基本的に、私が持っているのは、タスクアイテムを含む SharePoint リストです。.js ファイルを作成し、いくつかの jQuery ファイルと共にサイトアセットセクションに公開しました。これらのファイルは、そのタスクリストからデータを取得し、CAML クエリを使用して (テスト用に) 新しいタスクリストで使用するために使用されます。

基本的に、これが行うことは次のとおりです。Webパーツを使用して、SPサイトのテストセグメントでそのテストタスクリストを取得し、ドラッグアンドドロップを使用して再ソートできるようにします（任意の行を選択して、必要な場所にドラッグしますリストに表示されると、すぐにドロップします）。

以上のことから、私の実際の問題は非常に単純です。このドラッグアンドドロップリストでは、列の 1 つが編集列です。ソースタスクリストからハイパーリンクフィールドを取得します。私のテストリストでは、そのリンクをハイパーリンクとして表示することはできません。テキストとしてのみ表示されます。私はこの JavaScript、SharePoint、jQuery などをすべて統合するのにかなり慣れていないので、おそらく明らかな何かが欠けています。何卒よろしくお願い申し上げます。これが私が使用しているコードで、もう少し説明が続きます。リンクを除いて、すべてが機能します！

リストのデータを参照する CAML クエリを次に示します。

function loadPrioritizedList() {
    $("#tasksUL").empty();
// TDs below have to be 3 more width than the headers 
    $().SPServices({
        operation: "GetListItems",    
        webURL: myURL,
        listName: targetListName,
        CAMLViewFields: "<ViewFields><FieldRef Name='Priority_x0020_Number' /><FieldRef Name='Edit_x0020_Link' /><FieldRef Name='Priority' /><FieldRef Name='Top_x0020_Item_x003f_' /><FieldRef Name='Purpose' /><FieldRef Name='Work_x002d_Task_x0020_Order' /><FieldRef Name='Work_x0020_Status' /><FieldRef Name='DueDate' /><FieldRef Name='Task_x0020_Type' /></ViewFields>",
        CAMLQuery: '<Query>' +
        '<OrderBy>' +
        '<FieldRef Name="Priority_x0020_Number" />' +
        '</OrderBy>' +
        '</Query>', 
        CAMLRowLimit: listrowlimit,

そして、ここで私はデータを使用しています:

     CAMLRowLimit: listrowlimit,  
            completefunc: function (xData, Status) {
                $(xData.responseXML).SPFilterNode("z:row").each(function() {
                    var tdHtml = "<tr class='sortable_row' id=" + $(this).attr("ows_ID") + ">";
                    tdHtml = tdHtml + "<td style=\"width:40px;\">" + PriorityFormat($(this).attr("ows_Priority_x0020_Number"));  + "</td>";
tdHtml = tdHtml + "<td style=\"width:40px;\">" + ($(this).attr("ows_Edit_x0020_Link")).split(", ")[1] + "</td>"; 
 tdHtml = tdHtml + "<td style=\"width:46px;\">" + $(this).attr("ows_Priority") + "</td>";
tdHtml = tdHtml + "<td style=\"width:40px;\">" + TopItem($(this).attr("ows_Top_x0020_Item_x003f_")) + "</td>";
tdHtml = tdHtml + "<td style=\"width:300px;\">" + StringChk($(this).attr("ows_Purpose")) + "</td>";
 tdHtml = tdHtml + "<td style=\"width:125px;\">" + StringChk($(this).attr("ows_Work_x002d_Task_x0020_Order")) + "</td>";    
tdHtml = tdHtml + "<td style=\"width:150px;\">" + StringChk($(this).attr("ows_Work_x0020_Status")) + "</td>";
tdHtml = tdHtml + "<td style=\"width:100px;\">" + FormatDate($(this).attr("ows_DueDate")) + "</td>";
tdHtml = tdHtml + "<td style=\"width:75px;\">" + StringChk($(this).attr("ows_Task_x0020_Type")) + "</td>";
 tdHtml = tdHtml + "</tr>";
                    $("#tasksUL").append(tdHtml);

ハイパーリンクにする必要があるデータ要素は次のとおりです。 <FieldRef Name='Edit_x0020_Link' />

ここでリンクとしてフォーマットする必要があると思っていました：

tdHtml = tdHtml + "<td style=\"width:40px;\">" + ($(this).attr("ows_Edit_x0020_Link")).split(", ")[1] + "</td>";

ソーステーブルのデータは URL であり、その後に「, Edit」が続きます。ソースでは「Edit」がリンクとして表示されます。ユーザーがそのリンクをクリックすると、行 (タスク) アイテムが開き、編集できるようになります。ここでそれを複製しようとしています (したがって、「.split」) が、テキストのみが返されます。「編集」の代わりに URL を分割すると、同じことが起こります。

.js ファイル全体の完全なコードを次に示します。

<link href="../SiteAssets/jquery-ui.custom.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
    #tasksUL {
        PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
    }
    #tasksUL LI {
        PADDING-BOTTOM: 0.4em; MARGIN: 0px 3px 3px; PADDING-LEFT: 1.5em; PADDING-RIGHT: 0.4em; HEIGHT: 10px; FONT-SIZE: 1.4em; CURSOR: pointer; PADDING-TOP: 0.4em
    }
    #tasksUL LI SPAN {
        POSITION: absolute; MARGIN-LEFT: -1.3em
    }
    .listtable {
        font-size:10px;
        color:#333333;
        border-width: 1px;
        border-color: #729ea5;
        border-collapse: collapse !important;
        position: relative;
overflow-y:auto;
float:left !important; 
    }
    .listtable_hdr th {
        font-size:10px;
        background-color:#acc8cc;
        border-width: 1px;
        padding: 4px;
        border-style: solid;border-color: #729ea5;
        text-align:left;
    }
    .listtable tr {
        background-color:#d4e3e5;
    }
    .listtable td {
        font-size:10px;
        border-width: 1px;
        padding: 4px;
        border-style: solid;
        border-color: #729ea5;
        vertical-align:center;
border-collapse: collapse;
    }
    .listtable_hdr
    {   /* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here */
        position: static;    float: left;                        
    }
</style>
<script language="javascript" src="../SiteAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script language="javascript" src="../SiteAssets/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
<script language="javascript" src="../SiteAssets/jquery.SPServices.min.js" type="text/javascript"></script>


<script language="javascript" type="text/javascript">

    //CONFIGURATION VARIABLES
    //Assumes that this list is on the same site as the WebPart
    var targetListName = "AI Test List";
    var myURL = "https://myteam.navair.navy.mil/air/68cbo/Sandbox"
    var updatecount = 100;
    var listrowlimit = 50;
    var tablewidth = 975;

    var fixHelperModified = function(e, tr) {

        var $originals = tr.children();
        var $helper = tr;

        $helper.children().each(function(index) {
            $(this).width($originals.eq(index).width())
        });
    $helper.width(tablewidth);

        $helper.css('background-color', '#d3e324');

        return $helper;
    };

    function PriorityFormat(item) {
        if (typeof item === 'undefined')
            return 0;
        else
            return parseInt(item);
    }

    function TopItem(item) {
        if (item == "1")
            return "Yes";
        else 
            return "No";
    }

    function StringChk(item) {
        if (typeof item === 'undefined')
            return "&nbsp;";
        else
            return item;
    }

    function FormatDate(item) {
        if (typeof item === 'undefined')
            return "&nbsp;";
        else {
            var d = $.datepicker.parseDate("yy-mm-dd",  item);
            var dt_to = $.datepicker.formatDate('dd/mm/yy', d);
            return dt_to;
        }
    }

    function loadPrioritizedList() {
        $("#tasksUL").empty();
    // TDs below have to be 3 more width than the headers 
        $().SPServices({
            operation: "GetListItems",    
            webURL: myURL,
            listName: targetListName,
            CAMLViewFields: "<ViewFields><FieldRef Name='Priority_x0020_Number' /><FieldRef Name='Edit_x0020_Link' /><FieldRef Name='Priority' /><FieldRef Name='Top_x0020_Item_x003f_' /><FieldRef Name='Purpose' /><FieldRef Name='Work_x002d_Task_x0020_Order' /><FieldRef Name='Work_x0020_Status' /><FieldRef Name='DueDate' /><FieldRef Name='Task_x0020_Type' /></ViewFields>",
            CAMLQuery: '<Query>' +
            '<OrderBy>' +
            '<FieldRef Name="Priority_x0020_Number" />' +
            '</OrderBy>' +
            '</Query>', 
            CAMLRowLimit: listrowlimit,  
            completefunc: function (xData, Status) {
                $(xData.responseXML).SPFilterNode("z:row").each(function() {
                    var tdHtml = "<tr class='sortable_row' id=" + $(this).attr("ows_ID") + ">";
                    tdHtml = tdHtml + "<td style=\"width:40px;\">" + PriorityFormat($(this).attr("ows_Priority_x0020_Number"));  + "</td>";
tdHtml = tdHtml + "<td style=\"width:40px;\">" + ($(this).attr("ows_Edit_x0020_Link")).split(", ")[1] + "</td>"; 
 tdHtml = tdHtml + "<td style=\"width:46px;\">" + $(this).attr("ows_Priority") + "</td>";
tdHtml = tdHtml + "<td style=\"width:40px;\">" + TopItem($(this).attr("ows_Top_x0020_Item_x003f_")) + "</td>";
tdHtml = tdHtml + "<td style=\"width:300px;\">" + StringChk($(this).attr("ows_Purpose")) + "</td>";
 tdHtml = tdHtml + "<td style=\"width:125px;\">" + StringChk($(this).attr("ows_Work_x002d_Task_x0020_Order")) + "</td>";    
tdHtml = tdHtml + "<td style=\"width:150px;\">" + StringChk($(this).attr("ows_Work_x0020_Status")) + "</td>";
tdHtml = tdHtml + "<td style=\"width:100px;\">" + FormatDate($(this).attr("ows_DueDate")) + "</td>";
tdHtml = tdHtml + "<td style=\"width:75px;\">" + StringChk($(this).attr("ows_Task_x0020_Type")) + "</td>";
 tdHtml = tdHtml + "</tr>";
                    $("#tasksUL").append(tdHtml);
                });
            }
        });

        $("#tasksUL").sortable({
            containment: "#scroll2",
            helper: fixHelperModified,
            scroll: true,
            axis: "y",
            cursor: "move"
        }).disableSelection();
    }

    //Beginning to save items
    function saveListOrder() {
        $("#Dialog").dialog({ width: 200, height: 100, title: "Saving...", resizable: false, closeOnEscape: false, modal: true });
        alert('Saving new list order.');        
        var total = 0;
        var itemcnt = 0;
        var msgstart = "<Method ID='1' Cmd='Update'>";
        var msgend = "</Method>";
        var updatestart = "<Batch OnError='Continue'>";
        var updateend = "</Batch>";
        // process each
        var updatemsg = updatestart;
        $('#tasksUL tr').each(function(index) {
            // here we want to do 'updatecount' at a time to the list
            itemcnt = itemcnt + 1;
            total = total + 1;
            // create the update method for this item
            updatemsg = updatemsg + msgstart;
            updatemsg = updatemsg + "<Field Name='Priority_x0020_Number'>" + total + "</Field>";
            var itemId = $(this).attr("id");
            updatemsg = updatemsg + "<Field Name='ID'>" + itemId + "</Field>";
            updatemsg = updatemsg + msgend;

            // if we hit 100 then save to list and reset counter
            if (itemcnt == 100) {
                itemcnt = 0;
                updatemsg = updatemsg + updateend;
                SaveItem(updatemsg, total);
                updatemsg = updatestart;
            }
        });
        // Now we need to update the last items
        if (itemcnt > 0) {
            updatemsg = updatemsg + updateend;
            SaveItem(updatemsg, total);
        }
        alert('List items saved.  Reloading list.');
        $("#saveid").html("");
        loadPrioritizedList();
        $("#Dialog").dialog('close');
    }

    function SaveItem(updatemsg, total) {
        $().SPServices({
            operation: "UpdateListItems",
            debug:false,
            async: false,
            batchCmd: "Update",
            listName: targetListName,
            updates: updatemsg,
            completefunc: function(xData, Status) {
                $("#saveid").html("Updated " + total + " list items");
            }
        });
    } 


    $(document).ready(function() {
        //alert("jQuery");   
        //alert($().SPServices.SPGetCurrentSite());
        //$('.listtable').css('cursor', 'pointer');
        $("#Dialog").dialog({ width: 200, height: 100, title: "Loading...", resizable: false, closeOnEscape: false, modal: true });
        $("#msgid").html("Drag list items to save priority.");
        loadPrioritizedList();
        $("#Dialog").dialog('close');
    });
</script>

<div id="msgid">Drag rows to new position to change List Order.</div>
<br/><a id="saveLink" onclick="saveListOrder();" href="#">Save List Order</a> <br/>
<br/>

<!-- Make the widths 3 pixels smaller than the column widths because of styling -->
<div id="scroll2">
<div class="listtable_hdr" width="100%">
<table width="975px">
    <thead>
        <tr>
            <th class="contents_header" style="width:37px;">List Order</th>
            <th class="contents_header" style="width:42px;">Edit</th>
            <th class="contents_header" style="width:42px;">Priority</th>
            <th class="contents_header" style="width:37px;">Top Item?</th>
            <th class="contents_header" style="width:297px;">Effort/Purpose</th>
            <th class="contents_header" style="width:122px;">Contract-Task Order</th>
            <th class="contents_header" style="width:147px;">Work Status</th>
            <th class="contents_header" style="width:97px;">Action Need Date</th>
            <th class="contents_header" style="width:72px;">Action Type</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>
<div id="scrolldiv" class="listtable" style="height:500px;width:995px;">
<table width="975px" >
    <tbody id="tasksUL" >
    </tbody>
</table>
</div>
</div>
<div id="savemsg"></div>
<div id="Dialog" title="Loading..." style="display:none;text-align:center;padding-top:20px;"><img src="../SiteAssets//LoadingAnimationBlue.gif" /></div>

助けてくれてありがとう！

javascript - JavaScript と jQuery を使用して、SharePoint リストからハイパーリンクとしてデータを表示するためのハイパーリンク フィールド/列を取得する

1 に答える 1

Related

Reference

javascript - JavaScript と jQuery を使用して、SharePoint リストからハイパーリンクとしてデータを表示するためのハイパーリンクフィールド/列を取得する