Extjs-樹 Ext.tree.TreePanel 動態加載數據

先上效果圖

1、說明
Ext.tree.Panel 控件是樹形控件，大家知道樹形結構在軟件開發過程中的應用是很廣泛的，樹形控件的數據有本地數據、服務器端返回的數據兩種。
對於本地數據的加載，在extjs的 api文檔中都有介紹，但是Extjs.tree.Panel怎么動態加載數據庫中的數據，API文檔介紹的較少，
以至於初學者，不知道怎么實現。

本篇文章將介紹Extjs.tree.Panel動態加載數據的思路。

本篇文章的主要內容有：
（1）、搭建環境
（2）、創建數據表
（3）、創建實體類
（4）、創建ViewModel
（5）、編寫后台代碼
（6）、編寫前台代碼

注意：雖然本文寫的非常詳細，但是也要求讀者具有mvc、fluentdata方面的知識准備。

一、搭建環境
            開發環境：visualstudio 2012
                   ORM  ：   fluentdata
            開發語言：c#
            項目類型：asp.net mvc4

搭建環境步驟：
   （1）、打開visualstudio 2012 ，新建-項目-模板-visual c#-web-asp.net mvc4    （基本）
   （2）、引用fluentd.dll
          在方案資源管理器中，找到剛剛創建的項目，右鍵單擊“引用”文件夾，在彈出菜單選擇“添加引用”，瀏覽，找到fluentd.dll 單擊“確定”按鈕即可
   （3）、在項目下添加一個文件夾，命名為“DAL”，在該文件夾中添加一個類DBHelper.cs
   （4）、在web.config文件中添加數據庫連接字符串
<connectionStrings>    
    <add name="testDBContext" connectionString="server=192.168.1.105;uid=sa;pwd=***;database=NewDB;"/>
  </connectionStrings>

DBHelper.cs類代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using FluentData;
namespace MvcExtJsTree.DAL
{
    public class DBHelper
    {
        public static IDbContext Context()
        {
            return new DbContext().ConnectionStringName("testDBContext",
                    new SqlServerProvider());
        }
    }
}

注意：用別的orm也可以，只要能訪問數據庫即可。
二、創建數據表
首先在sql數據庫中創建一個數據庫，命名為NewDB
接下來，在該數據庫下創建數據表，命名為testTree
1、創建數據表的腳本如下：

USE NewDB
GO

CREATE TABLE testTree
(
    id int primary key identity(1,1) NOT NULL,
    myTitle nvarchar(50) NULL,
    iconCls nvarchar(50) NULL,
    fatherId int NOT NULL
)

三、在項目的Models文件夾中添加實體類，命名為testTree.cs

該類的作用是方法數據，查詢數據用的
代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcExtJsTree.Models
{
    public class testTree
    {
        public int id { get; set; }
        public string myTitle { get; set; }
        public string iconCls { get; set; }
        public int fatherId { get; set; }
    }
}

四、創建ViewModel
在項目下添加一個文件夾，命名為ViewModel
在該文件夾下添加一個類，命名為Tree.cs
該類的作用就是把后台從數據庫查詢出的數據轉換為前台treePanel支持的數據格式
Tree.cs類的代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcExtJsTree.ViewModel
{
    public class Tree
    {
    public  String id;

    public String text;

    public String iconCls;

    public Boolean leaf;

    public String fatherId;

    public List<Tree> children; 

    }
}

五、mvc項目Home控制器的代碼如下：

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FluentData;
using MvcExtJsTree.Models;
using MvcExtJsTree.ViewModel;

namespace MvcExtJsTree.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult HandlerTreeFromDB()
        {
            var categoryList = DAL.DBHelper.Context().Select<testTree>("*").From("testTree").QueryMany();
            var result = this.ConvertTreeNodes(categoryList);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        #region 和樹節點相關的
        private List<Tree> ConvertTreeNodes(List<testTree> listCategory)
        {
            List<Tree> listTreeNodes = new List<Tree>();
            LoadTreeNode(listCategory, listTreeNodes, -1);
            return listTreeNodes;
        }
        private void LoadTreeNode(List<testTree> listCategory, List<Tree> listTreeNodes, int pid)
        {
            foreach (testTree category in listCategory)
            {
                if (category.fatherId == pid)
                {
                    Tree node = this.TransformTreeNode(category);
                    listTreeNodes.Add(node);
                 
                    LoadTreeNode(listCategory, node.children,Convert.ToInt32(node.id));
                }
            }
        }

        private Tree TransformTreeNode(testTree category)
        {
            Tree treeNode = new Tree()
            {
                id = category.id.ToString(),
                text = category.myTitle,
                leaf=false,
                fatherId=category.fatherId.ToString(),
                 iconCls=category.iconCls,
                children = new List<Tree>()

            };
            var categoryId = category.id;
            var childrens = DAL.DBHelper.Context().Select<testTree>("*").From("testTree").Where("fatherId=@0").Parameters(categoryId).QueryMany(); //判斷節點是否有子節點
            if (childrens.Count == 0)
            {
                treeNode.leaf=true;
                treeNode.children = null;
            }
            return treeNode;
        }
        #endregion

    }
}

 

 

 

六、Home控制器的Index方法對應的Index.cshtml頁面的代碼如下：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>   
    <link href="~/ExtJS4.2/resources/css/ext-all-neptune-rtl.css" rel="stylesheet" />
    <link href="~/ExtJS4.2/resources/css/ext-all.css" rel="stylesheet" />
    <script type="text/javascript" src="~/ExtJS4.2/ext-all.js"></script>
    <script src="~/ExtJS4.2/locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            var model = Ext.define("TreeModel", { // 定義樹節點數據模型
                extend: "Ext.data.Model",
                fields: [
{ name: "id", type: "string" },
                    { name: "text", type: "string" },
                    { name: "iconCls", type: "string" },
                    { name: "leaf", type: "boolean" },
                    { name: 'url', type: "string" },
                    { name: 'description', type: "string" }]
            });
            var store = Ext.create('Ext.data.TreeStore', {
                model: model,//定義當前store對象的Model數據模型
                //                autoLoad : true,
                proxy: {
                    type: 'ajax',
                    url: 'Home/HandlerTreeFromDB',//請求
                    reader: {
                        type: 'json',
                        //                        root : 'data'//數據
                    }
                },
                root: {//定義根節點，此配置是必須的
                    //                    text : '管理菜單',
                    expanded: true
                }

            });
            Ext.create('Ext.tree.Panel', {
                title: 'Simple Tree',
                width: 200,
                height: 550,
                store: store,
                rootVisible: false,//隱藏根節點
                renderTo: Ext.getBody()
            });
        });
    </script>
</head>
<body>
</body>
</html>

注意：
   (1)、需要注意的是，在項目下添加文件夾“ExtJS4.2”，並把extjs4.2的源文件拷貝到該文件夾下，即給項目引用extjs4.2框架。
  （2）、后台代碼處理思路：通過遞歸，把從數據庫中查詢的數據轉換為Ext.tree.Panel所支持的數據

 七、土豪打賞