我是javascript和sharepoint的新手 比如,有两个列表,list1(Process,ProcessImage),list2(SubProcess,Process)。在list2" Process"是list1的查找值。所有三个Process,SubProcess和ProcessImage的计数都不是固定的,所以说n数。
使用JavaScript和HTML,我需要在页面上显示数据,如下所示:
的的List1
流程 ProcessImage
Process1 ProcessImage1
Process2 ProcessImage2
Process3 ProcessImage3
::
::
ProcessN ProcessImageN
列表2
子流程
SubProcess1 Process2
SubProcess2 Process2
SubProcess3 Process1
SubProcess4 Process4
::
SubProcessN Process3
使用Javascript和HTML的表格形式的结果
ProcessImage1 ProcessImage2 ProcessImage3 ProcessImage4
SubProcess3 SubProcess1 SubProcess4
SubProcess2
答案 0 :(得分:0)
如果您使用的是SharePoint 2010或更高版本,则可以使用JavaScript对象模型(JSOM)以编程方式访问列表项,如以下示例代码所示。
<style>
/* Adjust this CSS as necessary to adjust the style of your table */
#custom_output{display:table; }
.column_outer{display:table-cell; font-weight:bold; min-width:100px;}
.column_inner{font-weight:normal; margin:4px;}
</style>
<div id="custom_output"></div>
<script>
SP.SOD.executeOrDelayUntilScriptLoaded(function(){
var output = document.getElementById("custom_output");
var clientContext = new SP.ClientContext();
var lists = clientContext.get_web().get_lists();
var query = new SP.CamlQuery(); // blank query to get all items
var parentListItems = lists.getByTitle("List1").getItems(query),
childListItems = lists.getByTitle("List2").getItems(query);
clientContext.load(parentListItems);
clientContext.load(childListItems);
clientContext.executeQueryAsync(
function(){ // on success callback function
var columnMap = createColumns(parentListItems);
createAndAppendCells(childListItems, columnMap);
},
function(sender, args){ // on error callback function
alert(args.get_message());
}
);
// this function builds HTML columns and returns a handy reference map
function createColumns(parentListItems){
var parentEnumerator = parentListItems.getEnumerator(),
columnMap = {};
while(parentEnumerator.moveNext()){
var item = parentEnumerator.get_current();
columnMap[item.get_item("ID")] = createColumn(item);
}
return columnMap;
}
// this function adds a column to the HTML and returns a reference to a div inside it (so we can add cells later)
function createColumn(item){
var outer = document.createElement("div"),
inner = document.createElement("div"),
title = item.get_item("Process");
outer.className = "column_outer";
inner.className = "column_inner";
output.appendChild(outer).appendChild(document.createTextNode(title));
outer.appendChild(inner);
return inner;
}
// this function creates a cell for each child list item and appends it to the appropriate column
function createAndAppendCells(childListItems, columnMap){
var childEnumerator = childListItems.getEnumerator();
while(childEnumerator.moveNext()){
item = childEnumerator.get_current();
var lookup = item.get_item("Process");
if(lookup){
columnMap[lookup.get_lookupId()].appendChild(createCell(item));
}
}
}
// this function creates a cell with text derived from the given list item
function createCell(item){
var cell = document.createElement("div");
cell.innerHTML = item.get_item("SubProcess");
return cell;
}
},"sp.js");
</script>
如何在页面上嵌入代码取决于您使用的SharePoint版本。
在SharePoint 2010中,您可以将HTML / CSS / JavaScript作为HTML文件保存在文档库中,然后使用内容编辑器Web部件将其嵌入到页面中(将其“Content Link”属性编辑为URL HTML文件)。
在SharePoint 2013+中,您还可以使用脚本编辑器Web部件。您还可以使用SharePoint Designer创建和编辑页面以添加JavaScript。