SharePoint PeopleEditor控件使用

Posted 2020-10-25 荡来荡去

以下用于简要介绍在SharePoint 2016二次开发中如何使用PeopleEditor人员选择器，并采用前端的方式获取和设置值。

一、在使用的.aspx页面进行注册

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

二、引用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个步骤，就已存在，无需从新引用，若采用自定义母版页，需要自己注册和添加相关文件；

 

三、使用实例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>

使用实例图：

四、人员选择器属性说明

　　1、AllowEmpty：是否允许为空；

　　2、ValidatorEnabled：开启验证；

　　3、SelectionSet：设置选择范围，可设置为：组，人，及Ad的安全组，如：User,DL,SecGroup,SPGroup

　　4、MultiSelect：是否可多选