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)
}}settimeout(
"hiddenfield('所在城市')
",1)

2、使用js在原來select位置下面，新增乙個text型別input，輸入文字；

這一步主要是在找到的select節點以後，使用parentnode找到父節點，然後在父節點的innerhtml裡加入我們需要的input，js指令碼附後：

if(selectobj[i].title==strselecttitle)

3、新增下拉列表；

以下主要就是你js指令碼，放在頁面上就可以，沒有什麼特別需要說明的地方。當然，我們可以在相關事件上，新增我們需要的**段。

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

function ajax() 
}//傳送請求
);}

這個方法利用input的onpropertychange事件，但是這個時間每有乙個鍵盤動作，就會執行一次，所以我用乙個隱藏域存上一次的value的length，和這一次比較，不一樣的話執行ajax事件，否則就當做輸入但是input域的value值並沒有變化。

function vchange()
}

5、開發乙個ajax訪問的頁面，返回相關結果；

這個方法沒有太多要說明的，記得提公升許可權；利用caml語句，獲取與傳入值匹配的專案集合，拼成table返回，提供ajax使用。

spsecurity.runwithelevatedprivileges(delegate
()        
else
splistitemcollection itemcoll = web.lists["
city
"].getitems(query);
if (itemcoll.count != 0
)        
rev = rev + "";}}
});

view code

總結

整個功能的原理如上所示，利用js替換頁面的標籤，變為自己的input+下拉列表（div模擬），並監聽input的值變化，變化時通過ajax更新div下拉列表，選擇下拉列表，更新input同時使用js指令碼更新隱藏的自帶查閱項的value值，完成我們的效果。

附錄

ø 完整的ajax例項

ø 使用div 模仿下拉框

SharePoint 2013 擴充套件查閱項功能

SharePoint 2013 的新特性

SharePoint 2013 同步FBA認證使用者

SharePoint 2013 禁用搜尋服務

SharePoint 2013 擴充套件查閱項功能

SharePoint 2013 的新特性

SharePoint 2013 同步FBA認證使用者

SharePoint 2013 禁用搜尋服務

相關推薦