首页 > 代码库 > ExtMVC+ThinkPHP开发CRM管理系统--导航树的实现

ExtMVC+ThinkPHP开发CRM管理系统--导航树的实现

2024-07-14 21:02:30   224人阅读

   最近很是郁闷，因不明原因本机的开发的后台管理程序无法访问。模仿其他大侠给你的导航树（ExtJSMVC）到我这里没有效果。甚至一气之下删除了自己写的一周的代码样例，莫非是本月运势不好，不抱怨了（哈哈！无非是给自己近期没有更新博客找个借口）。

   进入正题今天分享一个通过后台访问mysql数据库，加载前台导航树的完整案例。

前期准备：

  1. 后台创建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)

  2. 创建数据如下:

    wKiom1MgEQzDugsFAAFVIVCCVdc655.jpg

  3. 前台目录准备：

    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=http://www.mamicode.com/‘__PUBLIC__/extjs410/resources/css/ext-all.css‘>"text/javascript" src=http://www.mamicode.com/‘__PUBLIC__/extjs410/bootstrap.js‘></script>"__ExtMVCPath__")}>‘;
var ExtSrcPath=‘<{:C("__ExtSrcPath__")}>‘;
var mainURL=‘<{:C("__mainUrl__")}>‘+‘Index‘;
</script>
</head>
<body>
<script type="text/javascript" src=http://www.mamicode.com/‘__ROOTPATH__/Tpl/Index_menuTree.js‘></script>>

   这里要注意一下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‘
                    }
                    ]
        });
    }
});

   来个效果先：

wKioL1MgG8vQumN7AAEq5JfYIpw638.jpg


   革命尚未成功同志仍需努力，下一步创建对应的view文件,目录结构如下：

   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({
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
        });
    }
});

   上效果：wKiom1MgH67w52luAAGNvZrDSPY730.jpg

   下一步将结合ThinkPHP访问数据库获取响应的数据：


本文出自 “洛山红茶的成长” 博客，请务必保留此出处http://85608547.blog.51cto.com/2093443/1532697


联系
我们