cq9免费游戏试玩

書(shū)名： SharePoint 2013 應(yīng)用開(kāi)發(fā)實(shí)戰(zhàn)
作者名：劉中正
本章字?jǐn)?shù)： 2261字
更新時(shí)間： 2021-03-26 18:51:22

3.2 JaveScript客戶端對(duì)象模型

作為客戶端對(duì)象模型的一種，JaveScript客戶端對(duì)象模型和.NET客戶端對(duì)象模型在使用步驟上很類(lèi)似：

● 初始化ClientContext對(duì)象

● 通過(guò)ClientContext對(duì)象獲取到Site/Web對(duì)象

● 調(diào)用ClientContext.Load方法，定義要獲取的信息

● 調(diào)用clientContext.executeQueryAsync方法把請(qǐng)求提交到SharePoint

要使用JaveScript客戶端對(duì)象模型，需要程序開(kāi)發(fā)人員懂的一些基礎(chǔ)的JavaScript（JQuery）語(yǔ)法。

3.2.1 環(huán)境準(zhǔn)備

JaveScript客戶端對(duì)象模型可以被使用在SharePoint頁(yè)面或者SharePoint Add-in上。本節(jié)將以一個(gè)內(nèi)容編輯器Web部件來(lái)存放代碼，演示JaveScript客戶端對(duì)象模型的使用。

在開(kāi)始之前，先把JQuery上傳到網(wǎng)站自帶的樣式庫(kù)里，以備后面使用。JQuery是一款優(yōu)秀的JavaScript庫(kù)，使用它能讓前臺(tái)開(kāi)發(fā)更方便，并且能兼容多瀏覽器。

打開(kāi)上一節(jié)用的站點(diǎn)，打開(kāi)一個(gè)頁(yè)面或者新建一個(gè)頁(yè)面，然后編輯頁(yè)面，在功能區(qū)里，單擊插入→Web部件，在“媒體和內(nèi)容”分類(lèi)里，選擇“內(nèi)容編輯器”，然后單擊“添加”按鈕，如圖3-14所示：

圖3-14 添加內(nèi)容編輯器Web部件

添加到頁(yè)面之后，編輯Web部件，如圖3-15所示：

圖3-15 編輯web部件

在右邊的編輯窗口里，找到內(nèi)容鏈接的輸入框。本節(jié)用到JavaScript代碼，都會(huì)被保存在.js文件里，并上傳到頂層站點(diǎn)的樣式庫(kù)里，然后在這里引用，如圖3-16所示：

圖3-16 引用JaveScript代碼

3.2.2 ClientContext

在JaveScript客戶端對(duì)象模型中，ClientContext是一切對(duì)象的入口，因此首先要初始化這個(gè)對(duì)象。ClientContext的初始化方法如下：

    ClientContext context = new ClientContext("http://mysiteurl");

如果要獲取當(dāng)前站點(diǎn)，則使用：

    ClientContext.get_current();

和.NET客戶端不同的是，JaveScript客戶端模型的代碼運(yùn)行在SharePoint上下文環(huán)境里，因此并不需要提供用戶名密碼。

JaveScript客戶端對(duì)象模型和服務(wù)器端對(duì)象模型的結(jié)構(gòu)是一樣的，但是在命名上去掉了SP，表3-2是對(duì)照表：

表3-2 JaveScript客戶端對(duì)象模型和服務(wù)器端對(duì)象模型的比較

3.2.3 Site和Web對(duì)象

1．獲取Site對(duì)象

獲取Site對(duì)象的方法如下：

    clientContext.get_Site();

同樣，這個(gè)時(shí)候并沒(méi)有真正地把Site對(duì)象獲取過(guò)來(lái)，需要先執(zhí)行ClientContext.Load()方法把操作預(yù)加載一下，然后執(zhí)行clientContext.executeQueryAsync方法。

為了不阻塞頁(yè)面的加載，SharePoint在JavaScript對(duì)象模型里提供了clientContext.executeQueryAsync方法，這個(gè)方法會(huì)把請(qǐng)求發(fā)給SharePoint，并且異步獲取結(jié)果。在接收返回結(jié)果的時(shí)候，開(kāi)發(fā)人員可以定義兩個(gè)方法，一個(gè)處理結(jié)果成功返回的情況，一個(gè)處理失敗的情況。

下面的代碼演示如何獲取站點(diǎn)的URL：

    <script type='text/javascript'>
    var clientContext;
    var siteCollection;
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadSite);
    function LoadSite() {
        clientContext = SP.ClientContext.get_current();
        siteCollection = clientContext.get_site();
        clientContext.load(siteCollection);
        clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);
    }
    function onRequestSucceeded() {
       alert('Site Collection URL: ' + siteCollection.get_url());
    }
    function onRequestFailed(sender, args) {
       alert('Error: ' + args.get_message());
    }
    </script>

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadSite); 這句話的意思是，等sp.js加載完畢，再執(zhí)行LoadSite方法，從而避免出錯(cuò)。

在上面的例子里，如果請(qǐng)求成功返回，就把網(wǎng)站的URL顯示出來(lái)；如果請(qǐng)求失敗，就把失敗的消息顯示出來(lái)。

把上面的代碼保存成siteDemo.js，上傳到樣式庫(kù)里，注意一下，樣式庫(kù)默認(rèn)開(kāi)啟了版本控制，因此每次上傳都要記住發(fā)布一個(gè)主要版本。在內(nèi)容編輯器Web部件的編輯窗口里引用siteDemo.js，最后單擊應(yīng)用，結(jié)果如圖3-17所示。

圖3-17 獲取網(wǎng)站集URL

2．獲取Web對(duì)象

獲取Web對(duì)象，有兩種方法：

● 通過(guò)Site對(duì)象的OpenWeb(“myWebRelativeURL”)方法，如果參數(shù)為空，那么返回頂層站點(diǎn)的對(duì)象。

● 通過(guò)ClientContext的get_web()方法，獲取當(dāng)前上下文環(huán)境的站點(diǎn)。

下面的代碼演示如何獲取Web對(duì)象的標(biāo)題和說(shuō)明：

    <script type='text/javascript'>
    var clientContext;
    var website;
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadWeb);
    function LoadWeb() {
       clientContext = SP.ClientContext.get_current();
       website = clientContext.get_web();
       clientContext.load(website);
       clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);
    }
    function onRequestSucceeded() {
       alert('標(biāo)題: ' + website.get_title()+"\n 說(shuō)明:"+website.get_description());
    }
    function onRequestFailed(sender, args) {
       alert('Error: ' + args.get_message());
    }
    </script>

把代碼保存成webDemo.js，按照上面的方法引用到內(nèi)容編輯器Web部件里，結(jié)果如圖3-18所示。

圖3-18 獲取Web標(biāo)題和說(shuō)明

上面的代碼獲取了完整的Web對(duì)象，同樣，為了減少數(shù)據(jù)傳輸，可以?xún)H獲取特定的屬性，這就要在ClientContext.Load()方法里指定要獲取的屬性：

    clientContext.load(website, 'Title', 'Created');

如何更新Web的屬性呢？這就要調(diào)用Web對(duì)象的set_[property]方法了。

    <script type='text/javascript'>
    var clientContext;
    var website;
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', UpdateWeb);
    function UpdateWeb() {
       clientContext = SP.ClientContext.get_current();
       website = clientContext.get_web();
       website.set_title('Updated Web Site');
       website.set_description('This is an updated Web site.');
       website.update();
       clientContext.load(website, 'Title', 'Description');
       clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);
    }
    function onRequestSucceeded() {
       alert('標(biāo)題: ' + website.get_title()+"\n 說(shuō)明:"+website.get_description());
    }
    function onRequestFailed(sender, args) {
       alert('Error: ' + args.get_message());
    }
    </script>

3.2.4 List對(duì)象

使用Web類(lèi)的lists屬性獲取網(wǎng)站中列表的集合，步驟和獲取網(wǎng)站對(duì)象類(lèi)似，先調(diào)用load(clientObject) 方法加載列表集合，然后調(diào)用executeQueryAsync(succeededCallback, failedCallback)。

1．獲取列表信息

以下的代碼演示如何獲取網(wǎng)站所有列表的標(biāo)題以及說(shuō)明，并顯示在表格里。

首先定義一個(gè)id為lists的div，作為容器：

    <div id="lists"></div>

為了使JaveScript編程更簡(jiǎn)單，在這里引用JQuery。

    <script type='text/javascript' src="/sites/dept/Style%20Library/jquery-
1.11.3.min.js">
    </script>

然后獲取列表的信息：

    <script type='text/javascript'>
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveAllListProperties);
    function retrieveAllListProperties() {
       var clientContext = new SP.ClientContext();
       var oWebsite = clientContext.get_web();
       this.collList = oWebsite.get_lists();
       clientContext.load(collList);
       clientContext.executeQueryAsync(
          Function.createDelegate(this, this.onQuerySucceeded),
          Function.createDelegate(this, this.onQueryFailed)
       );
    }
    function onQuerySucceeded() {
       var listInfo = '<table><tr><th>標(biāo)題</th><th>說(shuō)明</th></tr>';
       var listEnumerator = collList.getEnumerator();
       while (listEnumerator.moveNext()) {
          var oList = listEnumerator.get_current();
          listInfo += '<tr><td>' + oList.get_title() + '<td/><td>' +
             oList.get_description().toString() + '</td></tr>';
       }
       listInfo+="</table>";
     $('#lists').html(listInfo);
    }
    function onQueryFailed(sender, args) {
       $('#lists').html('Request failed. ' + args.get_message() +
          '</br>' + args.get_stackTrace());
    }
    </script>

在上面的代碼里，先是定義了一個(gè)id為lists的div，然后引用JQuery，再把獲取到的列表信息組裝成一個(gè)表格，顯示在div里面，結(jié)果如圖3-19所示。

圖3-19 獲取列表信息

如果要減少不必要的數(shù)據(jù)傳輸，可以只獲取列表的必要屬性，修改ClientContext.Load方法為：

    clientContext.load(collList, 'Include(Title, Description)');

2．創(chuàng)建列表

創(chuàng)建列表需要借助于ListCreationInfo類(lèi)，主要代碼如下：

    var listCreationInfo = new SP.ListCreationInformation();
    listCreationInfo.set_title('My Announcements List');
    listCreationInfo.set_templateType(SP.ListTemplateType.announcements);
    this.oList = oWebsite.get_lists().add(listCreationInfo);

然后調(diào)用ClientContext的Load和executeQueryAsync方法把請(qǐng)求提交到SharePoint里。

3．更新列表

要更新列表屬性，調(diào)用list.set_[property]方法：

    oList.set_description('New Announcements List');
    oList.update();

然后調(diào)用ClientContext的Load和executeQueryAsync方法把請(qǐng)求提交到SharePoint里。

4．刪除列表

刪除列表的主要代碼如下：

    this.oList = oWebsite.get_lists().getByTitle('My Announcements List');
    oList.deleteObject();

然后調(diào)用ClientContext的executeQueryAsync方法把請(qǐng)求提交到SharePoint里。

3.2.5 ListItem對(duì)象

若要使用JavaScript客戶端對(duì)象模型獲取列表項(xiàng)，可使用getItemById(id) 函數(shù)返回單個(gè)項(xiàng)，也可使用getItems(query) 函數(shù)返回多個(gè)項(xiàng)。然后使用load(clientObject) 函數(shù)獲取代表這些項(xiàng)的列表項(xiàng)對(duì)象。getItems(query) 函數(shù)仍然使用CAML查詢(xún)，以指定要返回哪些項(xiàng)。為了減少數(shù)據(jù)傳輸，不建議獲取所有的列表項(xiàng)，也不建議獲取所有的欄值。應(yīng)該只查詢(xún)需要的列表項(xiàng)和欄。

1．獲取列表項(xiàng)

下面的代碼演示如何獲取通知列表項(xiàng)里面，最新添加的5條通知。

    var clientContext = new SP.ClientContext();
    var oList = clientContext.get_web().get_lists().getByTitle('通知');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(
           '<View><Query><OrderBy><FieldRef Name="Created" Ascending="FALSE"
/></OrderBy></Query>' +
           '<RowLimit>5</RowLimit></View>'
    );
    this.collListItem = oList.getItems(camlQuery);

然后調(diào)用ClientContext的Load和executeQueryAsync方法把請(qǐng)求提交到SharePoint里。結(jié)果如圖3-20所示。

圖3-20 獲取最新5個(gè)通知

如果只想獲取特定的屬性，以減少數(shù)據(jù)傳輸，那么需要修改ClientContext.Load方法：

    clientContext.load(
           collListItem,
           'Include(Id, DisplayName, HasUniqueRoleAssignments)'
    );

2．創(chuàng)建列表項(xiàng)

創(chuàng)建列表項(xiàng)需要借助ListItemCreationInformation對(duì)象。下面的代碼演示如何創(chuàng)建一個(gè)列表項(xiàng)，并為欄賦值：

    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');
    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    oListItem.set_item('Title', 'My New Item!');
    oListItem.set_item('Body', 'Hello World!');
    oListItem.update();

之后再調(diào)用ClientContext的Load和executeQueryAsync方法把請(qǐng)求提交到SharePoint里。

3．更新列表項(xiàng)

更新列表項(xiàng)的主要代碼如下：

    this.oListItem = oList.getItemById(3);
    oListItem.set_item('Title', 'My Updated Title');
    oListItem.update();

之后再調(diào)用ClientContext的executeQueryAsync方法把請(qǐng)求提交到SharePoint里。

4．刪除列表項(xiàng)

刪除列表項(xiàng)的主要代碼如下：

    oListItem = oList.getItemById(itemId);
    oListItem.deleteObject();