前面我们使用ECMAScript对象模型操作website对象,list对象,这里我们进一步看看如何使用模型来操作列表项List item对象。
实践之前,首先需要在我们的Sharepoint网站上创建一个名为product的list,如下图:
![](https://i-blog.csdnimg.cn/blog_migrate/5bf6476fd11582a4b6dd16d1c1a88a81.jpeg)
一、添加List Item--新增一个product(Add Product)
<
input
id
="btnNewProduct"
type
="button"
value
="Add Product"
onclick
='addProduct("AsusLapTop4",
"Asus AX44H4 Laptop2", "2011-12-16", "46", "Computer")'
/>
<
script
type
="text/javascript"
>
// Add Item to List
// The code snippet below shows that you need to get the current SharePoint Context first.
// Then get the current web from the context. And then you need to get the list from the web.
// Then I have used ListItemCreationInformation object. There are two important properties of ListItemCreationInforamtion:
// ListItemCreationInformation.folderUrl: this property defines in which location you want to add the item.
// The url should start with forward slash(/). For example for the web myweb and list product and for the folder ‘myfolder’
// in the product list the url will be ‘/myweb/Lists/product/myfolder’.
// ListItemCreationInformation.UnderlyingObjectType: this value identity the type of object to create.
// The possible values are File,Folder, Web and Invalide. The values can be found in ‘SP.FileSystemObjectType’.
// The addProduct method below takes few arguments that represents the product list’s fields.
function addProduct(productName, productDesc, productLaunchDate, productAvailQty, productType) {
try {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle( ' product ' );
var listItemCreationInfo = new SP.ListItemCreationInformation();
var newItem = list.addItem(listItemCreationInfo);
newItem.set_item( ' Title ' , productName); newItem.set_item( ' ProductName ' , productName); newItem.set_item( ' ProductDescription ' , productDesc);
newItem.set_item( ' LaunchDate ' , productLaunchDate);
newItem.set_item( ' AvailableQuantity ' , productAvailQty);
newItem.set_item( ' ProductType ' , productType); newItem.update();
context.executeQueryAsync(Function.createDelegate( this , this .addProductsuccess),
Function.createDelegate( this , this .addProductfailed));
} catch (e) { alert( ' error: ' + e.Message); }
}
// If you look a bit closer in the above code snippet you can find that ClientContext.executeQueryAsync
// takes two function delegates. The first one will be invoked when the ECMAScript get executed successfully.
// The second one will be invoked otherwise. The two methods are defined below:
function addProductsuccess() { alert( ' add Product success ' ); }
function addProductfailed(sender, args) {
alert( ' failed. Message: ' + args.get_message());
}
</ script >
// Add Item to List
// The code snippet below shows that you need to get the current SharePoint Context first.
// Then get the current web from the context. And then you need to get the list from the web.
// Then I have used ListItemCreationInformation object. There are two important properties of ListItemCreationInforamtion:
// ListItemCreationInformation.folderUrl: this property defines in which location you want to add the item.
// The url should start with forward slash(/). For example for the web myweb and list product and for the folder ‘myfolder’
// in the product list the url will be ‘/myweb/Lists/product/myfolder’.
// ListItemCreationInformation.UnderlyingObjectType: this value identity the type of object to create.
// The possible values are File,Folder, Web and Invalide. The values can be found in ‘SP.FileSystemObjectType’.
// The addProduct method below takes few arguments that represents the product list’s fields.
function addProduct(productName, productDesc, productLaunchDate, productAvailQty, productType) {
try {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle( ' product ' );
var listItemCreationInfo = new SP.ListItemCreationInformation();
var newItem = list.addItem(listItemCreationInfo);
newItem.set_item( ' Title ' , productName); newItem.set_item( ' ProductName ' , productName); newItem.set_item( ' ProductDescription ' , productDesc);
newItem.set_item( ' LaunchDate ' , productLaunchDate);
newItem.set_item( ' AvailableQuantity ' , productAvailQty);
newItem.set_item( ' ProductType ' , productType); newItem.update();
context.executeQueryAsync(Function.createDelegate( this , this .addProductsuccess),
Function.createDelegate( this , this .addProductfailed));
} catch (e) { alert( ' error: ' + e.Message); }
}
// If you look a bit closer in the above code snippet you can find that ClientContext.executeQueryAsync
// takes two function delegates. The first one will be invoked when the ECMAScript get executed successfully.
// The second one will be invoked otherwise. The two methods are defined below:
function addProductsuccess() { alert( ' add Product success ' ); }
function addProductfailed(sender, args) {
alert( ' failed. Message: ' + args.get_message());
}
</ script >
二、删除List Item--删除一个product(Delete Product)
<
input
id
="btnDeleteProduct"
type
="button"
value
="Delete Product"
onclick
='deleteProduct(1)'
/>
<
script
type
="text/javascript"
>
// Delete Item
// To delete a product by product id the following code snippet can be used:
// To delete an object in Client Object Model you need to invoke the deleteObject method of that object.
function deleteProduct(productId) {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle( ' product ' );
var itemToDelete = list.getItemById(productId);
itemToDelete.deleteObject();
context.executeQueryAsync(Function.createDelegate( this , this .deleteProductsuccess),
Function.createDelegate( this , this .deleteProductfailed));
}
function deleteProductsuccess() { alert( ' delete Product success ' ); }
function deleteProductfailed(sender, args) {
alert( ' failed. Message: ' + args.get_message());
}
</ script >
// Delete Item
// To delete a product by product id the following code snippet can be used:
// To delete an object in Client Object Model you need to invoke the deleteObject method of that object.
function deleteProduct(productId) {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle( ' product ' );
var itemToDelete = list.getItemById(productId);
itemToDelete.deleteObject();
context.executeQueryAsync(Function.createDelegate( this , this .deleteProductsuccess),
Function.createDelegate( this , this .deleteProductfailed));
}
function deleteProductsuccess() { alert( ' delete Product success ' ); }
function deleteProductfailed(sender, args) {
alert( ' failed. Message: ' + args.get_message());
}
</ script >
三、检索List Item--根据ProductID来获取一个product(Get Item By ProductID)
<
input
id
="btnGetItemByID"
type
="button"
value
="Get Item By ProductID"
onclick
='getProductById(2)'
/>
<
script
type
="text/javascript"
>
// Get Item by ID
// To get an item using ECMAScript, you need to share a common variable between the method that
// execute the ECMAScript (getProductById method in the following code snippet) and
// callback method (productReceived, failed in the snippet below).
// Only for this reason I have defined a variable product in the first line of the code snippet below.
var product;
function getProductById(productId) {
try {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle( ' product ' );
this .product = list.getItemById(productId);
context.load(product, ' ProductName ' , ' ProductDescription ' , ' ProductType ' , ' LaunchDate ' , ' AvailableQuantity ' );
context.executeQueryAsync(Function.createDelegate( this , this .getProductByIdproductReceived),
Function.createDelegate( this , this .getProductByIdfailed));
}
catch (e) {
alert(e);
}
}
function getProductByIdproductReceived() {
// alert('got product');
gotProduct( this .product);
}
function getProductByIdfailed(sender, args) {
alert( ' failed. Message: ' + args.get_message());
}
function gotProduct(item) {
alert( " ProductName: " + item.get_item( " ProductName " ) + " \r\ProductDescription: " + item.get_item( " ProductDescription " ));
}
</ script >
// Get Item by ID
// To get an item using ECMAScript, you need to share a common variable between the method that
// execute the ECMAScript (getProductById method in the following code snippet) and
// callback method (productReceived, failed in the snippet below).
// Only for this reason I have defined a variable product in the first line of the code snippet below.
var product;
function getProductById(productId) {
try {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle( ' product ' );
this .product = list.getItemById(productId);
context.load(product, ' ProductName ' , ' ProductDescription ' , ' ProductType ' , ' LaunchDate ' , ' AvailableQuantity ' );
context.executeQueryAsync(Function.createDelegate( this , this .getProductByIdproductReceived),
Function.createDelegate( this , this .getProductByIdfailed));
}
catch (e) {
alert(e);
}
}
function getProductByIdproductReceived() {
// alert('got product');
gotProduct( this .product);
}
function getProductByIdfailed(sender, args) {
alert( ' failed. Message: ' + args.get_message());
}
function gotProduct(item) {
alert( " ProductName: " + item.get_item( " ProductName " ) + " \r\ProductDescription: " + item.get_item( " ProductDescription " ));
}
</ script >
四、查找list Item--在product列表中查找product(search Item By ProductTitle)
<
input
id
="btnSearchItem"
type
="button"
value
="Search Item By ProductTitle"
onclick
='getProducts("AsusLapTop4")'
/>
<
script
type
="text/javascript"
>
// Search Items from a List
// In the code snippet below Caml Query is used for searching a product by title.
// I have used Caml Query to search product by title. Notice here that the load takes a second parameter (wrapped with ‘include’)
// specifying all properties to load for items.
debugger ;
var productcollection;
function getProducts(title) {
try {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle( ' product ' );
var query = ' <View Scope=\'RecursiveAll\'> ' + ' <Query> ' + ' <Where> ' +
' <Contains> ' + ' <FieldRef Name=\'ProductName\'/> ' +
' <Value Type=\'Text\'> ' + title + ' </Value> ' +
' </Contains> ' +
' </Where> ' + ' </Query> ' +
' </View> ' ;
var query2 = ' <View Scope=\'RecursiveAll\'> ' + ' <Query> ' + ' <Where> ' +
' <Contains> ' + ' <FieldRef Name=\'ProductName\'/> ' +
' <Value Type=\'Text\'> ' + title + ' </Value> ' +
' </Contains> ' +
' </Where> ' + ' </Query> ' +
' <ViewFields><FieldRef Name="ProductName"/><FieldRef Name="ProductDescription"/></ViewFields> ' ;
var query3 = ' <View Scope=\'RecursiveAll\'> ' + ' <Query> ' + ' <Where> ' +
' <Contains> ' + ' <FieldRef Name=\'ProductName\'/> ' +
' <Value Type=\'Text\'> ' + title + ' </Value> ' +
' </Contains> ' +
' </Where> ' + ' </Query> ' +
' </View> ' ;
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(query3);
this .productcollection = list.getItems(camlQuery);
context.load( this .productcollection, ' Include(ProductName, ProductDescription, ProductType, LaunchDate, AvailableQuantity) ' );
context.executeQueryAsync(Function.createDelegate( this , this .getProductsproductsReceived),
Function.createDelegate( this , this .getProductsfailed));
} catch (e) { alert(e); }
}
function getProductsproductsReceived() {
// alert('got products');
var listEnumerator = this .productcollection.getEnumerator();
prcessProducts( this .productcollection);
// prcessProducts(listEnumerator);
// onQuerySucceeded(this.productcollection);
}
function prcessProducts(items) {
var count = 0 ;
var TextFiled = '' ;
var ListEnumerator = items.getEnumerator();
while (ListEnumerator.moveNext()) {
count = count + 1 ;
var currentItem = ListEnumerator.get_current();
// do something with this here. Coupled with a platform like jQuery, you could do all kinds of great things
TextFiled += currentItem.get_item( ' ProductName ' ).toString();
}
alert(TextFiled);
alert(count);
}
function getProductsfailed(sender, args) {
alert( ' failed. Message: ' + args.get_message());
}
function onQuerySucceeded(collList) {
var listInfo = '' ;
for ( var i = 0 ; i < this .productcollection.length; i ++ ) {
var oList = this .productcollection[i];
// listInfo += 'Title: ' + oList.get_title() + ' ID: ' + oList.get_id().toString();
listInfo += " ProductName: " + oList.get_item( " ProductName " ) + " \r\ProductDescription: " + oList.get_item( " ProductDescription " );
}
listInfo += this .product.length;
alert(listInfo.toString());
// var listInfo = '';
// var listEnumerator = collList.getEnumerator();
// for (var i = 0; i < this.listEnumerator.length; i++) {
// var oList = this.listEnumerator[i];
// listInfo += 'Title: ' + oList.get_title() + ' Created: ' + oList.get_created().toString() + '\n';
// }
// while (listEnumerator.moveNext()) {
// var oList = listEnumerator.get_current();
// //listInfo += 'Title: ' + oList.get_title() + ' Created: ' + oList.get_created().toString() + '\n';
// listInfo += "ProductName: " + oList.get_item("ProductName") + "\r\ProductDescription: " + oList.get_item("ProductDescription");
// }
// alert(listInfo);
}
</ script >
// Search Items from a List
// In the code snippet below Caml Query is used for searching a product by title.
// I have used Caml Query to search product by title. Notice here that the load takes a second parameter (wrapped with ‘include’)
// specifying all properties to load for items.
debugger ;
var productcollection;
function getProducts(title) {
try {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle( ' product ' );
var query = ' <View Scope=\'RecursiveAll\'> ' + ' <Query> ' + ' <Where> ' +
' <Contains> ' + ' <FieldRef Name=\'ProductName\'/> ' +
' <Value Type=\'Text\'> ' + title + ' </Value> ' +
' </Contains> ' +
' </Where> ' + ' </Query> ' +
' </View> ' ;
var query2 = ' <View Scope=\'RecursiveAll\'> ' + ' <Query> ' + ' <Where> ' +
' <Contains> ' + ' <FieldRef Name=\'ProductName\'/> ' +
' <Value Type=\'Text\'> ' + title + ' </Value> ' +
' </Contains> ' +
' </Where> ' + ' </Query> ' +
' <ViewFields><FieldRef Name="ProductName"/><FieldRef Name="ProductDescription"/></ViewFields> ' ;
var query3 = ' <View Scope=\'RecursiveAll\'> ' + ' <Query> ' + ' <Where> ' +
' <Contains> ' + ' <FieldRef Name=\'ProductName\'/> ' +
' <Value Type=\'Text\'> ' + title + ' </Value> ' +
' </Contains> ' +
' </Where> ' + ' </Query> ' +
' </View> ' ;
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(query3);
this .productcollection = list.getItems(camlQuery);
context.load( this .productcollection, ' Include(ProductName, ProductDescription, ProductType, LaunchDate, AvailableQuantity) ' );
context.executeQueryAsync(Function.createDelegate( this , this .getProductsproductsReceived),
Function.createDelegate( this , this .getProductsfailed));
} catch (e) { alert(e); }
}
function getProductsproductsReceived() {
// alert('got products');
var listEnumerator = this .productcollection.getEnumerator();
prcessProducts( this .productcollection);
// prcessProducts(listEnumerator);
// onQuerySucceeded(this.productcollection);
}
function prcessProducts(items) {
var count = 0 ;
var TextFiled = '' ;
var ListEnumerator = items.getEnumerator();
while (ListEnumerator.moveNext()) {
count = count + 1 ;
var currentItem = ListEnumerator.get_current();
// do something with this here. Coupled with a platform like jQuery, you could do all kinds of great things
TextFiled += currentItem.get_item( ' ProductName ' ).toString();
}
alert(TextFiled);
alert(count);
}
function getProductsfailed(sender, args) {
alert( ' failed. Message: ' + args.get_message());
}
function onQuerySucceeded(collList) {
var listInfo = '' ;
for ( var i = 0 ; i < this .productcollection.length; i ++ ) {
var oList = this .productcollection[i];
// listInfo += 'Title: ' + oList.get_title() + ' ID: ' + oList.get_id().toString();
listInfo += " ProductName: " + oList.get_item( " ProductName " ) + " \r\ProductDescription: " + oList.get_item( " ProductDescription " );
}
listInfo += this .product.length;
alert(listInfo.toString());
// var listInfo = '';
// var listEnumerator = collList.getEnumerator();
// for (var i = 0; i < this.listEnumerator.length; i++) {
// var oList = this.listEnumerator[i];
// listInfo += 'Title: ' + oList.get_title() + ' Created: ' + oList.get_created().toString() + '\n';
// }
// while (listEnumerator.moveNext()) {
// var oList = listEnumerator.get_current();
// //listInfo += 'Title: ' + oList.get_title() + ' Created: ' + oList.get_created().toString() + '\n';
// listInfo += "ProductName: " + oList.get_item("ProductName") + "\r\ProductDescription: " + oList.get_item("ProductDescription");
// }
// alert(listInfo);
}
</ script >
五、更新List Item--更新product(Update Items for a List)
<
input
id
="btnUpdateItem"
type
="button"
value
="Update a Product"
onclick
='updateProduct(3,
"AsusLapTopNew3", "Asus Lap Top New Desc3", "2011-12-18", "100", "Computer") '
/>
<
script
type
="text/javascript"
>
// Update a list item
// The code snippet below shows how to update a product item.
// The list item’s set_item(propertyname, propertyvalue) method is used to update the field values.
function updateProduct(productid, productName, productDesc, productLaunchDate, productAvailQty, productType) {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle( ' product ' );
var product = list.getItemById(productid);
product.set_item( ' ProductName ' , productName);
product.set_item( ' ProductDescription ' , productDesc);
product.set_item( ' ProductType ' , productType);
product.set_item( ' LaunchDate ' , productLaunchDate);
product.set_item( ' AvailableQuantity ' , productAvailQty);
product.update();
context.executeQueryAsync(Function.createDelegate( this , this .updateProductsuccess), Function.createDelegate( this , this .updateProductfailed));
}
function updateProductsuccess() {
alert( ' Update products ' );
}
function updateProductfailed(sender, args) {
alert( ' failed. Message: ' + args.get_message());
}
</ script >
// Update a list item
// The code snippet below shows how to update a product item.
// The list item’s set_item(propertyname, propertyvalue) method is used to update the field values.
function updateProduct(productid, productName, productDesc, productLaunchDate, productAvailQty, productType) {
var context = new SP.ClientContext.get_current();
var web = context.get_web();
var list = web.get_lists().getByTitle( ' product ' );
var product = list.getItemById(productid);
product.set_item( ' ProductName ' , productName);
product.set_item( ' ProductDescription ' , productDesc);
product.set_item( ' ProductType ' , productType);
product.set_item( ' LaunchDate ' , productLaunchDate);
product.set_item( ' AvailableQuantity ' , productAvailQty);
product.update();
context.executeQueryAsync(Function.createDelegate( this , this .updateProductsuccess), Function.createDelegate( this , this .updateProductfailed));
}
function updateProductsuccess() {
alert( ' Update products ' );
}
function updateProductfailed(sender, args) {
alert( ' failed. Message: ' + args.get_message());
}
</ script >