SharePoint 擴展查閱項技巧使用案例圖文教程

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=0;i

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 + "";}

3、 添加下拉菜單；

　　以下主要就是你JS腳本，放在頁面上就可以，沒有什么特別需要說明的地方。當然，我們可以在相關事件上，添加我們需要的代碼段。

特別：這些腳本是百度上查到的，但是他也是轉載，沒有原文鏈接，所以沒有附后；

4、 寫Ajax根據Input的值變化，更新下面的下拉結果；

更新方法，將更新的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 == 4 && xmlHttp.status == 200) {        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 = @"                                                                                    " + HttpUtility.UrlDecode(k) + @"                                                 ";        }        else        {            query.Query = "";        }                SPListItemCollection itemcoll = web.Lists["City"].GetItems(query);        if (itemcoll.Count != 0)        {            rev = " ";            foreach (SPListItem item in itemcoll)            {                rev = rev + "";            }            rev = rev + "
" + item["Title"].ToString() + "
 ";        }    }});

View Code

總 結

　　整個功能的原理如上所示，利用JS替換頁面的標簽，變為自己的Input+下拉列表（div模擬），并監聽Input的值變化，變化時通過Ajax更新div下拉列表，選擇下拉列表，更新Input同時使用JS腳本更新隱藏的自帶查閱項的Value值，完成我們的效果。

　　功能十分簡單，代碼段也沒有難度，就是簡單介紹的一個小例子，給有相關需求的人一個參考；也算自己對于SharePoint 2013里使用Ajax的一個練習吧，希望在實踐中提高自己的能力。