将Layui.tree内的数据提交到控制器

开发工具与关键技术：Visual Studio 2015、C#
作者：曾浩源
撰写时间：2019年06月27日

目前的Layui.tree还未完善，还是少理一些功能，我一般用的是ZTree，因为一些原因需要用Layui.tree树形。
现在的Layui.tree提交数据主要依靠的是增删改三个按钮的回调，也就是文档所说的操作节点的回调，当然也有其他的，如：

第一、节点被点击的回调：该回调的作用一般是用于点击节点弹出弹窗查看详细信息或单个修改。（将树形内的id传到控制器查询详细信息回填数据，修改也是如此）

第二、复选框被点击的回调：这个回调也会常用，如：

1、在点击复选框时判断复选框是否被勾选，Layui.tree还没有此方法，所以需要我们自己动手利用Layui.tree本身的回调函数obj，然后使用obj里的elem属性（获取该节点信息）最后找到checked：obj.elem.find(’[type=“checkbox”]’).prop(“checked”)根据是否被勾选改变树形内的数据的状态。

2、第二个方法也是差不多，判断勾选后，将勾选的数据添加进自定义的数组或集合、点击取消勾选的移出数组或集合。

第三、操作节点的回调：此回调非常的简单，在初始化配置Layui.tree的时候要加上edit: [‘add’, ‘update’, ‘del’]，用法看一下文档就了解。

第四、返回选中的节点数据：获取去数据后可以将被勾选的数据提交到控制器。

第五、最后一个常见的实例重载，一般用于刷新树形。

这次功能的需求是：将三个级别的分类以树形的方式查询出来，启用的为勾选状态，不勾选为禁用，修改完毕后点击保存，提交到控制器保存到数据库。

首先是通过递归获取到数据源，在递归时要判断该数据下是否还有子类，没有就添加checked为true的属性，返回到页面显示数据，在Layui.tree组件内的参数要设置启用复选框，这个显示数据在上篇博客中有说明。
然后就是勾选设置状态了，在tree组件内设置参数：

oncheck: function (obj) {}

obj为点击复选框的节点，其中obj的属性有
elem：该节点元素。
data：该节点数据
checked：该节点的展开状态：open、close、normal

判断该节点是够被勾选需要：

	oncheck: function (obj) {
   		var TrueOrFalse;//设置一个变量存放true和false
  		if (obj.elem.find('[type="checkbox"]').prop("checked")) {
         	obj.data.state = true;//给该节点的状态设置为true
             	TrueOrFalse = true;
         }
       	else {
          	obj.data.state = false;//给该节点的状态设置为false
         	TrueOrFalse = false;
    		}
			//判断该节点下是否拥有子类，有子类时要根据父类同时改变状态
        	if (obj.data.children.length > 0) {
         	for (var i = 0; i < obj.data.children.length; i++) {
              	obj.data.children[i].state = TrueOrFalse;
                	if (obj.data.children[i].children.length > 0) {
                 		for (var j = 0; j < obj.data.children[i].children.length; j++) {
                      		obj.data.children[i].children[j].state = TrueOrFalse;
                        }
                 	}
           	}
      	}
        datas = data;//改变完后，更新旧的数据源，该数据源用于提交，需要声明成员变量
	}

注意：该方法需要写入layui.tree组件内！

获取到更新完后的数据源，点击保存提交到控制器

$.post("SavePermissions", { jurisd: datas }, function (data) {
	//提交完成后的事件
})

提交时，提交的数据格式为：

但是传到控制器时，却不能用之前递归时候的字典接收了，之前递归的字典为：

List<Dictionary<string, object>>

当数据传入时，一个父类数据可以正常显示，但是其子类却变成如下：

子类变成了{object}，我在网上找的一些方法或进行强转都没有作用，所以我更换了接收的类型，不用字典，而是用类数组，创建一个类，类里有传过来的属性字段，如：

id（父类id）、title（标题）、children（子类）、
state（状态）、id_jurisdiction（自身id）

该类如下：

public class TreeModel
{
	public int id { get; set; }
	public string title { get; set; }
	public int id_jurisdiction { get; set; }
	public bool state { get; set; }
	public TreeModel[] children { get; set; }
}

最后接收的的类型如：

public ActionResult SavePermissions(TreeModel[] jurisd){}

就可以完美接收所有数据了

有人觉得我不需要所有的数据，我只需要改动的数据，传全部数据太耗资源了，当然可以，就是在选中复选框时，判断该节点的状态是否和一开始传过来的数据源是否的一样，不一样就添加进一个数组或集合、取消勾选也一样，判断该节点和一开始传过来的数据源是否的一样，不一样添加进数组或集合；一样的话就移除数组或集合；
最后将该数组或集合提交到控制器处理。