Sharepoint学习笔记—ECMAScript对象模型系列-- 6、使用ECMA操作列表项对象(list item)...

  前面我们使用ECMAScript对象模型操作website对象，list对象，这里我们进一步看看如何使用模型来操作列表项List item对象。

  实践之前，首先需要在我们的Sharepoint网站上创建一个名为product的list，如下图:

 

  一、添加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 >

 

 

  二、删除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 >

 

  三、检索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 >

 

  四、查找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 >

 

  五、更新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 >