共有リストからデータを取得し、テーブルに動的に表示

Question

私はjavascriptとsharepointの新機能です。
2つのリストlist1（Process、ProcessImage）、list2（SubProcess、Process）があります。 list2では、 "Process"はlist1の参照値です。 Process、SubProcess、ProcessImageの3つの数は固定されていないので、n個の数と言います。 JavaScriptとHTMLを使用して

、私はこのようなページ上のデータを表示する必要があります。
のList1

プロセスProcessImage
プロセス1 ProcessImage1
プロセス2 ProcessImage2
Process3 ProcessImage3
::
::
ProcessN ProcessImageN

---

LIST2

サブプロセスプロセス
SubProcess1プロセス2
SubProcess2プロセス2
SubProcess3プロセス1
SubProcess4 Process4
：
SubProces SN Process3

---

表形式で結果JavascriptとHTMLを使用して

ProcessImage1 ProcessImage2 ProcessImage3 ProcessImage4
SubProcess3 SubProcess1 SubProcess4
SubProcess2

Answer 1

は、SharePoint 2010以上を使用している場合は、使用することができます次のサンプルコードのように、プログラムでリスト項目にアクセスするためのJavaScript Object Model（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パーツを使用してページに埋め込むことができます（コンテンツリンクのプロパティをURL HTMLファイルの）。

SharePoint 2013+では、スクリプトエディタWebパーツを使用することもできます。 SharePoint Designerを使用して、JavaScriptを追加するページを作成および編集することもできます。