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

ibaobei

　　前面我们使用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 &#8216;myfolder&#8217;
    //in the product list the url will be  &#8216;/myweb/Lists/product/myfolder&#8217;.
    //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 &#8216;SP.FileSystemObjectType&#8217;.
    //The addProduct method below takes few arguments that represents the product list&#8217;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 &#8216;include&#8217;)
    // 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;
            //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;
        //            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&#8217;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>