JsTree實現簡單的CRUD

標籤：

      現在需要將省市縣地區這塊搞成樹狀圖的形狀，由於項目使用的AngularJS+ABP+WebAPI各個模組之間資料轉送形式是json格式，那麼對於JsTree來說就方便很多了，只需要將json資料搞成我們JsTree需要的嵌套形式資料存放區就可以了。

JsTree官方地址

https://github.com/vakata/jstree#the-required-json-format

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

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

HTML頁面

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

      <div class="portlet-body">            <div id="areasTree"></div>      </div>

JS頁面

        app.controller(‘AreasCtrl‘, function ($http, $scope, systemSetting) {            $http.get(‘api/areas/all‘).then(function (response) {                if (response.data) {                    console.log(response.data);                    $(‘#areasTree‘).jstree({                        ‘core‘: {                            ‘data‘: response.data,           //返回的資料，數組                            "themes": {                                "dots": true,               // no connecting dots between dots                                "responsive": false        //無響應                            },                            ‘multiple‘: false,              //設定其為沒有多選                                ‘check_callback‘: true,          //設定其true.可以進行文本的修改。                                         },                        ‘types‘: {                         //這裡就是圖片的顯示格式                            "default": {                                "icon": "fa fa-folder tree-item-icon-color icon-lg"                            },                            "file": {                                "icon": "fa fa-file tree-item-icon-color icon-lg"                            }                        },                        ‘plugins‘: [                       //外掛程式，下面是外掛程式的功能                            ‘types‘,                      //可以設定其表徵圖，在上面的一樣。                            ‘contextmenu‘,                //文本菜單                            ‘wholerow‘,                   //                            ‘sort‘,                       //分類                            ‘unique‘                      //獨特----防止重複。(新添加的)                        ]                    });                }            });        });

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

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

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

‘types’這裡是 下面外掛程式中的圖片的展示，是我們前面標籤的圖片。

‘plugins’是外掛程式地區。這裡可以自訂外掛程式。文檔的下面就有例子。外掛程式部分我們可以看到有以下幾個。

• types：設定表徵圖，對應於上面的那個。
• contextmenu：常值內容菜單，也就是說可以有右鍵的那些屬性，增刪改查。
• sort：分類。
• unique：防止重複。
• dnd：可以移動標籤。

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

實現效果

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

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

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

實現右鍵操作的響應

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

"core.check_callback" can also be set to a function, that will be invoked every time a modification is about to happen (or when jstree needs to check if a modification is possible). If you return true the operation will be allowed, a value of falsemeans it will not be allowed. The possible operation you can expect are create_node, rename_node, delete_node, move_nodeand copy_node. The more parameter will contain various information provided by the plugin that is invoking the check. For example the DND plugin will provide an object containing information about the move or copy operation that is being checked - is it a multi tree operation, which node is currently hovered, where the insert arrow is pointing - before, after or inside, etc.

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

           ‘check_callback‘: function (operation, node, parent, position, more)       {          

              if (operation === ‘create_node‘) {                   console.log(parent.text);                        

                   console.log(‘create測試‘);                                      

             }            if (operation === ‘delete_node‘) {                   console.log(node.text);                    console.log(position);                   console.log(‘delete測試‘);             }            if (operation === ‘rename_node‘) {                  //console.log(parent.text);                    console.log(position);                    console.log(node.text);                      console.log(‘rename測試‘);             }             console.log(‘測試地區‘);             return true;       },    

通過在這裡添加匿名函數，我們可以實現顯示一些操作。我們將雁塔修改為123看是否觸發了我們設定的匿名函數。

修改前：

修改後：

下面是列印了node節點的值，可以看到是一個對象。

通過上面的對比可以發現我們設定的匿名函數被成功的觸發了，可以發現這裡的參數都有一些特殊的作用。分析下這個函數裡面的參數operation,node,parent,position,more。

• operation：這個是看我們右鍵選擇了什麼功能。是刪除，添加，移動，修改等。
• node：表示當前對象的值，裡面儲存有這個節點裡面的一些屬性。
• parent：表示父類節點對象。
• position：表示當前節點的text值。比如我們的123就是在後台列印了position的原因。
• more：這個現在列印不出來，也不清楚幹什麼用的。

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

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

             if (operation === ‘delete_node‘) {             var url=‘api/areas/delete?id=‘+node.id;             $http.get(url)                  .then(function(response){                      console.log(response.state);

                      console.log(‘刪除成功‘);            });              console.log(node.text);

              console.log(position);              console.log(‘delete測試‘);            }

這樣我們就可以和後台進行互動了。

JsTree實現簡單的CRUD