MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件(3/3)

本篇文章主要介绍了"MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件"，主要涉及到treeview方面的内容，对于.NETjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 类似于多层级的角色与权限控制功能，用MVC实现MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件。最近我们的项目中需要用到树型菜单，以前使...

 1public ActionResult test(int id = 0)
 2{
 3     ViewBag.IsEdit = id == 0 ? false : true;
 4 5     List cb = new List() {
 6new CheckboxTreeItem() { Value="A", Text="一级A", Index="0" },
 7new CheckboxTreeItem() { Value="B", Text="一级B", Index="1" },
 8new CheckboxTreeItem() { Value="C", Text="一级C", Index="2", Checked =true,
 9             Items=new List() {
10new CheckboxTreeItem() { Value="CA", Text="二级CA", Index="0", Checked =true },
11new CheckboxTreeItem() { Value="CB", Text="二级CB", Index="1", Checked =true,
12                 Items=new List() {
13new CheckboxTreeItem() { Value="CBA", Text="三级CBA", Index="0", Checked =true },
14new CheckboxTreeItem() { Value="CBB", Text="三级CBB", Index="1", Checked =true },
15                    }
16                },
17            }
18            },
19    };
2021return View(cb);
22}
2324[HttpPost]
25[ValidateAntiForgeryToken]
26 [ValidateInput(false)]
27public ActionResult test(List CheckboxTree, int id = 0)
28{
29     ViewBag.IsEdit = id == 0 ? false : true;
3031return View(CheckboxTree);
32 }

下图是Controller接收到的参数:（运行调试，断点查看第27-31行代码）

另外还有自定义样式文件 CheckboxTree.css

 1/* 2author:熊学浩
 3time:2016年6月5日
 4description:树形菜单控件(有问题请致信:xiongzaiqiren@163.com),或者请参考【http://www.cnblogs.com/xiongzaiqiren/】
 5*/ 6/* CheckboxTree */ 7.CheckboxTree {
 8     width: 100%;
 9     height: 100%;
10     text-align: center;
11     margin: 0 auto;
12}
1314 .CBT-ul {
15     text-align: left;
16     list-style-type: disc;
17}
1819     .CBT-ul .CBT-li {
20         display: list-item;
21         text-align: left;
22         margin-left: 10px;
23         font-size: 16px;
24         line-height: 20px;
25         word-wrap: break-word;
26         word-break: nomal;
27         list-style: inherit;
28    }
29 .CBT-li label {
30    cursor: pointer;
31}
32 .CBT-li label input[type="checkbox"] {
33    width: 16px;
34    height: 16px;
35     padding: 0 5px 00;
36}
3738 .CBT-li span {
3940}
4142     .CBT-li a:link, .CBT-li a:visited {
43    }
4445     .CBT-li a:hover, .CBT-li a:active {
46        color: #ffffff;
47         background-color: #657386;
48    }
4950     .CBT-li a.active {
51        color: #ffffff;
52         background-color: #657386;
53    }
5455     .CBT-li a span {
5657     }

CheckboxTree.css

用于初始化和设置选择状态改变的自定义javascript文件 CheckboxTree.js

 1/* 2author:熊学浩
 3time:2016年6月5日
 4description:树形菜单控件(有问题请致信:xiongzaiqiren@163.com),或者请参考【http://www.cnblogs.com/xiongzaiqiren/】
 5*/ 6/* CheckboxTree */ 7function setCheckboxTreeItemValue(dom) {
 8try {
 9if (!!dom)
10             dom.value = (!!dom.checked)
11    }
12catch (e) {
13        console.log(e.message);
14    }
15};
16function iniCheckboxTree() {
17try {
18var cbList = document.getElementsByTagName("input");
19if (!!cbList && cbList.length > 0) {
20for (var i = 0; i < cbList.length; i++) {
21if (!!cbList[i] && (cbList[i].type == "checkbox")) {
22if (!!cbList[i].value) {
23                         cbList[i].checked = (cbList[i].value.toLowerCase() == "true") || false;
24                    }
25                }
26            }
27        }
28    }
29catch (e) {
30        console.log(e.message);
31    }
32};
3334if (!!window)
35     window.onload = iniCheckboxTree();
36else37     iniCheckboxTree();

CheckboxTree.js

最后，UI效果图：

【完】

以上就介绍了MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件，包括了treeview方面的内容，希望对.NETjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_1544114_3.html