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=0;i<selectObj.length;i++)
    {
        if(selectObj[i].title==strSelectTitle)
        {
            selectObj[i].style.display='none';
        }
    }
}
setTimeout("HiddenField('所在城市')",1)

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=0;i<selectObj.length;i++)
        {
            if(selectObj[i].title=="所在城市")
            {
                var objvalue=obj.id.substring(8,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 == 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 = @"<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 != 0)
        {
            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