MVC樹控件,mvc中應用treeview，實現復選框樹的多層級表單控件

類似於多層級的角色與權限控制功能，用MVC實現MVC樹控件,mvc中應用treeview，實現復選框樹的多層級表單控件。最近我們的項目中需要用到樹型菜單，以前使用WebForm時，樹型菜單有微軟提供的控件，非常方便，但現在需要在asp.netmvc中使用樹形菜單，先說明下我們對樹形菜單的需求：

1，支持CheckBox,允許對菜單項進行選擇；
2，當選擇父菜單時，它下面的子菜單全部選中；
3，當取消父菜單的選中狀態時，下面的子菜單也全部取消；
4，比較方便的與MVC結合；

5，能夠初始化選中狀態。

6，能夠以提交表單的方式，一次性將樹綁定到后台接收的對象。

 

首先菜單數據對象:

完整的 CheckboxTreeHelper.cs 代碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Html;
using System.Text;

/*
author:熊學浩
time:2016年6月5日
description:樹形菜單控件(有問題請致信:[e-mail]),或者請參考【http://www.cnblogs.com/xiongzaiqiren/】
*/
namespace System.Web.Mvc
{
    /// <summary>
    /// 菜單數據對象
    /// </summary>
    public class CheckboxTreeItem
    {
        /// <summary>
        /// 顯示的文本
        /// </summary>
        public string Text { get; set; }
        /// <summary>
        /// 顯示文本對應的值
        /// </summary>
        public string Value { get; set; }
        /// <summary>
        /// 是否被選中
        /// </summary>
        public bool Checked { get; set; }
        /// <summary>
        /// 結合表單的輔助屬性,View上使用(注意每個層級的索引必需從0開始並且是連續的)
        /// </summary>
        public string Index { get; set; }

        /// <summary>
        /// 子菜單集合
        /// </summary>
        public IList<CheckboxTreeItem> Items { get; set; }
    }

    /// <summary>
    /// 復選框樹控件
    /// 熊學浩
    /// 2016年6月3日
    /// </summary>
    public static class CheckboxTreeHelper
    {
        private static bool baselayer;

        public static String CheckboxTree(this HtmlHelper helper, string Name, CheckboxTreeItem Model, out string this_HtmlDomName, bool isChildNode = false)
        {
            if (null == Model)
            {
                this_HtmlDomName = string.Empty;
                return string.Empty;
            }

            StringBuilder sb = new StringBuilder();
            if (!baselayer)
                sb.Append("<div class=\"CheckboxTree\">");

            if (!isChildNode)
                sb.Append("<ul class=\"CBT-ul\">");
            sb.Append("<li class=\"CBT-li\">");

            this_HtmlDomName = Name + "[" + Model.Index + "]";

            sb.Append("<label style=\"cursor:pointer;\">");
            sb.AppendFormat("<input type=\"checkbox\" onchange=\"setCheckboxTreeItemValue(this);\" name=\"{0}\" value=\"{1}\" />", (this_HtmlDomName + ".Checked"), Model.Checked.ToString());
            sb.AppendFormat("<span>{0}</span>", Model.Text);
            sb.Append("</label>");

            sb.AppendFormat("<input type=\"hidden\" name =\"{0}\" value=\"{1}\" />", (this_HtmlDomName + ".Text"), Model.Text);
            sb.AppendFormat("<input type=\"hidden\" name =\"{0}\" value=\"{1}\" />", (this_HtmlDomName + ".Value"), Model.Value);
            sb.AppendFormat("<input type=\"hidden\" name =\"{0}\" value=\"{1}\" />", (this_HtmlDomName + ".Index"), Model.Index);

            if (null != Model.Items)
            {
                sb.Append("<ul class=\"CBT-ul\">");
                for (var i = 0; i < Model.Items.Count; i++)
                {
                    string _this_HtmlDomName;
                    sb.Append(CheckboxTree(helper, this_HtmlDomName + ".Items", Model.Items[i], out _this_HtmlDomName, true));
                }
                sb.Append("</ul>");
            }

            sb.Append("</li>");
            if (!isChildNode)
                sb.Append("</ul>");

            if (!baselayer)
                sb.Append("</div>");

            return sb.ToString();
        }
        public static String CheckboxTree(this HtmlHelper helper, string Name, IList<CheckboxTreeItem> Models)
        {
            if (null == Models) return string.Empty;
            if (Models.Count > 0)
                baselayer = true;

            StringBuilder sb = new StringBuilder();
            if (baselayer)
                sb.Append("<div class=\"CheckboxTree\">");
            sb.Append("<ul class=\"CBT-ul\">");

            string _this_HtmlDomName;

            foreach (CheckboxTreeItem item in Models)
            {
                sb.Append(CheckboxTree(helper, Name, item, out _this_HtmlDomName, true));
            }

            sb.Append("</ul>");
            if (baselayer)
                sb.Append("</div>");

            return sb.ToString();
        }
    }
}

 

字段說明：
Text:用於顯示的文本，比如：總裁
Value:顯示文本對應的ID，比如:0
Index:這個是結合表單的輔助屬性,View上使用(注意每個層級的索引必需從0開始並且是連續的)
Checked:當前菜單項是否被選中,用戶提交表單后我們可以通過這個屬性判斷用戶的選擇項
Items：當前菜單下的子菜單集合

 

樹形菜單的輸出：

@model List<CheckboxTreeItem>


@using (Html.BeginForm("test", "Home", new { }, FormMethod.Post, new { id = "form", name = "form" }))
{
  @Html.AntiForgeryToken();
    
  <link type="text/css" rel="stylesheet" href="@Url.Content("~/Models/CheckboxTree.css")" />
  @Html.Raw(Html.CheckboxTree("CheckboxTree", Model))   @*這里是輸出顯示樹形菜單*@
  <script src="@Url.Content("~/Models/CheckboxTree.js")" type="text/javascript"></script>
}

 

       無論是ajax還是直接post表單，最終的目的都是接收View中的數據，要想傳遞比較復雜的數據類型，我們需要對ASP.NET MVC Model Binding 有一定了解，之前也講解過MyTreeViewItem的結果，有普通的數據類型，比如 string,bool,也是對象類型，比如MyTreeViewItem類型的Parent，也是基於集合的屬性IList<MyTreeViewItem>,要想讓表單中的數據直接傳遞給Controller，我們需要對表單元素的name進行特殊處理才行。

 

Controller:這是最重要的就是接收參數，它是一個List類型，無論菜單項有多少層，都會按樹形數據結構層次組織好，方便我們查詢。

public ActionResult test(int id = 0)
{
    ViewBag.IsEdit = id == 0 ? false : true;

    List<CheckboxTreeItem> cb = new List<CheckboxTreeItem>() {
            new CheckboxTreeItem() { Value="A", Text="一級A", Index="0" },
            new CheckboxTreeItem() { Value="B", Text="一級B", Index="1" },
            new CheckboxTreeItem() { Value="C", Text="一級C", Index="2", Checked =true,
            Items=new List<CheckboxTreeItem>() {
                new CheckboxTreeItem() { Value="CA", Text="二級CA", Index="0", Checked =true },
                new CheckboxTreeItem() { Value="CB", Text="二級CB", Index="1", Checked =true,
                Items=new List<CheckboxTreeItem>() {
                    new CheckboxTreeItem() { Value="CBA", Text="三級CBA", Index="0", Checked =true },
                    new CheckboxTreeItem() { Value="CBB", Text="三級CBB", Index="1", Checked =true },
                    }
                },
            }
            },
    };

    return View(cb);
}

[HttpPost]
[ValidateAntiForgeryToken]
[ValidateInput(false)]
public ActionResult test(List<CheckboxTreeItem> CheckboxTree, int id = 0)
{
    ViewBag.IsEdit = id == 0 ? false : true;

    return View(CheckboxTree);
}

下圖是Controller接收到的參數:（運行調試，斷點查看第27-31行代碼）

 

另外還有自定義樣式文件 CheckboxTree.css

/*
author:熊學浩
time:2016年6月5日
description:樹形菜單控件(有問題請致信:[e-mail]),或者請參考【http://www.cnblogs.com/xiongzaiqiren/】
*/
/* CheckboxTree */
.CheckboxTree {
    width: 100%;
    height: 100%;
    text-align: center;
    margin: 0 auto;
}

.CBT-ul {
    text-align: left;
    list-style-type: disc;
}

    .CBT-ul .CBT-li {
        display: list-item;
        text-align: left;
        margin-left: 10px;
        font-size: 16px;
        line-height: 20px;
        word-wrap: break-word;
        word-break: nomal;
        list-style: inherit;
    }
.CBT-li label {
    cursor: pointer;
}
.CBT-li label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0 5px 0 0;
}

.CBT-li span {
    
}

    .CBT-li a:link, .CBT-li a:visited {
    }

    .CBT-li a:hover, .CBT-li a:active {
        color: #ffffff;
        background-color: #657386;
    }

    .CBT-li a.active {
        color: #ffffff;
        background-color: #657386;
    }

    .CBT-li a span {
        
    }

用於初始化和設置選擇狀態改變的自定義javascript文件 CheckboxTree.js

/*
author:熊學浩
time:2016年6月5日
description:樹形菜單控件(有問題請致信:[e-mail]),或者請參考【http://www.cnblogs.com/xiongzaiqiren/】
*/
/* CheckboxTree */
function setCheckboxTreeItemValue(dom) {
    try {
        if (!!dom)
            dom.value = (!!dom.checked)
    }
    catch (e) {
        console.log(e.message);
    }
};
function iniCheckboxTree() {
    try {
        var cbList = document.getElementsByTagName("input");
        if (!!cbList && cbList.length > 0) {
            for (var i = 0; i < cbList.length; i++) {
                if (!!cbList[i] && (cbList[i].type == "checkbox")) {
                    if (!!cbList[i].value) {
                        cbList[i].checked = (cbList[i].value.toLowerCase() == "true") || false;
                    }
                }
            }
        }
    }
    catch (e) {
        console.log(e.message);
    }
};

if (!!window)
    window.onload = iniCheckboxTree();
else
    iniCheckboxTree();

最后，UI效果圖：

【完】