Completely abandoned PeopleEditor, SharePoint using Jquery Chosencreate a new people picker

 

  

SharePoint-based platform, the people picker frequency of use is very high, but the native people picker to use too much trouble, and very clumsy, very unfriendly, especially to stay in government departments gentlemen, let They entered manually personnel, is simply wishful thinking. In a word, the simpler the better.

 

 

to customer satisfaction, we must transform the selectors of personnel, native PeopleEditor completely abandoned. Only another way to find a suitable JQuery plugin to create a new people picker, analysis of what needs can be summarized new people picker must support the following:

 

  

   
• support multiple choice, like meetings, notice the need for people to send, of course, also supports the deletion.
   
• for radio personnel selection, you can delete the selected persons.
   
• whether radio or multi-choice, support Jquey AutoComplete function as an index.
  

 

 

Zhaolaizhaoqu found Jquery Chosen function is very powerful, fully meet my needs, more functional reference Chosen official website:

 

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

 

use Jquery Chosen transformation

 

  
• multiple-choice people picker
 

 

supports multiple selection, click the X to cancel the check, of course, support the index, as follows:

 

 

 

  
• configuration is very simple, first you have a Select, for example:
 

 

  

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

 

 

attention to the next: data-placeholder means a person not selected the default text, multiple means to support multiple selections.

 

Next, you need to add a data source, note that for single people picker , Chosen authors say that if you want to display the default text prompts, you need to add an empty Option to Select the (first).

 

Note: I'm not the person is removed from AD, but we have a store personnel List ( personnel files ), To ensure that the List of personnel can visit OA, deliberately and Web.AllUser for comparison, of course, can also be unnecessary to do so the insurance point.

 

  

 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 
        
        }

 

 

  The next step is for the DropDownList
• binding:
 

 

  

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

 

 

  
• With the data source, the client plus the Chosen of JS, then you can add the following script:
 

 

  

 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 
                } 
            }); 
           
          } 
       
      });

 

 

  
• View Dom, we can find Select the following:
 

 

 

next thing is simple, I am here in order to unify the staff in SharePoint Type or Person Or Group , so you can EnsureUser () to convert it to SPUser object.

 

  

Note: EnsureUser method, you can EnsureUser (DisplayName), also can EnsureUser (LoginName), I hereby is submitted LoginName, as shown below, is unique because LoginName, DisplayName a bit too wild, but you use the DisplayName will be very handy if you are sure the person is not the same name DisplayName words.

 

 

 

  
• LoginName be processed on the next save to a 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; 
                        }

 

 

radio personnel selector

 

  
• selector individually selected person is very much used in the case, in particular, lead selection, the use of the following effects Chosen transformation:
 

 

 

  
• configuration is very simple:
 

 

  

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

 

 

Note Class = chzn-select-deselect means you can click on the X to cancel the selection, different Class will have different effects, such as: class = chzn-select

 

  

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

 

 

Such people picker, once selected can not be canceled, and generally can be used as Required situation: < / p>  

 

Summary

 

  

Chosen is a very powerful JQuery plugin allows us to take advantage of Chosen completely abandon the traditional PeopleEditor. More Chosen functions can be found at its official website http://harvesthq.github.io/chosen/