jeudi 12 mars 2015

Sharepoint Webpart with html Table using SPSERVICES



Attached image


enter image description here


Has my SharePoint list data and the output which I want to achieve. Can you please help me to create the structure which is in the Image Dynamically Also Next time when I try to add a new item it should come under the same category. Can you please help me to genrate the HTML table or by using DIV & LI tags and assign the same dynamically.


Here is my script where I am using SPservices to fetch the data.



<script type="text/javascript" src="../SiteAssets/jquery.min.js"></script>
<script type="text/javascript" src="../SiteAssets/jquery.SPServices.min.js"></script>


<script type="text/javascript">


//this is where the script starts after the page is loaded
$(document).ready(function() {

GetData();

});

function GetData()
{

var method = "GetListItems";
var list = "ResourceList"
var fieldsToRead = "<ViewFields>" +
"<FieldRef Name='Title' />" +
"<FieldRef Name='URL' />" +
"<FieldRef Name='Category' />" +
"</ViewFields>";
var query = "<Query>" +
"<Where>" +
"<Neq>" +
"<FieldRef Name='ID'/><Value Type='Number'>0</Value>" +
"</Neq>" +
"</Where>" +
"<OrderBy>" +
"<FieldRef Name='Category'/>" +
"</OrderBy>" +
"</Query>";

var clientData = {};

var liHtml="";
var html="";


$().SPServices({
operation: method,
async: false,
listName: list,
CAMLViewFields: fieldsToRead,
CAMLQuery: query,

completefunc: function (xData, Status) {

$(xData.responseXML).SPFilterNode("z:row").each(function() {
var Url = ($(this).attr("ows_URL")).split(",")[0];
var UrlDesc=($(this).attr("ows_URL")).split(",")[1];
var Category = ($(this).attr("ows_Category"));
if(clientData.hasOwnProperty(Category)){
clientData[Category] = clientData[Category] + "," + Url + "#" +UrlDesc;
}
else
{
clientData[Category] = Url + "#" +UrlDesc;
}


});

console.log(clientData);
for (var category in clientData)
{
var category_attr;
category_attr = clientData[category];
category_attr = category_attr.split(",");

html = "<ul>" + category.trim() + "</ul>";
for(var i=0; i<category_attr.length; i++)
{
var temp = category_attr[i].split("#");
var url = temp[0].trim();
var urldesc = temp[1].trim();
liHtml += "<li>"+
"<a href='" +url +"'>"+urldesc+""+"</a>"+
"</li>";
}
html = html + liHtml;
$("#tasksUL").append(html);
}
//$("#tasksUL").append(html);
}
});

}
</script>
<div id="tasksUL" ></div>


I made some progress and i was able to assign it to UL and LI tags.

MY ORGINAL VIEW

enter image description here

OUTPUT OF THE CODE

enter image description here

But the problem is when i try to loop through the array object the previous LI values get's appended to the next LI values. Basically i am poor in UI so i was unable to get the Format which i have posted earlier. Any UI specialist help me on achieving this.


My array object clientdata is returning like this



Object { AUSTRALIA: "http://au.com# AU,http://mcg.com# MCG", INDIA: "http://kp.com# KP,http://ap.com# AP,http://tg.com# TG", PAKISTAN: "http://PK.COM# PK,http://POL# POL", USA: "http://UU# UU,http://PHL.com# PHL" }




CLIENT DATA OBJECT DURING DEBUG

enter image description here








0 commentaires:

Enregistrer un commentaire