开发者社区> 长征6号> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

本文转自木宛城主博客园博客,原文链接:http://www.cnblogs.com/OceanEyes/p/sharepoint-newpeopleeditor-jquery-chosen.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery 选择器的总结
元素选择 $("input") id选择 $('#id') class选择 $('.id') 属性选择 $('[prop]')或者$('[prop=“value1”]')或者$('input[prop=“value1”]') 选择所有 $("*")  层叠选择器: $("form input...
890 0
jQuery选择器总结
阅读目录 1, 基本选择器? 2, 层次选择器?  3, 过滤选择器? 4, 表单选择器?        jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器。
966 0
jQuery 选择器大全总结
jQuery基础语法中规定的选择器有三种,分别是类选择器、ID选择器、标签选择器。如:$(“.aa”)、$(“#id”)、$(“div”),但中实际的应用中,DOM机构非常复杂,层级非常多。如和应对这种复杂的场景呢? 没关系,前端开发网给各位小伙伴们总结了复杂结构DOM的查找使用。
797 0
jquery选择器总结2
1、JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的JS效果。 2、JQuery实现了 代码的分离 不用再网页中加入如:onclick之类的事件来调用函数了,直接引入JQuery类库和自己编写的JQuery代码就可以了;如:$(function(){   $("Element").
938 0
jquery 选择器总结
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".
804 0
jQuery选择器总结
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
668 0
jQuery选择器总结[转]
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".
728 0
+关注
1222
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载