在 SharePoint 平台开发中，人员选择器是一个高频使用的组件。然而，原生的 PeopleEditor 功能笨拙且用户体验不佳，尤其对于需要批量选择或模糊输入的场景，其操作不便的缺点尤为突出。为了提升用户体验，直接替换 PeopleEditor 并引入更灵活、简洁的人员选择方案是必要的。

根据需求分析，新的人员选择器需要支持以下功能：

• 多选能力： 能够选择多个人员，并支持移除已选人员，适用于通知或会议等场景。
• 单选能力： 允许选择单个人员，并支持取消选择。
• 搜索索引： 具备类似 JQuery AutoComplete 的搜索和索引功能，方便快速定位人员。

经过调研，JQuery Chosen 插件凭借其强大的功能和灵活性，能够完美满足这些需求。更多详情可参考 Chosen 官方文档：http://harvesthq.github.io/chosen/

集成 JQuery Chosen 进行改造

多选人员选择器

实现多选人员选择器，允许用户选择多名参与者，并通过点击"X"按钮移除，同时支持搜索功能。

实现步骤：

1. HTML 结构： 使用一个 <select> 元素，并添加 multiple 属性以启用多选。设置 data-placeholder 属性来定义未选择时的提示文本，并添加 class="chzn-select" 以便 JQuery Chosen 应用样式。

2. 数据源准备：

   在后端 C# 代码中，需要准备人员数据源。以下示例代码从 SharePoint 的"人事档案"列表中获取人员信息，并与当前网站集的用户进行匹配，确保所选人员是有效的系统用户。为了优化性能，将人员列表缓存到 HttpContext.Current.Cache 中。

   
   public static void LoadPeopleData(SPWeb currentWeb)
   {
       string cacheKey = "peopleListCache";
       if (HttpContext.Current.Cache[cacheKey] == null)
       {
           List<PersonInfo> people = new List<PersonInfo>();
   
           // 为了支持 Chosen 的默认文本提示，在单选模式下，需添加一个空的 Option
           // 在多选模式下，此项并非强制，但可保持一致性
           people.Add(new PersonInfo()); // 添加一个空的占位符
   
           SPList employeeProfileList = null;
           try
           {
               // 假设"人事档案"列表存在于名为"rsgl"的子网站下
               employeeProfileList = currentWeb.Site.AllWebs["rsgl"].Lists["人事档案"];
           }
           catch (Exception ex)
           {
               // 异常处理：例如，子网站或列表不存在
               // Log.Error("无法加载人事档案列表: " + ex.Message);
               return; // 或者抛出异常
           }
   
           // 获取所有可访问站点的用户
           SPUserCollection siteUsers = currentWeb.AllUsers;
           List<string> userLoginNames = siteUsers.Cast<SPUser>().Select(u => u.LoginName.ToLower()).ToList();
   
           foreach (SPListItem item in employeeProfileList.Items)
           {
               string displayName = item["Title"].ToStringOrEmpty();
               string loginName = string.Empty;
   
               // 查找匹配的用户登录名
               SPUser matchedUser = siteUsers.Cast<SPUser>().FirstOrDefault(user => user.Name.Equals(displayName, StringComparison.OrdinalIgnoreCase));
   
               if (matchedUser != null)
               {
                   loginName = matchedUser.LoginName;
                   people.Add(new PersonInfo { LoginName = loginName, DisplayName = displayName });
               }
           }
   
           HttpContext.Current.Cache[cacheKey] = people;
       }
   }
   
   // 定义一个简单的类来存储人员信息
   public class PersonInfo
   {
       public string LoginName { get; set; }
       public string DisplayName { get; set; }
   }
   
   // 扩展方法，用于安全地获取字符串值
   public static class StringExtensions
   {
       public static string ToStringOrEmpty(this object value)
       {
           return value?.ToString() ?? string.Empty;
       }
   }
       

   注意： 上述代码中的 ToStringOrEmpty 是一个自定义扩展方法，用于安全地处理可能为 null 的值。

3. 绑定数据： 在 ASP.NET 页面中，将准备好的人员列表绑定到 DropDownList 控件。

   
   // 确保已加载数据到缓存
   LoadPeopleData(_currentWeb);
   var peopleSource = (List<PersonInfo>)System.Web.HttpContext.Current.Cache["peopleListCache"];
   
   ddlPeopleChosen.DataSource = peopleSource;
   ddlPeopleChosen.DataTextField = "DisplayName";
   ddlPeopleChosen.DataValueField = "LoginName";
   ddlPeopleChosen.DataBind();
       

4. 客户端配置： 在客户端 JavaScript 中初始化 JQuery Chosen 插件，并配置相关选项。

   
   $(document).ready(function() {
       var configOptions = {
           '.chzn-select': {}, // 默认配置
           '.chzn-select-deselect': { allow_single_deselect: true }, // 允许单选时取消选择
           '.chzn-select-no-single': { disable_search_threshold: 10 }, // 搜索阈值
           '.chzn-select-no-results': { no_results_text: '未找到结果！' }, // 无结果提示
           '.chzn-select-width': { width: "95%" } // 设置宽度
       };
   
       for (var selector in configOptions) {
           $(selector).chosen(configOptions[selector]).on('change', function(e, params) {
               // 当选择项改变时，可以执行自定义逻辑
               // 例如，根据选择项动态调整 UI
               console.log('Selection changed:', params.selected, params.deselected);
           });
       }
   });
       

   DOM 结构变化： JQuery Chosen 会将原始的 <select> 元素转换为复杂的 DOM 结构，以实现其交互效果。

5. 保存选定人员： 在表单提交时，从隐藏字段（例如 hidPeopleSelect）获取选定人员的 LoginName 列表，并将其转换为 SPFieldUserValueCollection 类型以保存到 SharePoint 列表字段中。

   
   string selectedLogins = System.Web.HttpContext.Current.Request["hidPeopleSelect"];
   if (!string.IsNullOrEmpty(selectedLogins))
   {
       string[] loginArray = selectedLogins.Trim(';').Split(';');
       SPFieldUserValueCollection userFieldValues = new SPFieldUserValueCollection();
   
       foreach (string login in loginArray)
       {
           if (!string.IsNullOrEmpty(login))
           {
               SPUser targetUser = _currentWeb.EnsureUser(login); // 确保用户存在于站点
               SPFieldUserValue userValue = new SPFieldUserValue(_currentWeb, targetUser.ID, targetUser.LoginName);
               userFieldValues.Add(userValue);
           }
       }
       // 假设 hyitem 是要更新的 SPListItem 对象
       // hyitem["Participant"] = userFieldValues; // "Participant" 是 SharePoint 列表字段的内部名称
   }
       

   EnsureUser 方法： 该方法用于确保用户在 SharePoint 站点中存在。可以传入用户的 LoginName 或 DisplayName。传入 LoginName 更为可靠，因为它具有唯一性。

单选人员选择器

对于单选场景，例如指定负责人或审批人，同样可以使用 JQuery Chosen 进行改造，以提供更好的用户体验。

实现步骤：

1. HTML 配置： 创建一个不带 multiple 属性的 <select> 元素。
   • 使用 class="chzn-select-deselect"：允许用户取消已选择的项。

   • 使用 class="chzn-select"：一旦选择，则无法取消选择，适用于必选场景。

2. 数据绑定与客户端初始化： 数据绑定和客户端 JavaScript 初始化与多选场景类似，只需根据实际需求调整 <select> 元素的属性和 JQuery Chosen 的配置。

总结

JQuery Chosen 是一个功能强大的 JQuery 插件，它能够显著提升 SharePoint 中人员选择器的用户体验，有效替代原生的 PeopleEditor。通过灵活的配置，可以轻松实现单选、多选以及带有搜索功能的复杂人员选择器。