![](/img/trans.png)
[英]Getting a hyperlink field/column to display data as a hyperlink from a SharePoint List, using JavaScript and jQuery
[英]Generating a hyperlink from variables or other method (using JavaScript, jQuery, and CAML for a SharePoint List)
這是一個有關如何使超鏈接進入SharePoint表的問題,其中必須從包含鏈接某些部分的變量中生成超鏈接(除非有其他方法或更好的方法)。 如果我以不清楚或不正確的方式提出問題,我深表歉意。對於這種類型的集成以及其中的某些技術,我還是很陌生。 我可能包含了比必要更多的細節。
我在做什么:
基本上,我擁有一個包含任務項目的SharePoint列表(稱為“任務測試列表”)。 這被發布到站點的一部分,其鏈接如下所示:
https://myteam.thiscompany.com/techdev/sandbox/lists/Task%20Test%20List/Task%20List2.aspx
我們已經創建了一個.js文件,並將其發布到“網站資產”部分。 此JavaScript文件還使用jQuery和CAML查詢。 它的作用是從“測試任務列表”中提取數據,並將其用於名為“排序列表”的新任務列表(用於測試)中。 此新列表位於稱為WebPart頁面的部分中。 該站點的鏈接如下所示:
https://myteam.thiscompany.com/techdev/sandbox/WebPart%20Pages/Forms/AllItems.aspx
實際頁面的鏈接(稱為SortList)如下所示:
https://myteam.thiscompany.com/techdev/Sandbox/WebPart%20Pages/SortList.aspx
基本上,所有這些操作是:使用Webpart,允許我們在SP站點的測試段中獲取該測試任務列表,然后通過拖放將其重新排序(我們選擇任何行並將其拖動到所需的位置在列表中,它就在那里落下)。
問題:在此拖放列表(SortList)上,其中一列是“編輯”列。 它從源任務列表中拉出一個超鏈接字段。 單擊該鏈接可以使我們編輯任務項(其數據組成該行)-它通過使用任務ID來完成。
但是,當單擊該鏈接時,該鏈接將轉到Webparts頁面,我需要它進入“測試任務列表”。 因此,例如,點擊此處即可:
https://myteam.thiscompany.com/techdev/Sandbox/WebPart%20Pages/Edit
但是我需要它去這里:
以上是我認為我需要更改的所有鏈接:
列表= 532ed23b%2D1041%2D4600%2D887f%2D58b08e1f4b9d&ID = 1909&Source = https%3A%2F%2Fmyteam%2Ethiscompany%2com%2FSandbox%2FLists%2FTask%2520Test%2520List%2FTask%2520List2%2D2aaspx673 2D4e1c1f962b2f
在我當前的URL中,我指向“ Task%20List”,正確的名稱應為:“ Task%20Test%List”。
用於列表的GUID為“ 532ed23b%2D1041%2D4600%2D887f%2D58b08e1f4b9d”
據我所知,重要的參數是list =(將需要進行硬編碼,因此我正考慮在JS文件中添加一個列表變量並引用該變量)和ID =(我已經擁有)。
如果是正確的話,我正在尋找有關該操作的建議,因為我不知道。 或者,如果還有其他方法,我將不勝感激。
這是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);
鏈接的代碼當前為:
tdHtml = tdHtml + '<td style=\"width:40px;\"><a href=\"'+($(this).attr("ows_Edit_x0020_Link")).split(", ")[1]+'\">'+ ($(this).attr("ows_Edit_x0020_Link")).split(", ")[1] +'</a></td>';
這是SortList的樣子:
這是整個.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 = "Task Test List";
var myURL = "https://myteam.thiscompany.com/techdev/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 " ";
else
return item;
}
function FormatDate(item) {
if (typeof item === 'undefined')
return " ";
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;\"><a href=\"'+($(this).attr("ows_Edit_x0020_Link")).split(", ")[1]+'\">'+ ($(this).attr("ows_Edit_x0020_Link")).split(", ")[1] +'</a></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>
再次感謝任何幫助!
實際上,您必須將$(this).attr('ows_Edit_x0020_Link').split(', ')[0]
(注意[0]而不是[1])用作“ href”。 如果您使用[1],則將顯示“編輯”,而不是URL
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.