彻底抛弃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