SharePoint PeopleEditor控件使用

如下用於簡要介紹在SharePoint 2016二次開發中如何使用PeopleEditor人員選擇器，並採用前端的方式獲取和設置值。

1、在使用的.aspx頁面進行註冊

<%@ Register TagPrefix="sp" Namespace="Microsoft.SharePoint.WebControls"   
         Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  

2、引用Css和Js文件

 <sp:CssLink ID="CssLink1" runat="server" Version="15"></sp:CssLink>
 <sp:ScriptLink ID="ScriptLink1" Language="javascript" Name="core.js" OnDemand="true" runat="server" Localizable="false"></sp:ScriptLink>
 <sp:DelegateControl ID="DelegateControl1" runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"></sp:DelegateControl>
 <sp:CssRegistration ID="CssRegistration1" Name="Themable/corev15.css" runat="server"></sp:CssRegistration>

若採用SharePoint原生母版頁，以上2個步驟，就已存在，無需重新引用，若採用自定義母版頁，須要本身註冊和添加相關文件；

 

3、使用實例Demo

<fieldset>
        <legend>SP人員選擇器</legend>
        <sp:PeopleEditor ID="PeopleEditor1" runat="server" Width="329px" Height="65px" AllowEmpty="true" MultiSelect="True" SelectionSet="User,DL,SecGroup,SPGroup" ValidatorEnabled="True" />

        <br />


        <input id="btnSet" type="button" value="設置值" />
        <input id="btnGet" type="button" value="獲取值" />
        <input id="btnGetFirst" type="button" value="獲取第一個用戶值" />
        <%--<input id="btnClear" type="button" value="清空值"/>--%>
        <br />

        <textarea id="btnInfo"></textarea>

        <script>
            $(function () {

                $("#btnGet").click(function () {
                    var infoString = "";
                    var loginInfo = getPeopleEditorValue("<%=PeopleEditor1.ClientID%>");
                       var loginInfoArray = loginInfo.split("!#");
                       $.each(loginInfoArray, function (i, item) {
                           if (item.indexOf("i:0#.w|") > -1) {//域用戶
                               infoString += "用戶：" + item + "\r\n";
                           }
                           else if (item.indexOf("c:0+.w|") > -1) {//域組
                               infoString += "域組：" + item + "\r\n";

                           } else {
                               infoString += "SP組：" + item + "\r\n";
                           }
                       });
                       $("#btnInfo").val(infoString);
                   });

                   $("#btnSet").click(function () {
                       setPeopleEditorValue("<%=PeopleEditor1.ClientID%>", "liyuxin;bli;軟件部;麗水煙草模板管理系統 位成員");
                   });

                   $("#btnClear").click(function () {
                       clearPeopleEditor("<%=PeopleEditor1.ClientID%>");
                   });

                   $("#btnGetFirst").click(function () {

                       function userCall(user) {
                           var userId = user.get_id();
                           var userLoginName = user.get_loginName();
                           var userTitle = user.get_title();
                           $("#btnInfo").val(userId + ";#" + userLoginName + ";#" + userTitle);
                       }

                       getUserByLoginName("liyuxin", userCall);

                   });

               });

               //獲取人員選擇器的值
               function getPeopleEditorValue(pickerid) {
                   var loginInfo = [];
                   var items = $(".ms-entity-resolved", "#" + pickerid + "_upLevelDiv");
                   $.each(items, function () {
                       var entity = $("#divEntityData", this);
                       var key = entity.attr("key");
                       var displaytext = entity.attr("displaytext");
                       loginInfo.push(key + ";#" + displaytext);
                   });
                   return loginInfo.join('!#');
               }

               //設置人員選擇器值，controlID：控件Id；userName：賬號，多個用分號隔開
               function setPeopleEditorValue(pickerid, userName) {
                   $("#" + pickerid + "_upLevelDiv").text(userName);
                   if (!ValidatePickerControl(pickerid)) {
                       ShowValidationError();
                       return false;
                   }
                   var arg = getUplevel(pickerid);
                   var ctx = pickerid;
                   EntityEditorSetWaitCursor(ctx);
                   WebForm_DoCallback(pickerid.replace(/_/g, '$'), arg, EntityEditorHandleCheckNameResult, ctx, EntityEditorHandleCheckNameError, true);
                   return false;
               }

               //清空人員選擇值
               function clearPeopleEditor(pickerid) {
                   var field = $("#" + pickerid + "_upLevelDiv");
                   field.find('.ms-inputuserfield').html("");
                   field.find("textarea:first").val("");
               }

               //根據帳號返回用戶對象
               function getUserByLoginName(loginName, callback) {
                   SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
                       var context = new SP.ClientContext.get_current();
                       this._UserTemp = context.get_web().ensureUser(loginName);
                       context.load(this._UserTemp);
                       //這裏用的是異步方法，第一個參數是成功後調用，第二個參數是失敗後調用
                       context.executeQueryAsync(
                           Function.createDelegate(null, function () {
                               callback(this._UserTemp);
                               //var _userID = this._UserTemp.get_id();
                               //var _userLoginName = _UserTemp.get_loginName();
                               //var _userTitle = _UserTemp.get_title();

                               //callback(_userID + ";#" + _userLoginName + ";#" + _userTitle);
                           }),
                           Function.createDelegate(null, function () { alert("請確認是否在選人的地方都已經填入了信息"); })
                       );
                   });
               }

        </script>

    </fieldset>

使用實例圖：

4、人員選擇器屬性說明

　　一、AllowEmpty：是否容許爲空；

　　二、ValidatorEnabled：開啓驗證；

　　三、SelectionSet：設置選擇範圍，可設置爲：組，人，及Ad的安全組，如：User,DL,SecGroup,SPGroup

　　四、MultiSelect：是否可多選