前端随笔：layui 树型图tree 选择后实时动态赋值给文本框

前端：

<div id="names" name="names"></div>

<div id="teste" class="demo-tree demo-tree-box center" 
     style="width: 780px; height: 300px; overflow: scroll;"></div>
        //overflow: scroll;是滚动条

overflow: scroll;是滚动条

Js

        //tree加这里指定为树型图
         //util为工具集，不加可能触发不了任何事件
         //laypage下面的翻页，第几页，下一页等，不加不能显示页数
 layui.use(['tree', 'util', 'laypage'], function () {
            var tree = layui.tree
                , layer = layui.layer
                , util = layui.util;
            var laypage = layui.laypage;
              
              
             $.getJSON('JsonGetProject', //这里输入后端接口名字就行
                    {
                       Name: name,//这里是往后端传的参数
                    }, function (json) {  //返回的json
                        if (json) {
                          NameJson(json,100) //调用下方方法写在一起看花了
                        }
                    });


          //创建方法免得看花了眼，上面调用这个方法
      function NameJson(json, page) {
                tree.render({
                    elem: '#teste'   //我们树型图的id
                    , data: json     //把json 给树型图
                    , showCheckbox: true  //是否显示复选框
                    , oncheck: function (obj) {    //复选框点击后触发事件
                      if (obj.checked) {   //判断是选中还是取消
                      
                              //obj.data选中的选项所有的数据、
                             //obj.data.id 和obj.data.title要的，json里面也得有，也可以自己定义
                             document.getElementById('names').value = obj.data.title;
                             if（obj.data.field=""）{//下面的传值这个就是获取外层数据，以此类推 }
                             else{    //这个就是下一级了
                                  obj.data.children.forEach(function (o, p, q) {
                                     //o 代表循环的第一个值
                                     //p 代表当前值在数组中第几条
                                     //q 代表这个整个数组或集合
                                    });
                                })
                             }
                      }
                      else{//我就是取消选项了以此类推
                      }
                    }
                 });
              }
              
});

注意点：
1.只要跟树型图有关的都得写`layui.use(['tree', 'util', 'laypage'], function () {`这个里面，不写这里面无法没有反应的
2.里面Js写法可能不会生效，得用jQuery 例：https://www.cnblogs.com/liaote/p/15958875.html

 

后端：
拼接出前端所需的json格式的数据

public ActionResult JsonGetName(string Name)
        {
            var jsons = _model.Query()
                .Select(x => new
                {
                    id = x.Id,
                    title = x.Name,
                    field="",
                    children = new List<Titles>{
                        new Titles
                        {
                            id=x.Id+1000,
                            title="爱",
                            field ="假的",
                        },
                        new Titles
                        {
                            id=x.Id+1001,
                            title="不爱",
                            field = "假的",
                        },
                        new Titles
                        {
                            id=x.Id+1002,
                            title="爱钱",
                            field ="真的",
                        },
                    }
                });
                
          //返回可能不同，但是Newtonsoft.Json.JsonConvert.SerializeObject转换格式还是要的
            return Content(Newtonsoft.Json.JsonConvert.SerializeObject(jsons));
        }

不知道我写漏了没有，有哪里漏了没看懂，可以提问，看到了会回复。互相帮助，希望我有问题问你们可以回复谢谢！！