彻底抛弃PeopleEditor，SharePoint中利用Jquery Chosen创建新的人员选择器

彻底抛弃PeopleEditor，SharePoint中利用Jquery Chosen创建新的人员选择器

基于SharePoint平台开发时，人员选择器使用频率是非常高的，但是原生的人员选择器使用太麻烦，而且非常笨拙，非常不友好，特别是对呆在*部门的老爷们，要让他们手动输入人员，简直就是痴心妄想。总之一句话，越简单越好。

　　为了让客户满意，必须要对人员选择器进行改造，原生的PeopleEditor彻底抛弃。只能另辟蹊径，寻找适合的JQuery插件，创建新的人员选择器，分析了一下需求，可以归纳新的人员选择器必须支持如下情况：

• 支持人员的多选，比如像会议、通知需要对多人进行发送，当然也要支持删除。
• 对于单选的人员选择器，可以删除选中的人员。
• 不管单选还是多选，支持Jquey AutoComplete那样索引功能。

找来找去，发现Jquery Chosen功能十分强大，完全满足我的需求，更多的功能参照Chosen官网：

http://harvesthq.github.io/chosen/

利用Jquery Chosen进行改造

• 多选的人员选择器

支持多选，点击X即可取消选中，当然还支持索引，如下所示：

• 配置也是十分简单，首先你的有一个Select，譬如：

 <asp:DropDownList runat="server" ClientIDMode="Static" ID="ddlPeopleChosen" data-placeholder="选择与会者..." class="chzn-select" multiple style="width:397px;" ></asp:DropDownList>

注意下：data-placeholder意为着未选人员时的默认文本，multiple意味着支持多选。

接下来，需要对其添加数据源，注意，对于单人员选择器，Chosen作者说如果要显示默认的文本提示，需要加入一个空的Option到Select中(第一个)。

注意:我的人员不是从AD中取出，而是我们有一个存放人员的List(人事档案)，为了确保该List的人员都可以登陆OA，特意和Web.AllUser中进行比较，当然也可以不必要，这样做保险点。

 public static void GetFromCache(SPWeb _currentWeb)
        {
            #region 从缓存中读
            if (System.Web.HttpContext.Current.Cache["peopleList"] == null)
            {
                //People 集合:将SharePoint中的User作为数据源集合加入DropDownList中
                List<People> peopleList = new List<People>();
                //Note: on single selects, the first element is assumed to be selected by the browser.
                //To take advantage of the default text support,
                //you will need to include a blank option as the first element of your select list.
                peopleList.Add(new People());
                People p = null;
                SPList employeeList = _currentWeb.Site.AllWebs["rsgl"].Lists["人事档案"];
                //获取所有可访问站点的用户
                SPUserCollection userCollection = _currentWeb.AllUsers;
                //转换为List集合
                List<SPUser> listUsers = userCollection.Cast<SPUser>().ToList();
                foreach (SPListItem item in employeeList.Items)
                {
                    string displayName = item["Title"].ToStringOrEmpty();
                    //循环便利获取SPUser
                    foreach (SPUser user in listUsers)
                    {
                        if (displayName == user.Name)
                        {
                            string loginName = user.LoginName;
                            p = new People { LoginName = loginName, DisplayName = displayName };
                            peopleList.Add(p);
                        }
                    }
                }

                System.Web.HttpContext.Current.Cache["peopleList"] = peopleList;
            }
            #endregion

        }

• 接下来就是对DropDownList的绑定：

　　　　　　　PeopleHelper.GetFromCache(_currentWeb);
            var peopleListFromCache = (List<People>)System.Web.HttpContext.Current.Cache["peopleList"];
            //与会人
            ddlPeopleChosen.DataSource = peopleListFromCache;
            ddlPeopleChosen.DataTextField = "DisplayName";
            ddlPeopleChosen.DataValueField = "LoginName";
            ddlPeopleChosen.DataBind();

• 有了数据源之后，在客户端加上Chosen的JS，然后加上如下脚本即可：

 var config = {
        '.chzn-select': {},
        '.chzn-select-deselect': { allow_single_deselect: true },
        '.chzn-select-no-single': { disable_search_threshold: 10 },
        '.chzn-select-no-results': { no_results_text: 'Oops, nothing found!' },
        '.chzn-select-width': { width: "95%" }
    }

 $(function(){
        //初始化Dom
        for (var selector in config) {
            $(selector).chosen(config[selector]).change(function(){
                var obj=$(this).next();//div?
                if($("span",obj).length>0){
                    obj.parent().next().css("display","none");//div
                }
            });

          }

      });

• 查看Dom，我们可以发现Select如下：

接下来的事就简单了，我这边为了统一，将SharePoint中的人员Type还是Person Or Group，所以可以EnsureUser()将其转化为SPUser对象。

注意：EnsureUser方法，你可以EnsureUser（DisplayName），还可以EnsureUser(LoginName)，我在此是提交了LoginName，如下所示，因为LoginName是唯一的，DisplayName未免野马了些，但你用DisplayName会非常方便，如果你确定了人员的DisplayName是不会重名的话。

• 接下来对LoginName进行处理保存到List中。

var peopleSelect = System.Web.HttpContext.Current.Request["hidPeopleSelect"];
                        string[] peopleArr=null;
                        if (!string.IsNullOrEmpty(peopleSelect))
                        {
                            peopleSelect = peopleSelect.Trim(';');
                            peopleArr = peopleSelect.Split(';');
                            SPFieldUserValueCollection userColl = new SPFieldUserValueCollection();
                            foreach (string people in peopleArr)
                            {
                                SPUser spUser = _currentWeb.EnsureUser(people);
                                SPFieldUserValue userValue = new SPFieldUserValue(_currentWeb, spUser.ID, spUser.LoginName);
                                userColl.Add(userValue);

                            }
                            hyitem["Participant"] = userColl;
                        }

单选的人员选择器

• 单个选择的人员选择器用到的情况也是十分多的，特别是选择领导时，利用Chosen改造如下效果：

• 配置也是十分简单的：

 <asp:DropDownList  data-placeholder="请选择办公室主任" ID="ddlPeopleLevelOne" runat="server" ClientIDMode="Static" class="chzn-select-deselect" style="width:168px;"></asp:DropDownList>

注意Class=chzn-select-deselect意味着你可以点击X取消选择，不同的Class会有不同的效果，如：class=chzn-select

  <asp:DropDownList  data-placeholder="选择会议负责人" ID="ddlConferenceCharge" runat="server" ClientIDMode="Static" class="chzn-select" style="width:168px;"></asp:DropDownList>

这样的人员选择器，一旦选择了就不能取消了，一般可以用来作为必选情况：

总结

Chosen是一个非常强大的 JQuery插件，利用Chosen完全可以让我们抛弃传统的PeopleEditor。更多Chosen的功能可以参看它的官方网站 http://harvesthq.github.io/chosen/

本博客为木宛城主原创，基于Creative Commons Attribution 2.5 China Mainland License发布，欢迎转载，演绎或用于商业目的，但是必须保留本文的署名木宛城主（包含链接）。如您有任何疑问或者授权方面的协商，请给我留言。

 

分类: SharePoint