[SharePoint 2010] Javascript Client Object Model 在SharePoint2010中的使用方法

filts

　　SharePoint2010 提供了基于Javascript的 Client Object Model库，用来操作SharePoint对象模型，当开发时需要用到javascript作客户端开发时，这些库将非常有用，这里介绍一下常规的方法。
　　1. SP.js load
　　首先，我们需要将相关的JS库load进来，主要是SP.js这个文件，它具体位置是在C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS下，我们这里可以借助<SharePoint: ScriptLink>这样的服务器端标签来自动引入SP.js, 在页面内加入

<Sharepoint:ScriptLink name="SP.js" runat="server" ID="SPScriptLink" LoadAfterUI="True"  OnDemand="true" localizable="false"/>　　这样我们的Client Object Model库就load进来了。注意LoadAfterUI="True"，所以当你的js代码需要在Page_Load()时候执行，并且将调用到SP.js的时候，为了确保SP.js 已经load，请使用
　　ExecuteOrDelayUntilScriptLoaded(functionName, "sp.js");
　　其中functionName 是你自定义的方法名，这样确保你的方法会在SP.js load完成后被调用。
　　2. Get List item & Edit List Item
　　在load 了SP.js后，我们可以基于Client Object Model 对list作操作了。
　　如何得到某个List Item：
　　




   1: function GetItemTest(queryId)   2:     {   3:         clientContext = SP.ClientContext.get_current();    4:         var list = clientContext.get_web().get_lists().getByTitle('#Your List Name#');   5:         var camlQuery = new SP.CamlQuery();   6:         var strCaml = "<View><ViewFields><FieldRef Name='LinkTitle'/><FieldRef Name='Field1' /><FieldRef Name='Field2'/></ViewFields><Query><Where><Eq><FieldRef Name='LinkTitle' /><Value Type='Text'>" + queryId + "</Value></Eq></Where></Query></View>";                     7:         camlQuery.set_viewXml(strCaml);   8:         this.collListItem = list.getItems(camlQuery);   9:         clientContext.load(collListItem);  10:         clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));  11:     }



   1: function onQuerySucceeded(sender, args)   2:     {   3:         var listItemEnumerator =  collListItem.getEnumerator();   4:     5:         while(listItemEnumerator.moveNext())   6:         {   7:             var oListItem = listItemEnumerator.get_current();   8:             var item = oListItem.get_item('Field1');   9:         }  10:    }  11:    12: function onQueryFailed(sender, args)  13:     {  14:         alert('Request failed' + args.get_message() + '\n' + arg.get_stackTrace());  15:     }  16:    17:    18: var collListItem = null;  19: var clientContext = null;　　注意在onQuerySucceeded方法中的变量item，如果Field1是普通的single line text之类的类型，那么item就是Field1的值了，如果Field1是look up类型，那么可以有
　　item.get_lookupId() 和 item.get_lookupValue() 来取得相应的值。 如果 Field1是Multi - People and Group类型(允许插入多人)，那么麻烦一些，因为这时候返回的item是个SP.FieldUserValue的数组，遍历数组




   1: for(var i = 0; i < item.length; i++)   2:                 {   3:                    alert(item.get_lookupId());   4:                    alert(item.get_lookupValue());   5:                 }　　一样可以取到相应的People & Group值。
　　当我需要对某个Item做update时，方法如下




   1: oListItem.set_item("Field1",fieldValue);   3:             oListItem.update();   4:             clientContext.load(oListItem);   5:             clientContext.executeQueryAsync(onSuccess, onfail); 　　这里的onSuccess 和Onfail 仍然为回调方法，和上面的类似，这里就不详细写了。 这样的方法update一个single line text类型的字段没有问题，但是如果是Lookup字段，该怎么Update呢？




   1: var fieldValue = SP.FieldLookupValue.set_lookupId(value);  　　这样的fieldValue 就可以用上面的update方法对lookup类型的字段更新了。
　　如果 Field1是Multi - People and Group类型(允许插入多人)，那么麻烦一些,因为要创建一个SPFieldUserValue 的数组来更新




   1: var fieldValue = new Array();   2: var userValue1 = SP.FieldUserValue.fromUser("UserName1");   3: var userValue2 = SP.FieldUserValue.fromUser("UserName2");   4: fieldValue.push(userValue1);   5: fieldValue.push(userValue2);　　这样构造出来的fieldValue 可以用来update Multi - People and Group类型的字段了。
　　其他不同类型的字段的获取和更新都可以采用这个思路，只是具体的类型不同而已，可以通过查阅msdn来完成。
　　http://msdn.microsoft.com/en-us/library/ee557057.aspx
　　3. Pop up dialogue
　　如果你想你的应用能够有类似新建Item操作弹出窗口，那么就选用弹出窗口的方法吧：




   1: function Callback(dialogResult) {   2:        if (dialogResult == SP.UI.DialogResult.OK)   3:        {   4:            alert("Register this training successfully.");   5:        }   6:        else   7:        {   8:            ExecuteOrDelayUntilScriptLoaded(RemoveCurrentUserRegistrationInfo, "sp.js");   9:        }  10:   }  11:    12:    function openPopup(modelName,targetUrl,args) {  13:        var options = {  14:            url: targetUrl,  15:            title: modelName,  16:            allowMaximize: false,  17:            showClose: true,  18:            width: 650,  19:            height: 130,  20:            showClose:false,  21:            dialogReturnValueCallback: Callback  22:        }  23:             24:            SP.UI.ModalDialog.showModalDialog(options);  25:    } 　　openPopup方法首先配置一个options 对象，设置相关参数，然后作为窗口弹出。