jstree數據庫表left的簡單介紹

本文目錄一覽：

• 1、jstree 如何根據數據庫值給相應的checkbox選中
• 2、jstree中想要選中子節點，父節點就會變成選中狀態，需要如何修改。
• 3、jstree 怎麼使用
• 4、jstree如何取消禁用節點的級聯

jstree 如何根據數據庫值給相應的checkbox選中

$(document).ready(function(){

var idsstr = “”;

var isc = “”;

$(“#a input[name=chkId]”).each(function(){ //遍歷table里的全部checkbox

idsstr += $(this).val() + “,”; //獲取所有checkbox的值

if($(this).attr(“checked”)) //如果被選中

isc += $(this).val() + “,”; //獲取被選中的值

});

if(idsstr.length 0) //如果獲取到

idsstr = idsstr.substring(0, idsstr.length – 1); //把最後一個逗號去掉

if(isc.length 0) //如果獲取到

isc = isc.substring(0, isc.length – 1); //把最後一個逗號去掉

alert(“所有checkbox的值：” + idsstr);

alert(“被選中checkbox的值：” + isc);

});

jstree中想要選中子節點，父節點就會變成選中狀態，需要如何修改。

修改方法：

JQuery

$(‘#子節點id’).parent().attr(‘id’);//通過子元素id獲取父元素

js

document.getElementById(“子節點id”).parentNode.getAttribute(“id”);

1、JS即Javascript，Javascript是一種由Netscape的LiveScript發展而來的腳本語言，主要目的是為了解決服務器終端語言，比如Perl，遺留的速度問題。當時服務端需要對數據進行驗證，由於網絡速度相當緩慢,只有28.8kbps，驗證步驟浪費的時間太多。於是Netscape的瀏覽器Navigator加入了Javascript，提供了數據驗證的基本功能。

2、能夠具有交互性，能夠包含更多活躍的元素，就有必要在網頁中嵌入其它的技術。如:Javascript、VBScript、Document Object Model(DOM，文檔對象模型)、Layers和 Cascading Style Sheets(CSS，層疊樣式表)，這裡主要講Javascript。那麼Javascript是什麼東西?Javascript就是適應動態網頁製作的需要而誕生的一種新的編程語言，如今越來越廣泛地使用於Internet網頁製作上。

jstree 怎麼使用

JsTree是一個基於JQuery的框架，實現簡單，功能比較齊全。項目中急於修改樹控件，現學現賣，實現了簡單的功能，僅包含異步加載，動態設置節點樣式圖標，靠着自己看幫助文檔，多次嘗試一步步完成。

1. 實現異步加載

$(“#tvBox”).tree({

data : {

async : true,

type : “xml_flat”,

[color=red]opts : {

url : URL

}

},

types : {

“default” : {

renameable : false,

deletable : false,

creatable : false,

draggable : false

}

},

ui:{

theme_name : “classic”

},

callback : {

beforedata : function(NODE, TREE_OBJ) {

setParams(NODE, TREE_OBJ); // 獲取參數信息

//向服務器傳遞參數

return { type : type_id, dyj : dyj_id, bdz : bdz_id, jg : jg_id, ept : ept_id }

},//end beforedata

onselect : function(NODE, TREE_OBJ) { // 單擊函數，點擊設備節點名稱的時候在右邊顯示信息

setParams(NODE, TREE_OBJ); // 獲取參數信息

var ids = $(NODE).attr(“id”).split(“-“);

// alert(ids[6]);

var subType = ids[1];

var dydj = ids[2];

//alert(type_id+” — “+ept_id);

var nodeParam=”type=”+type_id+”subType=”+subType+”bdz=”+bdz_id+”dydj=”+dydj+”ept=”+ept_id;

if (type_id == EptType.dyj) {//點擊的是電業局節點

var dyj_url = “pages/omds/ept/dyj/dyj.jsp?dyj=”+dyj_id+””+nodeParam;

//alert(dyj_url+” — “+dyj_name);

top.doCreateTabItem(dyj_url,

dyj_name,

dyj_url+”random=”+Math.random(),

dyj_name);//在’主頁’標籤中顯示

}

}, //end onselect

// 只在樹第一次加載的時候調用

onload : function(TREE_OBJ) {

$(“#tvBox ul li a:first-child ins”).hide(); //電業局節點不顯示圖標

}

}// end callback

}); // end tree()

JsTree支持多種格式的數據源，這裡使用了xml格式，其實json格式更好。data中代碼即可實現異步加載，通過設置UI參數可以修改主題，callback參數可以對一些事件作出響應，如beforedata可以在發送異步請求之前添加url參數，onselect可以響應生成的樹中節點的單擊事件，還有open在節點被打開的時候被調用，等等，可以幫助實現很多功能……

–1 碰到比較麻煩的事情是展開子節點向後台傳遞參數時需要用到父節點的id等信息，需要用到parent函數。

–2 另外，當展開一個節點從後台沒有查詢到子節點時需要返回root/root，不能使root,我當時用jdom生成xml碰到後者，出現了問題。

–3 callback中的事件需要自己去嘗試才能知道什麼時候被觸發

2. 實現節點換膚

項目中涉及到得是電業局–變電站–間隔–設備，對於後三者節點圖標必須與其狀態對應，且狀態是動態的，所以需要後台在生成xml的時候設置icon屬性

jstree如何取消禁用節點的級聯

$(‘#nodeTree’).tree({

        checkbox : true,

        url: Emo.BaseInfoManager.getConfig().leftTreeUrl,

        //點擊樹節點事件

        onClick : function(node) {

        //必須實現的點擊樹節點function

            treeNodeClicked(node.id);

            //選擇節點時，設置對應節點的checkbox

            var checkBox = $(‘span[class^=\’tree-checkbox\’]’, node.target);

            if(checkBox){

                checkBox.click();

            }

        },

        loadFilter : function(node){

            if(node.lengthBizFuse.text.defaultNumber){

                for(var i=0 ;iBizFuse.text.defaultNumber;i++){

                    node[i].checked = true;

                };

            }

            return node;

        },onLoadSuccess : function(node){

            defaultLoad();

        }

    });