ExtMVC+ThinkPHP開發CRM管理系統--導航樹的實現

最後更新：2014-07-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：管理系統資料庫後台管理 mysql 開發

最近很是鬱悶，因不明原因原生開發的後台管理程式無法訪問。模仿其他大俠給你的導航樹（ExtJSMVC）到我這裡沒有效果。甚至一氣之下刪除了自己寫的一周的代碼範例，莫非是本月運勢不好，不抱怨了（哈哈！無非是給自己近期沒有更新部落格找個借口）。

進入正題今天分享一個通過後台訪問mysql資料庫，載入前台導航樹的完整案例。

前期準備：

後台建立mySql資料庫及相應表結構：
MI_ID int(11)
MI_MenuName varchar(100)
MI_URL varchar(100)
MI_ParentNode varchar(45)
MI_GroupName varchar(100)
MI_StateID int(10)
建立資料如下:
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/22/87/wKiom1MgEQzDugsFAAFVIVCCVdc655.jpg" title="Snap1.png" alt="wKiom1MgEQzDugsFAAFVIVCCVdc655.jpg" />
前台目錄準備：
650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/22/88/wKioL1MgEWrSJ5nfAAHKLrxDK8A865.jpg" title="Snap2.png" alt="wKioL1MgEWrSJ5nfAAHKLrxDK8A865.jpg" />
其中紅色方框部分的內容是今天要示範的導航樹的檔案。
準備工作完成，下面開始逐步逐層實現：
首先：建立前台的html和js頁面，這裡需要著重說面一下，ExtJSMVC的特點是將當前頁面需要顯示的內容在初始化中匯入本地，後期待使用者觸發才會引用的js檔案，在使用者觸發相關操作後，才匯入到本地。所以很多ExtJSMVC的規範結構，有點像.net winform開發的program.cs,每一個項目有一個主檔案，項目通過經過該主檔案入口運行。但在實際項目開發中，可能會面對各種情況，所以，在這裡示範的項目案例，全部是以一個html檔案搭載一個js檔案作為主檔案。在一定層面上是藉助ExtJS MVC可以將前台顯示控制項封裝成對應的view,而後在使用中，可以進行相關的複用。閑話到此實現開始。
前台html頁面代碼：Index_menuTree.html
```
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>menuTree page</title><link rel=‘stylesheet‘ type=‘text/css‘ href=‘__PUBLIC__/extjs410/resources/css/ext-all.css‘><script type="text/javascript" src=‘__PUBLIC__/extjs410/bootstrap.js‘></script><script>var ExtMVCPath=‘<{:C("__ExtMVCPath__")}>‘;var ExtSrcPath=‘<{:C("__ExtSrcPath__")}>‘;var mainURL=‘<{:C("__mainUrl__")}>‘+‘Index‘;</script></head><body><script type="text/javascript" src=‘__ROOTPATH__/Tpl/Index_menuTree.js‘></script></body></html>
```

這裡要注意一下ExtMVCPath 是通過ThinkPHP config設定檔配置的內容：

‘__ExtMVCPath__‘=>__ROOT__.‘/App/Tpl/default/‘.GROUP_NAME.‘/Js‘,

前台js檔案:Index_menuTree

Ext.Loader.setConfig({    enabled:true});Ext.application({    requires:[‘Ext.container.Viewport‘],    name:‘MVC‘,    appFolder:ExtMVCPath,    controllers:[‘Index_menuTreeController‘],    launch:function(){        Ext.create(‘Ext.container.Viewport‘,{            layout:‘fit‘,            items:[                   {                        xtype:‘panel‘,                        title:‘Demo panel‘                    }                    ]        });    }});

來個效果先：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/22/88/wKioL1MgG8vQumN7AAEq5JfYIpw638.jpg" title="Snap3.png" alt="wKioL1MgG8vQumN7AAEq5JfYIpw638.jpg" />

革命尚未成功同志仍需努力，下一步建立對應的view檔案,目錄結構如下：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/22/89/wKioL1MgHGTDZaXIAAA6nHLtJBU053.jpg" title="Snap4.png" alt="wKioL1MgHGTDZaXIAAA6nHLtJBU053.jpg" />

Ext.define(‘MVC.view.main.menuTree‘,{    extend:‘Ext.tree.Panel‘,    alias:‘widget.mainMenuTree‘,    border:false,    //hrefTarget:‘mainContent‘,    rootVisible:false,                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  store:‘menuStore‘});

menuStore.js 這個檔案要注意一下了哈！

Ext.define(‘MVC.store.menuStore‘,{    extend:‘Ext.data.TreeStore‘,    alias:‘widget.menuStore‘,    //storeId:‘menuStoreID‘,    defaultRoodId:‘root‘,    //requires:[‘MVC.model.menuModel‘],    //model:[‘MVC.model.menuModel‘],    proxy:{        type:‘ajax‘,        url:ExtMVCPath+‘/json/menuJson.json‘,        reader:‘json‘,        autoLoad:true    }});

menuJson.js 檔案

[    {"id":"2",    "pid":"1",    "text":"使用者管理",    "leaf":"0",    "url":"http:\/\/www.lihuai.net",    "children":[{        "id":"5",        "pid":"2",        "text":"基本資料",        "leaf":"1",        "url":"http:\/\/www.sogou.com",        "children":""},{        "id":"11",        "pid":"2",        "text":"資訊管理",        "leaf":"1",        "url":"http:\/\/www.sogou.com",        "children":""},{        "id":"12",        "pid":"2",        "text":"添加使用者",        "leaf":"1",        "url":"http:\/\/www.sogou.com",        "children":""}]},    {"id":"3",    "pid":"1",    "text":"產品管理",    "leaf":"0",    "url":"http:\/\/www.so.com",    "children":[{        "id":"7",        "pid":"3",        "text":"產品資訊",        "leaf":"1",        "url":"http:\/\/www.so.com",        "children":""},{        "id":"8",        "pid":"3",        "text":"產品添加",        "leaf":"1",        "url":"http:\/\/www.so.com",        "children":""}]}]

最後一部傳說中的controller檔案閃亮登場；Index_menuTreeController.js

Ext.define(‘MVC.controller.Index_menuTreeController‘,{    extend:‘Ext.app.Controller‘,    views:[‘main.menuTree‘],    models:[‘menuModel‘],    stores:[‘menuStore‘],    init:function(){        this.control({                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 });    }});

上效果：650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/22/8B/wKiom1MgH67w52luAAGNvZrDSPY730.jpg" title="Snap5.png" alt="wKiom1MgH67w52luAAGNvZrDSPY730.jpg" />

下一步將結合ThinkPHP訪問資料庫擷取響應的資料：

本文出自 “洛山紅茶的成長” 部落格，請務必保留此出處http://85608547.blog.51cto.com/2093443/1532697

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More