2013-08-29 8 views
4

У меня есть требование, чтобы создать навигации веб-часть в пределах SharePoint 2010. Я использую таблицу для отображения элементов из списка SharePoint и таблица структурирована так:createElement <a href=variable1>variable2</a>

Column1 = Текст для отображения (Заголовок) Column2 = URL (TitleLink)

Я не могу понять, как достичь создания тега <a href></a> и поместить переменные внутри подходящих мест. Результатом, который я постоянно получаю, является только разметка HTML в тегах <th>. Я искал в нескольких местах на google и пока не нашел хорошего ответа.

Ниже приведен код, который отлично работает в отношении печати моих заголовков таблиц с переменными. Однако за этим напечатанным текстом (theHeaderText) я хочу поместить ссылку за ним, поэтому, когда пользователь нажимает, он переходит к этой ссылке.

var siteUrl = '/sites/dev/'; 
var theCounter = 0; 
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js"); 

function retrieveListItems() { 
var clientContext = new SP.ClientContext(siteUrl); 
var oList = clientContext.get_web().get_lists().getByTitle('myList'); 
var camlQuery = new SP.CamlQuery(); 
camlQuery.set_viewXml("<Where><And><IsNotNull><FieldRef Name='Title' /></IsNotNull> <IsNotNull><FieldRef Name='TitleLink' /></IsNotNull></And></Where>"); 
this.collListItem = oList.getItems(camlQuery); 
clientContext.load(collListItem); 
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),  Function.createDelegate(this, this.onQueryFailed)); 
} 

function onQuerySucceeded(sender, args) 
{ 
var listItemEnumerator = collListItem.getEnumerator(); 
    while (listItemEnumerator.moveNext()) 
    { 
    var oListItem = listItemEnumerator.get_current(); 

    //Each column in in the SharePoint List will essentially become an array. 
    //So make an array for each column that will be returned! 

    var theHeaders = new Array(); 
    var HeaderLinks = new Array(); 
    theCounter += 1; 
    theHeaders[theCounter - 1] = oListItem.get_item('Title'); 
    HeaderLinks[theCounter - 1] = oListItem.get_item('TitleLink'); 

    //Get the Table Element created in HTML 
    var getTheTableTag = document.getElementById('theTable'); 


    //Create the headers (top level links) 
    var createTheHeaderElements = document.createElement('th'); 
    createTheHeaderElements.id = 'headerTag'; 
    var theHeaderText = document.createTextNode(theHeaders[theCounter - 1]); 
    createTheHeaderElements.appendChild(theHeaderText); 
    getTheTableTag.appendChild(createTheHeaderElements); 

}; 
} 
function onQueryFailed(sender, args) { 
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); 
} 

ответ

13

Использование setAttribute так:

 var createA = document.createElement('a'); 
     var createAText = document.createTextNode(theCounter); 
     createA.setAttribute('href', "http://google.com"); 
     createA.appendChild(createAText); 
     getTheTableTag.appendChild(createA); 
1

Вы можете использовать тд вместо го, как ссылка жирным шрифтом по умолчанию:

var createTheHeaderElements = document.createElement('td'); 
    createTheHeaderElements.id = 'headerTag'; 
    var link = document.createElement('a'); 
    var theHeaderText = document.createTextNode(theHeaders[theCounter - 1]); 
    link.setAttribute("href","www.google.com"); 
    link.appendChild(theHeaderText); 
    createTheHeaderElements.appendChild(link); 
    getTheTableTag.appendChild(createTheHeaderElements); 
2

Благодаря mwilson

Вот еще один пример кода

Изменение

<body> to <body id="myBody"> 

Добавить к вашему телу:

<button onclick="outputFunction()" >click me</button> 

Затем добавить сценарий вне тела

<script type="text/javascript"> 

function outputFunction() { 
    var myBodyId = document.getElementById("myBody"); 
    var newBaitTag = document.createElement('a'); 
    var newBaitText = document.createTextNode("Bonus Click"); 
    newBaitTag.setAttribute('href', "https://www.youtube.com/watch?v=dQw4w9WgXcQ"); 
    // we create new things above 

    // we append them to the page body below 
    newBaitTag.appendChild(newBaitText); 
    myBodyId.appendChild(newBaitTag);  
} 

</script>