Immer ein hyperlink-Feld/Spalte anzeigen von Daten als hyperlink aus einer SharePoint-Liste mit Hilfe von JavaScript und jQuery

Habe ich, was ich denke, sollte ein einfaches Problem zu lösen, aber es hat mich viel zu lange, um herauszufinden.

Den hintergrund auf, das ist so: im Grunde das, was ich habe, ist eine SharePoint-Liste, enthält task-Objekte. Wir haben ein .js-Datei und veröffentlicht es auf der Website Vermögen Abschnitt zusammen mit einigen jQuery-Dateien. Diese Dateien dienen zum ziehen von Daten aus, dass die task-Liste und verwenden Sie es in einem neuen task-Liste (für die Prüfung) mit einer CAML-query.

Im Grunde, was dieses alles nicht ist: mit einem webpart, die uns erlauben, in einem test-segment ist von der SP-Website zu nehmen, die test-task-Liste und neu Sortieren mit drag und drop (wir markieren Sie eine beliebige Zeile, und ziehen Sie es, wo wir wollen, es werden in der Liste und es fällt Recht gibt).

Also mit alle, meine eigentliche problem ist sehr einfach. Auf dieser drag-and-drop-Liste, eine der Spalten ist eine Spalte Bearbeiten. Es zieht ein hyperlink-Feld aus der Quell-task-Liste. In meiner test-Liste, ich kann nicht für das Leben von mir bekommen, dass der link für die Anzeige als hyperlink angezeigt, es erscheint nur als text!
Ich bin ziemlich neu in der Integration all dieser JavaScript, SharePoint, jQuery, etc, so bin wahrscheinlich etwas fehlt offensichtlich. Ich wäre sehr dankbar für jede Unterstützung und danken Ihnen im Voraus.
Hier ist der code, den ich verwende, gefolgt von ein wenig mehr Erklärung. Alles funktioniert, ausser das der link!

Hier ist die CAML-Abfrage, die Daten zu betrachten, aus der Liste:

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,  

Und hier ist, wo ich bin, mit der Daten:

     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);

Das Daten-element, muss ein hyperlink ist: <FieldRef Name='Edit_x0020_Link' />

Ich dachte, ich müsste-format als link hier:

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

Die Daten aus der Quell-Tabelle ist eine URL, gefolgt von "Bearbeiten", die in der Quelle zeigt "Bearbeiten" als link – wenn ein Benutzer klickt auf diesen link, es öffnet sich die Zeile (task) Element in der Lage sein, um es zu Bearbeiten. Ich bin versucht, zu replizieren, dass hier (daher das “.split"), aber wieder, bin nur immer text zurück. Dasselbe passiert, wenn ich den split für die URL anstelle von "Bearbeiten".

Hier ist der vollständige code aus der ganzen .js-Datei:

<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>

Nochmals vielen Dank für jede Hilfe!!!

InformationsquelleAutor WCS | 2013-06-18