layui 树型图tree 选择后实时动态赋值给文本框

2 篇文章 0 订阅

前端:

<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 例:jQuery写法

后端:
拼接出前端所需的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));
        }

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值