基于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,然后加上如下脚本即可:
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索list
, 数据源
, 选择
, 支持
, httpcontext
, jquery获取多选
Chosen
chosen jquery、chosen.jquery.js、jquery chosen api、chosen.jquery.min.js、chosen.jquery.js官网,以便于您获取更多的相关知识。