使用Javascript和JSON對HTML上的SharePoint列表項進行分類

Question

我有一個JavaScript頁面正在查詢SharePoint列表。 列表上的信息涉及IT硬件，筆記本電腦，平板電腦等。用戶輸入了特定的類型，而我有一些更通用的硬件類型。

這就是我得到的：

這就是我需要的：

因此，在硬件標題下將對細節進行分類。 最好的方法是什么？ 以下JavaScript：

function getDeviceDetails() {
var txtTitle = "";
var txtOverview = "";
var txtAccessories = "";
var txtDevicetype = "";
var txtTypicalDeviceUsage ="";
var txtKnownSystemIssues ="";
var txtLifeCycles = "";
var txtTrafficlight = "";
var imgDevicePicture = "";
var tempLCS2 = "";
 var query = "http://collaboration-dev.norgine.com/sites/it/SystemInventory/_vti_bin/listdata.svc/Devices?$expand=Priority&$filter=Id eq " + window.DeviceId + "";

var call = $.ajax({
        url: query,
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
        }       
    });
call.done(function (data,textStatus, jqXHR){
$.each(data.d.results, function(index, item) {
        var tempID = item.Id;
        var tempTitle = item.Title;



        var DeviceOverView = item.Description;
        var AccessDetails = item.Accessories;
        var DeviceKind = item.DevicetypeValue;
        var Usage = item.TypicalUsage;
        var DevicePriority = item.PriorityValue;
        var DeviceImage = item.DeviceImage;



        txtTitle = "<p>"; //+ LifeCycleStart + "</p><p>" + LifeCycleStatus + "</p>";
        txtOverview = "<p>" + DeviceOverView + "</p>";
        txtAccessories = "<p>" + AccessDetails + "</p>";  
        txtDevicetype = "<p>" + DeviceKind  + "</p>";
        txtTypicalDeviceUsage = "<p>" + Usage + "</p>";
        txtTrafficlight = "<p>" + DevicePriority + "</p>";
        imgDevicePicture = "<img src='" + DeviceImage + "'>";

    });
    $('#devicedetails').append($(txtTitle));  
    $('#deviceoverview').append($(txtOverview));
    $('#devicekind').append(txtDevicetype);
    $('#deviceacc').append(txtAccessories);
    $('#deviceuse').append(txtTypicalDeviceUsage);
    $('#devicestatus').append(txtTrafficlight);
    $('#imageContainer').append("<img src='/sites/IT/SiteAssets/"+txtTrafficlight.replace(/<[^>]*>/g, '')+".png' />");
    $('.deviceimage').append(imgDevicePicture); 

});





call.fail(function (jqXHR,textStatus,errorThrown){
    alert("Error retrieving data: " + jqXHR.responseText);
});

}

Answer 1

您正在從SharePoint列表中獲取記錄，並按公用列值分組顯示它們。 有兩種方法可以完成此操作。

選項1：執行單獨的查詢

如果您擁有三類設備（例如，筆記本電腦，台式機和平板電腦），則可以針對要檢索的每個類別的項目查詢一次SharePoint列表。

var urlEndpoint = "http://collaboration-dev.norgine.com/sites/it/SystemInventory/_vti_bin/listdata.svc/Devices$expand=Priority,Devicetype&$filter=Id eq " + window.DeviceId + " and ";
var laptopFilter = "DevicetypeValue eq 'Laptop'",
    desktopFilter = "DevicetypeValue eq 'Desktop'",
    tabletFilter = "DevicetypeValue eq 'Tablet'";
$.ajax({
    url: urlEndpoint + laptopFilter,
    type: "GET",
    dataType: "json",
    headers: {
        Accept: "application/json;odata=verbose"
    }       
}).done(displayLaptopResults);

$.ajax({
    url: urlEndpoint + desktopFilter,
    type: "GET",
    dataType: "json",
    headers: {
        Accept: "application/json;odata=verbose"
    }       
}).done(displayDesktopResults);

$.ajax({
    url: urlEndpoint + tabletFilter,
    type: "GET",
    dataType: "json",
    headers: {
        Accept: "application/json;odata=verbose"
    }       
}).done(displayTabletResults);

function displayLaptopResults(data){ /* your code here */ }
function displayDesktopResults(data){ /* your code here */ }
function displayTabletResults(data){ /* your code here */ }

僅當您事先知道不同類別並且可以組成查詢以針對那些類別進行過濾時，才有可能。 它具有一次處理較小數據塊的優勢，在處理大型列表時可能是必需的。

如果您不知道所有可能的類別，請考慮使用下一個選項。

選項2：執行一次查詢並對結果進行后處理

或者，您可以獲取所有結果，然后根據它們的類別將它們放入內存數據結構中，然后在頁面上顯示記錄。

而不是擁有一系列物品...

var results = [item1, item2, item3, item4, item5]

您將擁有一個帶有每個類別的數組屬性的哈希圖。

var results = {
 category1: [item1, item4],
 category2: [item2, item3],
 category3: [item5]
}

以下代碼示例演示了如何處理一系列項目以對其進行分類，然后再呈現結果。

 var data = {d:{results:[ {title:"X1 Carbon",DevicetypeValue:"laptop"}, {title:"T470",DevicetypeValue:"laptop"}, {title:"MS Surface Pro3",DevicetypeValue:"tablet"}, {title:"X270",DevicetypeValue:"laptop"}, {title:"M910",DevicetypeValue:"desktop"}, {title:"MS Surface Pro4",DevicetypeValue:"tablet"}]}}; var i = 0, len = data.d.results.length, item, category, devicesByCategory = {}; // loop through the results and add them to the devicesByCategory object while(i < len){ item = data.d.results[i]; category = item.DevicetypeValue; if(devicesByCategory[category]){ // if devicesByCategory already has an array for this item's category, add the item to it devicesByCategory[category].push(item); }else{ // otherwise, create a new array for the category devicesByCategory[category] = [item]; } i++; } // loop through all the categories and render them for(var category in devicesByCategory){ var div = createCategorySection(category); addResultsToSection(div,devicesByCategory[category]); } function createCategorySection(value){ var div = document.getElementById("output").appendChild(document.createElement("div")); div.appendChild(document.createElement("h1")).appendChild(document.createTextNode(value)); return div; } function addResultsToSection(section,results){ var ul = section.appendChild(document.createElement("ul")); i = 0; len = results.length; while(i < len){ item = results[i]; ul.appendChild(document.createElement("li")).appendChild(document.createTextNode(item.title)); i++; } } 

 <div id="output"></div>