SharePoint 2013 扩展查阅项功能
SharePoint 2013的查阅项功能,就是可以扩展其他列表字段为当前列表选项,但是选项太多的时候,会造成选择起来非常麻烦,所以,我们采取JS+Ajax的方式,改善一下这个展示,使操作更加方便。
展现效果
如下图,当我在Textbox里输入北京,会把北京开头的选项,加载到下拉选项中,如果什么都不输入,就是全部下拉选项,这样比较方便选项多的时候,进行筛选选择;
原理介绍
1、 使用JS隐藏原来的Select控件;
使用F12查看Select的Html代码,发现有Title是字段名,还有id属性,而option的value就是该item的id,所以,我们可以使用JS来操作这个select,如下图;
隐藏Select的JS脚本,就是获取所有的select控件对象,然后找到title相符合的,当然你也可以根据id来获取,id的格式应该是内部字段名称+列表GUID+字段类型标识,看你的习惯了,附JS脚本如下:
function HiddenField(strSelectTitle)
{
var selectObj = document.getElementsByTagName("select");
for(var i=;i<selectObj.length;i++)
{
if(selectObj[i].title==strSelectTitle)
{
selectObj[i].style.display='none';
}
}
}
setTimeout("HiddenField('所在城市')",)
2、 使用JS在原来Select位置下面,添加一个Text类型Input,输入文字;
这一步主要是在找到的select节点以后,使用parentNode找到父节点,然后在父节点的innerHTML里加入我们需要的Input,JS脚本附后:
if(selectObj[i].title==strSelectTitle)
{
selectObj[i].style.display='none';
var Par=selectObj[i].parentNode;
Par.innerHTML=Par.innerHTML + "<table width='135' style='background-color:white' border='0' cellspacing='0' cellpadding='0'><tr><td><table width='100%' bordercolor='#666666' border='0' cellspacing='0' cellpadding='0' style='border-collapse:collapse;cursor:default' onclick='showHide()'><tr><td align='center'><input type='text' name='C_Select' id='C_Select' onpropertychange='vChange()'></td></tr></table></td></tr><tr><td><div id='oOption' onselectstart='return false'></div></td></tr></table>";
}
3、 添加下拉菜单;
以下主要就是你JS脚本,放在页面上就可以,没有什么特别需要说明的地方。当然,我们可以在相关事件上,添加我们需要的代码段。
特别:这些脚本是百度上查到的,但是他也是转载,没有原文链接,所以没有附后;
<!--隐现层的函数-->
<script type="text/javascript">
function showHide(obj){
sh={block:"none",none:"block"}
//层的display属性值在"block"和"none"间不断轮换,
//达到轮换隐藏和显示的效果
oOption.runtimeStyle.display=sh[oOption.currentStyle.display]
}
</script>
<!--鼠标移上id为oOption的对象时执行本段代码-->
<script event="onmouseover" for="oOption">
obj=event.srcElement //判断onmouseover事件是否发生在单元格上
if(obj.tagName=="TD"){ //设置事件发生所在的单元格的背景颜色
obj.style.backgroundColor="#dedede" //设置事件发生所在的单元格的字体颜色
obj.style.color="#FFFFFF"
}
</script>
<!--鼠标从id为oOption的对象上移开时执行本段代码-->
<script event="onmouseout" for="oOption">
obj=event.srcElement
//判断onmouseout事件是否发生在单元格上
if(obj.tagName=="TD"){
//设置事件发生所在的单元格的背景颜色
obj.style.backgroundColor="#FFFFFF"
//设置事件发生所在的单元格的字体颜色
obj.style.color="#000000"
}
</script>
<!--id为oOption的对象被单击时执行本段代码-->
<script event="onclick" for="oOption">
obj=event.srcElement
//判断onmouseover事件是否发生在单元格上
if(obj.tagName=="TD"){
showHide()//隐藏层
//设置id为oSelect的对象内的文本为被点击的单元格内的文本
document.getElementById("C_Select").innerText=obj.innerText
var selectObj=document.getElementsByTagName('SELECT');
for(var i=;i<selectObj.length;i++)
{
if(selectObj[i].title=="所在城市")
{
var objvalue=obj.id.substring(,obj.id.length);
selectObj[i].value=objvalue;
}
}
}
</script>
4、 写Ajax根据Input的值变化,更新下面的下拉结果;
<!—Ajax更新方法,将更新的Table放到Id为oOption的div里-->
function ajax() {
//创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
//获取值
var k = escape(document.getElementById("C_Select").value);
var url = "http://10.5.97.92/GetLookUpAjax/GetData.aspx?k=" + k;
//配置XMLHttpRequest对象
xmlHttp.open("get", url);
//设置回调函数
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == && xmlHttp.status == ) {
document.getElementById("oOption").innerHTML = xmlHttp.responseText;
}
}
//发送请求
xmlHttp.send(null);
}
<!—监视Input值变化,如果变化则执行ajax方法更新下拉列表-->
这个方法利用Input的onpropertychange事件,但是这个时间每有一个键盘动作,就会执行一次,所以我用一个隐藏域存上一次的Value的Length,和这一次比较,不一样的话执行Ajax事件,否则就当做输入但是Input域的Value值并没有变化。
function vChange()
{
document.getElementById("hiddenNum").value=document.getElementById("C_Select").value.length;
if(document.getElementById("C_Select").value.length>document.getElementById("hiddenNum").value.length)
{
ajax();
}
}
5、 开发一个Ajax访问的页面,返回相关结果;
这个方法没有太多要说明的,记得提升权限;利用Caml语句,获取与传入值匹配的项目集合,拼成Table返回,提供Ajax使用。
SPSecurity.RunWithElevatedPrivileges(delegate()
{
//此处放置需要以系统账号身份运行的代码
using (SPWeb web = new SPSite("http://10.10.10.11").OpenWeb())
{
SPQuery query = new SPQuery();
if (k != string.Empty)
{
query.Query = @"<Where>
<BeginsWith>
<FieldRef Name='Title' />
<Value Type='Text'>" + HttpUtility.UrlDecode(k) + @"</Value>
</BeginsWith>
</Where>";
}
else
{
query.Query = "";
} SPListItemCollection itemcoll = web.Lists["City"].GetItems(query);
if (itemcoll.Count != )
{
rev = "<table cellsapcing=‘0‘ cellspadding=‘3‘ border=‘0‘ width=‘100%‘> ";
foreach (SPListItem item in itemcoll)
{
rev = rev + "<tr><td id=myselect" + item["ID"].ToString() + ">" + item["Title"].ToString() + "</td></tr>";
}
rev = rev + "</table> "; }
}
});
总 结
整个功能的原理如上所示,利用JS替换页面的标签,变为自己的Input+下拉列表(div模拟),并监听Input的值变化,变化时通过Ajax更新div下拉列表,选择下拉列表,更新Input同时使用JS脚本更新隐藏的自带查阅项的Value值,完成我们的效果。
功能十分简单,代码段也没有难度,就是简单介绍的一个小例子,给有相关需求的人一个参考;也算自己对于SharePoint 2013里使用Ajax的一个练习吧,希望在实践中提高自己的能力。
附 录
Ø 完整的Ajax实例
http://www.cnblogs.com/oneword/archive/2011/06/04/2072558.html
Ø 使用div 模仿下拉框
http://hi.baidu.com/wangtanbao/item/6debfe0f6ae8ab21a0312d27
SharePoint 2013 扩展查阅项功能的更多相关文章
- SharePoint 2013 使用查阅项实现联动下拉框
SharePoint列表使用中,经常会用到下拉框,而有些特殊的需求,会用到联动的下拉框,在SharePoint中默认没有这样的字段,所以如果实现,我们需要自己想办法. 这里,我们介绍如何使用JQuer ...
- 每日学习心得:SharePoint 2013 自定义列表项添加Callout菜单项、文档关注、SharePoint服务端对象模型查询
前言: 前一段时间一直都比较忙,没有什么时间进行总结,刚好节前项目上线,同时趁着放假可以好好的对之前遇到的一些问题进行总结.主要内容有使用SharePoint服务端对象模型进行查询.为SharePoi ...
- SharePoint 2013 开发——其他社交功能
博客地址:http://blog.csdn.net/FoxDave 上一篇讲了如何获取用户配置文件的相关属性,它属于SharePoint 2013社交功能的一个小的构成部分.社交功能是SharePoi ...
- SharePoint 2013 搜索爬网功能
最近在政府部门介绍SharePoint 2013 新功能,我也准备了很多,比如SharePoint 2013的Search.以后有机会谈谈Office Web App,Workflow等. Share ...
- SharePoint 2013 启用 查看PDF功能
SharePoint 2013 默认不能直接Online (注:此Online非OWA概念,而是可以实现直接调用客户端软件实现对文档的编辑,保存之后同步上传)打开PDF(SharePoint 2013 ...
- SharePoint 2010 列表查阅项栏的formfield控件对象取值
开发的时候想当然的认为主表解析出来就是一个dropdownlist,可是在大数据测试的时候,发现有情况. 首先创建一个子列表:DetailList,并添加19条数据: 创建主列表:MainList,并 ...
- SharePoint 2013 入门教程
以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个SharePoint开发的成长记录,里面记录的都 ...
- SharePoint 2013 入门教程--系列文章
转:http://www.cnblogs.com/jianyus/p/3381415.html 以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这 ...
- SharePoint 2013 入门教程 [不断更新~]
以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个SharePoint开发的成长记录,里面记录的都 ...
随机推荐
- Effective Modern C++ 42 Specific Ways to Improve Your Use of C++11 and C++14
Item 1: Understand template type deduction. Item 2: Understand auto type deduction. Item 3: Understa ...
- jquery $.each的用法
通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) ...
- 简单java在线测评程序
简单java程序在线测评程序 一.前言 大家过年好!今年的第一篇博客啊!家里没有网,到处蹭无线!日子过得真纠结!因为毕设的需求,简单写了一个java程序在线测评程序,当然也可以在本地测试. 二.思路 ...
- scikit-learn K近邻法类库使用小结
在K近邻法(KNN)原理小结这篇文章,我们讨论了KNN的原理和优缺点,这里我们就从实践出发,对scikit-learn 中KNN相关的类库使用做一个小结.主要关注于类库调参时的一个经验总结. 1. s ...
- MyCAT实现MySQL的读写分离
在MySQL中间件出现之前,对于MySQL主从集群,如果要实现其读写分离,一般是在程序端实现,这样就带来一个问题,即数据库和程序的耦合度太高,如果我数据库的地址发生改变了,那么我程序端也要进行相应的修 ...
- EntityFramework 7 Linq Contains In 奇怪问题(已修复)
问题说明: 博客问题纪录 Use EF7, Linq Contains In is error. EF7 Code Commit adding (client side) support for Co ...
- iOS开发--AVFoundation自定义相机
首先导入一个头文件 #import <AVFoundation/AVFoundation.h> 由于后面我们需要将拍摄好的照片写入系统相册中,所以我们在这里还需要导入一个相册需要的头文件 ...
- java多线程--几个多线程面试题小结
自学了一段时间的多线程知识,尝试了做了几个编程题,发现想象中很简单的功能,自己真写起来要花费远超自己想象的功夫,知识点易学,不易用啊. 面试题1:编写程序实现,子线程循环10次,接着主线程循环20次, ...
- 重温JSP学习笔记--JSTL标签库
以前写jsp的时候对jstl标签库是有些抵触的,因为我觉得嵌入java代码的方式几乎无往不利,没有必要使用标签库,不过这次复习还是好好地学习了一下,发现这个还是很有用处的,用得好能省不少事,JSTL是 ...
- Node.js、express、mongodb 入门(基于easyui datagrid增删改查)
前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...