自定义Sharepoint Server 2010人员选择功能-替换默认点击事件

文章摘要

上篇说到了不想修改默认的系统文件，那么我们就要想办法让用户点击书形图标是打开我们自定义的页面，我们先来看看点击书形图标都做了什么，然后再看看我们能做什么。

点击书形图标做了什么

右键书形图标-检查元素我们可以看到下面这些东西

<a id="ctl00_PlaceHolderMain_ctl00_ctl01_userPicker_browse" title="浏览" onclick="__Dialog__ctl00_PlaceHolderMain_ctl00_ctl01_userPicker(); return false;" href="javascript:">
<img title="浏览" src="/_layouts/images/addressbook.gif" alt="浏览" style="border-0px;">
</a>

就是点击的时候调用了一下那个方法嘛！没什么难的，具体那个方法是干啥的，无非就是打开窗口的一些操作。那就好办了，我们就把这个方法替换掉就行了。

替换掉默认方法

代码很简单了，前提要引用Jquery。

$("#控件ID").removeAttr("onclick");

呐，这样写好像没什么用，只是在调试控制台中起作用了，我要的是在运行的时候能够替换，那我应该怎么做呢？整个网站啊，代码写在什么地方能整个网站都能起作用呢？

1. 模板页，这个不用说了，整个网站都在使用模板页；
2. 通过Elements.XML，将js代码注册到全局网站；

还是后面这个方法靠谱点，后面这个方法通过开发方式，将代码打包成一个功能，我再想用的时候启用功能，不想用的时候就关闭功能，靠谱…

注册全局JS

Visual Studio 2010，创建一个Sharepoint解决方案，添加项目，空元素。

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <CustomAction
      ScriptSrc="/_layouts/custompicker/PickerAgent.js"
      Location="ScriptLink"
      Sequence="100">
  </CustomAction>
</Elements>

没啥说的，CustomAction咋用我也不清楚，具体的Baidu，Google，Bing，他的功能远远不止这些，在Ribbon上添加按钮，在列表操作中添加链接，注册全局的控件。

ScriptSrc：js文件的路径，都放到Layouts文件夹下，这个不用问为什么吧；

Location：固定的，告诉Sharepoint这是一个JS；

Sequence：据说这个是个优先级的什么东西，如果两个CustomAction冲突，数值越大优先级越高；

等等，替换方法有了，那个ID我怎么获取到，好像每个控件的那个ID都不一样啊……

获取到控件ID

无废话，直接上代码

$(function () {
    UserPicker();
});

function UserPicker() {
    //找到所有“_userPicker”结尾的控件
    var allUserPickerControl = $("span[id$='_userPicker']");
    //遍历这些控件
     allUserPickerControl.each(function (index, domEle) {
        //获取用户控件ID
        var userPickerControlID = $(this).attr("id");
        //获取用户控件书形图标的ID
        var userPickerControlPickerID = userPickerControlID + "_browse";
        //移除选人按钮的原有点击事件
        $("#" + userPickerControlPickerID).removeAttr("onclick");
        $("#" + userPickerControlPickerID).unbind();
                //添加新的事件
        $("#" + userPickerControlPickerID).click(function () {
            //打开窗口方法                
            OpenPickerUserDialog(userPickerControlID);
        });
    });
}

下面就等着打开自定义窗口了……