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

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：

 

function GetItemTest(queryId)
    {
        clientContext = SP.ClientContext.get_current();
        var list = clientContext.get_web().get_lists().getByTitle('#Your List Name#');
        var camlQuery = new SP.CamlQuery();
        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>";
        camlQuery.set_viewXml(strCaml);
        this.collListItem = list.getItems(camlQuery);
        clientContext.load(collListItem);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
    }

function onQuerySucceeded(sender, args)
    {
        var listItemEnumerator =  collListItem.getEnumerator();

        while(listItemEnumerator.moveNext())
        {
            var oListItem = listItemEnumerator.get_current();
            var item = oListItem.get_item('Field1');
        }
   }

function onQueryFailed(sender, args)
    {
        alert('Request failed' + args.get_message() + '\n' + arg.get_stackTrace());
    }


var collListItem = null;
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的数组，遍历数组

for(var i = 0; i < item.length; i++)
                {
                   alert(item[i].get_lookupId());
                   alert(item[i].get_lookupValue());
                }

一样可以取到相应的People & Group值。

当我需要对某个Item做update时，方法如下

oListItem.set_item("Field1",fieldValue);

            oListItem.update();
            clientContext.load(oListItem);
            clientContext.executeQueryAsync(onSuccess, onfail);

这里的onSuccess 和Onfail 仍然为回调方法，和上面的类似，这里就不详细写了。 这样的方法update一个single line text类型的字段没有问题，但是如果是Lookup字段，该怎么Update呢？

var fieldValue = SP.FieldLookupValue.set_lookupId(value);

这样的fieldValue 就可以用上面的update方法对lookup类型的字段更新了。

如果 Field1是Multi - People and Group类型(允许插入多人)，那么麻烦一些,因为要创建一个SPFieldUserValue 的数组来更新

var fieldValue = new Array();
var userValue1 = SP.FieldUserValue.fromUser("UserName1");
var userValue2 = SP.FieldUserValue.fromUser("UserName2");
fieldValue.push(userValue1);
fieldValue.push(userValue2);

这样构造出来的fieldValue 可以用来update Multi - People and Group类型的字段了。

其他不同类型的字段的获取和更新都可以采用这个思路，只是具体的类型不同而已，可以通过查阅msdn来完成。

http://msdn.microsoft.com/en-us/library/ee557057.aspx

3. Pop up dialogue

如果你想你的应用能够有类似新建Item操作弹出窗口，那么就选用弹出窗口的方法吧：

function Callback(dialogResult) {
       if (dialogResult == SP.UI.DialogResult.OK)
       {
           alert("Register this training successfully.");
       }
       else
       {
           ExecuteOrDelayUntilScriptLoaded(RemoveCurrentUserRegistrationInfo, "sp.js");
       }
  }

   function openPopup(modelName,targetUrl,args) {
       var options = {
           url: targetUrl,
           title: modelName,
           allowMaximize: false,
           showClose: true,
           width: 650,
           height: 130,
           showClose:false,
           dialogReturnValueCallback: Callback
       }

           SP.UI.ModalDialog.showModalDialog(options);
   }

openPopup方法首先配置一个options 对象，设置相关参数，然后作为窗口弹出。