dwz tree组件取得所选择的值

迷南。 2022-09-17 07:28 148阅读 0赞

DWZ的**树结构**是按<ul>,<li>的嵌套格式构成，最顶级的<ul>以class=”tree”标识。treeFolder, treeCheck, expand|collapse则为可选的。  
treeFolder:在所有树节点前加上Icon图标。  
treeCheck:在所有**[树节点][Link 1]**前加上checkbox，此时需要在<a> 加上三个扩展属性tname="", tvalue="", checked="",其中tname与tvalue对应该checkbox的name与value属性,  
          checked表示checkbox的默认状态是否checked.   
expand与collapse：expand表示树的所有第一级节点默认是展开状态，collapse则表示所有第一级节点默认为折叠状态，当expand与collapse都没有时默认则会展开第一个节点。  
扩展属性oncheck是自定义函数, 用来接收点击checkbox时返回值, 当点击非子树节点checkbox时返回数据格式为:\{checked:true|false,items:\{name:name, value:value\}\},   
当点击了树节点checkbox时, 此子树节点下所有的checkbox都将选中, 同时返回此子树节点下所有的checkbox的值,   
格式为\{checked:true|false, items:\{ \{name:name, value:value\}, \{name:name, value:value\} …… \}\} 。

<script type="text/javascript">  
      
     //遍历被选中CheckBox元素的集合 得到Value值  
     function treeclick()  {  
     var oidStr=""; //定义一个字符串用来装值的集合  
      
    //jquery循环t2下的所有选中的复选框  
      $("#t2 input:checked").each(function(i,a){  
        //alert(a.value);  
        oidStr +=a.value+',';  //拼接字符串  
      });  
      alert(oidStr);  
     }  
    </script>

用的是DWZ富客户端框架。它的树表现形式是通过 <ul id="t1" class="tree treeFolder treeCheck expand" oncheck="">代码来控制的，意思是这是一棵带复选框的树。

<div id="t2"  
          style="display: block; overflow: auto; height: 430px; border: solid 1px #CCC; line-height: 21px; background: #FFF;">  
          <ul id="t1" class="tree treeFolder treeCheck expand" oncheck="">  
           <li>  
            <a tname="name" tvalue="value5">XX管理</a>  
            <ul>  
             <li>  
              <a tname="name" tvalue="1" checked="true">数据采集</a>  
             </li>  
             <li>  
              <a tname="name" tvalue="11">数据审核</a>  
             </li>  
             <li>  
              <a tname="name" tvalue="12">数据定制</a>  
             </li>  
             <li>  
              <a tname="name" tvalue="13">数据下载</a>  
             </li>  
             <li>  
              <a tname="name" tvalue="14">数据管理</a>  
             </li>  
            </ul>  
           </li>  
           <li>  
            <a tname="name" tvalue="2">用户管理</a>  
            <ul>  
             <li>  
              <a tname="name" tvalue="21" checked="true">查看用户</a>  
             </li>  
             <li>  
              <a tname="name" tvalue="22">新增用户</a>  
             </li>  
             <li>  
              <a tname="name" tvalue="23">修改用户</a>  
             </li>  
             <li>  
              <a tname="name" tvalue="24">删除用户</a>  
             </li>  
            </ul>  
           </li>  
           <li>  
            <a tname="name" tvalue="3">系统管理</a>  
            <ul>  
             <li>  
              <a tname="name" tvalue="31" checked="true">登录后台</a>  
             </li>  
             <li>  
              <a tname="name" tvalue="32">查看日志</a>  
             </li>  
             <li>  
              <a tname="name" tvalue="33">信息设置</a>  
             </li>  
             <li>  
              <a tname="name" tvalue="34">删除日志</a>  
             </li>  
            </ul>  
           </li>  
          </ul>  
         </div>

文章来自： [http://blog.csdn.net/pcyph/article/details/9040489][http_blog.csdn.net_pcyph_article_details_9040489]

[Link 1]: http://blog.csdn.net/shanzhizi
[http_blog.csdn.net_pcyph_article_details_9040489]: http://blog.csdn.net/pcyph/article/details/9040489

发表评论取消回复

表情：

评论列表（有 0 条评论，148人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE-Element组件（四）tree

一、点击tree，获取点击的item： <template> <div class="container"> <el-card>

深藏阁楼爱情的钟/ 2023年05月21日 07:23/ 0 赞/ 43 阅读

相关 vue 组件传值

父传子一、父传子 1.分发事件props和$emit(方法1) 2.$ listeners和$ attrs(方法2

妖狐艹你老母/ 2022年12月15日 03:39/ 0 赞/ 265 阅读

相关 React 组件封装之 Tree 树形控件

React 组件封装之 Tree 树形控件一、Tree 树形结构二、使用案例三、API 使用指南四、源代码五、总结一、Tre

女爷i/ 2022年11月20日 08:01/ 0 赞/ 1212 阅读

相关 dwz tree组件取得所选择的值

DWZ的树结构是按<ul>,<li>的嵌套格式构成，最顶级的<ul>以class=”tree”标识。treeFolder, treeCheck, expand|co

迷南。/ 2022年09月17日 07:28/ 0 赞/ 149 阅读

相关 react组件传值

react组件传值 1.父子组件传值 1.1父传子父组件 import Asign from './view/asign' import

小咪咪/ 2022年09月05日 01:47/ 0 赞/ 204 阅读

相关 jquery取得radio选中的值

附三种方法都可以： $('input:radio:checked').val()； $("input\[type='radio'\]:checked").val

妖狐艹你老母/ 2022年06月16日 10:08/ 0 赞/ 271 阅读

相关 jQuery取得select选择的文本与值

jQuery取得select选择的文本与值 jQuery取得select选中的值获取select 选中的 text : $(“\ddlregtype”).find(

叁歲伎倆/ 2022年06月01日 01:37/ 0 赞/ 207 阅读

相关 antd vue tree组件经验记录

目录 1. 默认全部展开 2.替换node名称 3.获取选中node的所有参数和key参数 4.node参数进行数据转换避坑 5.针对tree进行增删改查操作 6.

曾经终败给现在/ 2021年09月24日 12:26/ 0 赞/ 441 阅读

相关 vue组件传值

vue组件传值-------总结 1·父组件传值子组件父组件通过 :paramsName1="params1" :paramsName2="params2"的方式将值

绝地灬酷狼/ 2021年09月17日 04:50/ 0 赞/ 508 阅读

相关对dwz的combox组件扩展属性

前言：今天使用到dwz的combox组件，根据官方API上写的“value属性则用来指定combox的默认值”，但是经过实践发现，该属性并没有起到作用，结合到dwz的检索功能，

痛定思痛。/ 2021年06月24日 16:09/ 0 赞/ 338 阅读