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

彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器的更多相关文章

  1. C#中利用JQuery实现视频网站

    C#中利用JQuery实现视频网站的缩略图采集   最近有朋友想要采集优酷的视频标题和缩略图 (哈哈, 并非商业目的). 找到我帮忙, 考虑到有我刚刚发布的SpiderStudio, 我毫不犹豫的答应 ...

  2. nodejs中使用worker_threads来创建新的线程

    目录 简介 worker_threads isMainThread MessageChannel parentPort和MessagePort markAsUntransferable SHARE_E ...

  3. Banner中利用Jquery隐藏显示下方DIV块

    实现方式1: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    &l ...

  4. C#中利用JQuery实现视频网站的缩略图采集

    最近有朋友想要采集优酷的视频标题和缩略图 (哈哈, 并非商业目的). 找到我帮忙, 考虑到有我刚刚发布的SpiderStudio, 我毫不犹豫的答应了. 首先在网页上视频的基本结构为: div.v - ...

  5. ie6中利用jquery居中

    1.利用jquery居中代码 <script type="text/javascript"> $hwidth=parseInt($(window).width()); ...

  6. Python中利用for表达式创建列表

    1.for表达式语法格式及用法 for表达式利用可迭代对象创建新的列表,for表达式也称为列表推导式,具体语法格式如下: [表达式 for 循环计数器 in 可迭代对象] 例: a = [ i + i ...

  7. javaScript中利用ActiveXObject来创建FileSystemObject操作文件

    注:如果用javascript读本地文件,遇到安全问题. 需在浏览器中进行设置,如下:     工具—> Internet选项->安全->自定义级别->启用“没有标识为安全的A ...

  8. 关于html中利用jQuery选择子节点方法总结——待续

    好几次碰到类似的要求,每次用的都不一样,在之前的面试的时候就被问到,突然觉得虽然自己做过但是说不出头绪,只能回答什么parent(),next()等等.所以想整理一下. 1.需求一:同页面有两个表格, ...

  9. asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...

随机推荐

  1. 剑指XX(游戏10) - 走正步工厂一个安静的农场游戏的代码

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2lsYW5ncXVhbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  2. Xutils呼叫流源代码文件下载方法

    //我主要是好奇Xutils哪里回调onLoading(),查找等了很久也没找到,果然easy查找只是把它写下来 前言: 1.代码摘要只有主线,提供一般流程 2.为了易于理解,码变量名,而是类名的驼峰 ...

  3. IOS开发-Swift新语言初见

    Safe Swift pairs increased type safety with type inference, restricts direct access to pointers, and ...

  4. Enum:枚举

    原文:Enum:枚举 枚举 (enum) 是值类型的一种特殊形式,它从 System.Enum 继承而来,并为基础的基元类型的值提供替代名称.枚举类型有名称.基础类型和一组字段.基础类型必须是一个内置 ...

  5. Asp.Net MVC5入门学习系列④

    原文:Asp.Net MVC5入门学习系列④ 添加Model且简单的使用EF 对于EF(EntityFramework)不了解的朋友可以去百度文科或者在园子里搜一些简资源看下,假如和我一样知道EF的概 ...

  6. Net Framework中的提供的常用委托类型

    .Net Framework中的提供的常用委托类型   .Net Framework中提供有一些常用的预定义委托:Action.Func.Predicate.用到委托的时候建议尽量使用这些委托类型,而 ...

  7. 关于winlogo.exe中了“落雪”病毒的解决方法

    Windows Logon Process,Windows NT 用户登陆程序,管理用户登录和退出.该进程的正常路径应是 C:\Windows\System32 且是以 SYSTEM 用户运行,若不是 ...

  8. SQL点滴28—一个简单的存储过程

    原文:SQL点滴28-一个简单的存储过程 在表中写入一条数据同事要向另外一个表中写入信息,所以会使用到事务.实际使用的时候还会一次向一个表中吸入多条数据,下面的存储过程,将字符串拆分成数组然后写入到表 ...

  9. leetcode 第43题 Wildcard Matching

    题目:(这题好难.题目意思类似于第十题,只是这里的*就是可以匹配任意长度串,也就是第十题的‘.*’)'?' Matches any single character. '*' Matches any ...

  10. 安装SQL Server 2008 - 初学者系列 - 学习者系列文章

    本文介绍SQL Server 2008数据库的安装 1.从下列地址获取SQL Server 2008的副本 thunder://QUFlZDJrOi8vfGZpbGV8Y25fc3FsX3NlcnZl ...