Navneet Chanalia's SharePoint Blog: How to get and update SharePoint list using SPServices and w2ui grid table?

Sample Page (SharePoint Designer):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<script type="text/javascript" src="https://domain.com/sites/siteName/SiteAssets/scripts/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://domain.com/sites/siteName/SiteAssets/scripts/jquery.SPServices.min.js"></script>
<script type="text/javascript" src="https://domain.com/sites/siteName/SiteAssets/scripts/w2ui-1.5.rc1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://domain.com/sites/siteName/SiteAssets/scripts/w2ui-1.5.rc1.min.css" />

<script language="javascript" type="text/javascript">

function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var cmlQuery="<Query><Where><Eq><FieldRef Name='Column Name'/><Value Type='Text'><![CDATA[" + decodeURI(getParameterByName('queryStringParameter',window.location.href))+ "]]></Value></Eq></Where></Query>";

var listData=[];
var counter=0;

$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "List Name",
CAMLViewFields: "<ViewFields Properties='True' />",
CAMLQuery: cmlQuery,
CAMLRowLimit: 0,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
listData.push({recid: $(this).attr("ows_ID"),Boolean: ($(this).attr("ows_Check_x0020_Box")=="1"),Resource: $(this).attr("ows_Enterprise_x0020_ID").split('#')[1]});
});
}
});
});

function UpdateItem(_id,_boolean)
{
$().SPServices({
operation: "UpdateListItems",
listName: "List Name",
ID: _id,
valuepairs: [["Check_x0020_Box", _boolean]],
completefunc: function (xData, Status) {
//alert(Status);
}
});
}

$(function () {
$('#grid').w2grid({
name: 'grid',
show: {
toolbar: true,
footer: true,
toolbarSave: true
},
columns: [
// { field: 'recid', caption: 'ID', size: '50px', sortable: true, resizable: true,show:false },
{ field: 'Boolean', caption: 'Boolean', size: '60px', sortable: true, resizable: true, style: 'text-align: center',
editable: { type: 'checkbox', style: 'text-align: center' }
},
{ field: 'Resource', caption: 'Resource', size: '120px', sortable: true, resizable: true}
],

onSave: function (event) {
var changeArr=w2ui['grid'].getChanges();
$(changeArr).each(function() {
UpdateItem($(this).attr("recid"),$(this).attr("Boolean"));
});
w2alert('Saved!');

},

records:listData
});

if(w2ui['grid'].records.length==0)
{
$("#grid").hide();
w2alert('No pending items. Thanks!');
}

});

</script>

</head>

<body>
<div id="grid" style="width: 100%; height: 400px;"></div>
</body>

</html>

Navneet Chanalia's SharePoint Blog

Saturday, 31 March 2018

How to get and update SharePoint list using SPServices and w2ui grid table?

No comments:

Post a Comment