使用userdata保持TreeView展开/折叠状态
用TreeView做了一個三層樹選單,一開始全部展開,頁面給拉得好長。現在要改成第一二層預設展開,第三層預設折疊。在網上沒找到好用的,就想到之前做過一個客戶端保持狀態的功能,然後就用JQuery+userdata實現了這個需求,具體代碼如下:
首先,在TreeView外面加個div標簽,便於JQuery篩選到這個TreeView
<div id="divTree">
<asp:TreeView ID="tvLeftMenu" runat="server">
...
</asp:TreeView>
<script type="text/javascript">
$(function() {
var isClick = 1; //非初始化點擊
var arrState = new Array();
var dateNow = new Date();
dateNow.setMinutes(dateNow.getMinutes() + 1); //展開狀態5分鐘之后過期
var expiresTime = dateNow.toUTCString();
var $imgFolder = $("#divTree img[alt]:gt(1)");
var img0 = $imgFolder.length > 0 ? $imgFolder[0] : null;
img0.addBehavior("#default#userdata");
$imgFolder.each(function(i) {
arrState[i] = 0;
$(this).attr("id", i);
}).click(function() {
if (isClick == 0)
return;
var idx = $(this).attr("id");
if ($(this).attr("alt").indexOf("展開") == 0) { //展開時
arrState[idx] = 1;
}
else { //摺疊時
arrState[idx] = 0;
}
$(img0).attr('state', arrState.toString());
img0.expires = expiresTime;//狀態過期後將恢復到預設狀態
img0.save("TreeNodeState");
});
//初始化
if (img0 != null) {
img0.load("TreeNodeState");
if ($(img0).attr('state') != undefined) {
var arrTmp = $(img0).attr('state').split(',');
if (arrTmp.length > 0) {
$imgFolder.each(function(i) {
if (arrTmp[i] == "1") {
isClick = 0;
$(this).click();
arrState[i] = 1;
}
});
isClick = 1;
}
}
}
});
</script>
</div>
(後來發現,Firefox不支持userdata,不過可以用sessionStorage取代它。但是問題又來了,在Firefox下,用javascript點擊“+”不會展開,沒找到解決辦法,最後就改用CallBack在後台保存Session來實現了。)
以下是經過改進的兼容IE和Firefox的一個類:
function ClientSession(obj, minute) {
var isIE = document.all;
var dateNow = new Date();
dateNow.setMinutes(dateNow.getMinutes() + minute);
var expiresTime = dateNow.toUTCString();
this.Set = function(key, value) {
if (isIE) {
obj.addBehavior("#default#userdata");
obj.setAttribute(key, value);
obj.expires = expiresTime;
obj.save("TreeNodeState");
}
else {
sessionStorage.setItem(key, value);
}
}
this.Get = function(key) {
if (isIE) {
obj.addBehavior("#default#userdata");
obj.load("TreeNodeState");
return obj.getAttribute(key);
}
else {
return sessionStorage.getItem(key);
}
}
}
<input type="hidden" id="hidState" value="" />
var clientSession = new ClientSession(hidState, 5);//實例化ClientSession
clientSession.Set('state', arrState.toString());//保存狀態
var strState = clientSession.Get('state');//讀取狀態