JsTree實現簡單的CRUD

現在需要將省市縣區域這塊搞成樹狀圖的形狀，由於專案使用的angularjs+abp+webapi各個模組之間資料傳輸形式是json格式，那麼對於jstree來說就方便很多了，只需要將json資料搞成我們jstree需要的巢狀形式資料儲存就可以了。

這裡面有操作jstree的全部內容，只需要將裡面的小例子看懂，基本就沒問題。好的一點是那邊有人家的練習，理解起來很給力，只需要執行即可。

注意下：需要引用相關的js檔案。這個在github中作者說的很清楚了，我們直接進行操作就可以了。

html頁面

需要指定的id值，用來顯示我們js檔案中資料。

'multiple': false, //設定其為沒有多選

'check_callback': true, //設定其true.可以進行文字的修改。

},'types': ,

"file":

},'plugins': [ //外掛程式，下面是外掛程式的功能

'types', //可以設定其圖示，在上面的一樣。

'contextmenu', //文字選單

'wholerow', //

'sort', //分類

'unique' //獨特----防止重複。(新新增的)

]});

}});

});通過html的get方法我們可以從後台得到完整的json資料，如下：

接著我們就進行上面內容的講解。

『core』:核心區域，裡面主要是資料和主題。我們業務邏輯也是在這裡進行的。裡面一些功能都有注釋，可以自己看懂。

『types』這裡是 下面外掛程式中的的展示，是我們前面標籤的。

『plugins』是外掛程式區域。這裡可以自定義外掛程式。文件的下面就有例子。外掛程式部分我們可以看到有以下幾個。

這樣的特性還有很多，文件中都有。這裡需要注意到contextmenu和dnd，這兩個我們需要在core中設定其』check_callback』:true；這樣才能確保可以操作和移動標籤。

下面是通過後台提供json資料，得到的樹狀圖樣式。

既然我們已經設定了contextmenu那麼就意味著現在就有了右鍵功能，如下

那麼如何才能響應這樣操作，比如我點選新增，我是如何獲取這些資料，如何將其傳送到後台呢。

我們介面上的東西出來了，那麼如何才能實現響應了。我們發現在官方文件中有下面的一句話。

其實大概的意思就是說我們可以通過這裡的匿名函式來進行設定，看到底我們在前端選擇的是那個操作。

'check_callback': function (operation, node, parent, position, more)       

if (operation === 'delete_node') 
if (operation === 'rename_node') 
console.log('測試區域');
return true;
},

修改前：

修改後：

下面是列印了node節點的值，可以看到是乙個物件。

通過上面的對比可以發現我們設定的匿名函式被成功的觸發了，可以發現這裡的引數都有一些特殊的作用。

分析下這個函式裡面的引數operation,node,parent,position,more。

我們現在已經知道了每個引數的區別，我們就可以利用operation來看到底選擇了哪些操作，接著就可以在相應的區域中進行post請求，不管是刪除還是新增都沒有問題。

我們就測試乙個刪除吧。就拿我上面的來說就需要在選擇刪除的區域進行請求操作。

if (operation === 'delete_node') );

console.log(node.text);

console.log(position);

console.log('delete測試');
}

簡單操作crud

資料的操作 dml 建立資料 插入資料 insert into tbl name 字段列表 values 值列表 insert into exam student name,stu no values zhangsan php001 如果需要在插入時，為所有的字段設定值，那麼可以省略字段列表。要求是...

簡單操作crud

資料的操作 dml 建立資料 插入資料 insert into tbl name 字段列表 values 值列表 insert into exam student name,stu no values zhangsan php001 如果需要在插入時，為所有的字段設定值，那麼可以省略字段列表。要求是...

JsTree 簡單用法

jstree是乙個基於jquery的框架，實現簡單，功能比較齊全。專案中急於修改樹控制項，現學現賣，實現了簡單的功能，僅包含非同步載入，動態設定節點樣式圖示，靠著自己看幫助文件，多次嘗試一步步完成。1.實現非同步載入 tvbox tree types ui callback end beforeda...