Извлечение данных из списка sharepoint и динамическое отображение в таблице

Я новичок в javascript и sharepoint.
Скажем, есть два списка: list1 (Process, ProcessImage), list2 (SubProcess, Process). В списке2 «Процесс» - это значение поиска из списка1. Счет всех трех процессов, подпроцессов и ProcessImage не фиксирован, поэтому скажите n число.

Используя JavaScript и HTML, мне нужно показать данные на странице следующим образом:
List1

Процесс ProcessImage
Process1 ProcessImage1
Process2 ProcessImage2
процесса 3 ProcessImage3
::
::
ProcessN ProcessImageN


List2

SubProcess Process
SubProcess1 Process2
SubProcess2 Process2
SubProcess3 Process1
SubProcess4 Process4
::
SubProcessN Process3


Результат в табличной форме с использованием Javascript и HTML

ProcessImage1 ProcessImage2 ProcessImage3 ProcessImage4
SubProcess3 SubProcess1 SubProcess4
SubProcess2

javascript,html,sharepoint,

-1

Ответов: 1


List2

SubProcess Process
SubProcess1 Process2
SubProcess2 Process2
SubProcess3 Process1
SubProcess4 Process4
::
SubProcessN Process3


Результат в табличной форме с использованием Javascript и HTML

ProcessImage1 ProcessImage2 ProcessImage3 ProcessImage4
SubProcess3 SubProcess1 SubProcess4
SubProcess2

1-1
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-файла в библиотеке документов, а затем вставить его на страницу с помощью веб-части Редактора содержимого (отредактировав ее свойство «Ссылка на контент» как URL-адрес HTML-файла ).

В SharePoint 2013+ вы также можете использовать веб-часть редактора сценариев. Вы также можете использовать SharePoint Designer для создания и редактирования страницы для добавления JavaScript.

JavaScript, HTML, SharePoint,
Похожие вопросы