2016-12-02 42 views
-1

使用數據庫中的角JS從單表中創建的TreeView這是我的表結構:如何,我們可以在MVC

Table structure

我想創建國家TREEVIEW格式--->區 - >城市 - - >村MVC

這是我的查詢:

CREATE TABLE [dbo].[countrylist] 
( 
    [countrylistid]  [INT] IDENTITY(1, 1) NOT NULL, 
    [kodepos_postcode] [VARCHAR](50) NULL, 
    [kelurahan_village] [VARCHAR](50) NULL, 
    [kecamatan_district] [VARCHAR](50) NULL, 
    [jenis_type]   [VARCHAR](50) NULL, 
    [kab_city]   [VARCHAR](50) NULL, 
    [propinsi_state]  [VARCHAR](50) NULL, 
    CONSTRAINT [PK_countryList] PRIMARY KEY CLUSTERED ([countrylistid] ASC) 
    WITH (pad_index = OFF, statistics_norecompute = OFF, ignore_dup_key = OFF, 
    allow_row_locks = on, allow_page_locks = on) ON [PRIMARY] 
) 
ON [PRIMARY] 
+0

通常Stackoverflow不會回答過寬的'我該如何做'類型的問題。在這種情況下,似乎你自己做了很少的研究來開發一個樹視圖或找到一個包來做樹視圖。此外,您的問題的格式可以改進可讀性。請參閱http://stackoverflow.com/help/how-to-ask –

回答

0

下面你需要執行的步驟,

  1. 從DB
  2. 準備樹形結構中的JavaScript和商店中範圍變量
  3. 綁定該變量一旦我們得到了適當的樹狀結構數據UI

讓您的數據,我們可以渲染使用遞歸模板。

DEMO

我認爲像

數據DATA

scope.dataFromDB= [ 
       {'id':1 ,'propinsi_STATE' : 0, 'village':"State 1"}, 
       {'id':4 ,'propinsi_STATE' : 2 ,'village':"Taluka 1.1"}, 
       {'id':3 ,'propinsi_STATE' : 1, 'village':"District 2"}, 
       {'id':5 ,'propinsi_STATE' : 0, 'village':"State 2"}, 
       {'id':6 ,'propinsi_STATE' : 0, 'village':"State 3"}, 
       {'id':2 ,'propinsi_STATE' : 1, 'village':"District 1"}, 
       {'id':7 ,'propinsi_STATE' : 4, 'village':"village 1.1.1"}, 
       {'id':8 ,'propinsi_STATE' : 1, 'village':"District 3"}, 
       {'id':9 ,'propinsi_STATE' : 3, 'village':"Taluka 2.1"} 
       ]; 

HTML

<div my-directive></div> 
    <script id="myDirectiveTemplate" type="text/ng-template"> 
      <ul> 
      <li ng-repeat="item in items"> 
       {{item.village}} 
       <div ng-if="item.children.length > 0" ng-include="'itemTemplate'"></div> 
      </li> 
      </ul> 
    </script> 
    <script type="text/ng-template" id="itemTemplate"> 
    <ul> 
     <li ng-repeat="item in item.children"> 
      {{item.village}} 
     <div ng-if="item.children.length > 0" ng-include="'itemTemplate'"></div> 
     </li> 
    </ul> 
    </script> 

我希望這會幫助你。