ztree树复选框的使用说明1

---恢复内容开始---

项目需要添加和修改的弹窗里面有树形结构一级为部门 二级为人员 ;

添加弹窗里面点击input框出现下面树形结构,

修改弹窗里面,一进弹窗input默认有内容时,点击input框下面树形结构想对应的复选框也要勾上,

我在做的过程中遇到个问题,就是修改的时候是正确的因为我打开修改弹窗的时候把选中的树id 保存了 ,

但是添加的时候会出现一个问题就是我点击input时树形显示,我选中复选框后input上也有相对应的人名,

但是我发现我少点了一个需要再点击input出现树形去选择的时候,居然清空了input和树前面勾选过的人名。

这个因为勾选的时候会自动触发onCheck事件,后来经过修改实现了最终效果,

但我个人认为不是很好,不知道大家有没有好的思路,希望做过的给个主意,谢谢。。。

下面是自己实现的内容

布局很简单

  <input type="text" style="overflow: hidden;text-overflow: ellipsis; white-space: nowrap;" class="form-control" readonly="readonly" maxlength="50" name="AddNewDetailObject" property="hides" notnull="true" notnulleinfo=‘带"*"的信息为必填项‘ id="person_shu">
  <div id="treediv" class="treediv" style="display: none;position:absolute;overflow:auto;background: #fff;z-index: 999;left: 0;width:100%;height:200px; padding: 5px;border: 1px solid #eee;" >
    <ul id="treeDemo" class="ztree"></ul>
  </div>

css可以换一下图片  ,使用的图片放到ztree目录里面的img下面

js代码过程

下面是点击input的时候让树出现和隐藏  并且如果input有值  让树默认选中复选框

下面是实现初始化树结构

下面是调用后台数据 并且树的图片可以进行修改

下面这是点击修改弹窗的时候 通过后台获得数据让input显示内容

---恢复内容结束---

原文地址:https://www.cnblogs.com/wdd-cindy/p/9456581.html

时间: 2024-08-27 22:32:47

ztree树复选框的使用说明1的相关文章

异步ztree 加复选框 及相应后台处理

异步加载 tree,点一下节点,就发一下请求到后台,然后显示出得到的当前层级节点 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <script type="text/javascript" src="js/jquery-1.8.0

【ztree】完美实现复选框功能

在权限系统中,大多数的页面都用到了树形结构,其中最常用的便是树资源的加载和单击事件,除此之外ztree还可以实现很多功能.今天以实现复选框的添加功能为例,咱们再来深入的学习下ztree的应用. 一.实例描述 在用户管理模块中,需要给用户添加角色,而用户与角色的之间是一个多对多的关系.这里我们可以先加载两个角色树资源,通过两个树之间数据的交换,从而得到用户所拥有的角色资源,实现效果如下: 1.用户信息入口 2.加载角色信息 Datagrid表格中的"分配"按钮是针对单个用户的角色分配,而

(简)树形ztree 与angularjs结合,实现下级数据,点击复选框 填写到输入框里

html: <link href="vendors/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> 生态系统类型* : <asp:TextBox ID="TextBox3" CssClass="form-control" runat="server" MaxLength="200" autocomplete="of

easyui_tree 复选框 动态加载树

controller动态获取单位用户树 #region 下拉树菜单 /// <summary> /// 获取工作人员树菜单 /// </summary> /// <param name="addid"></param> /// <param name="unitid"></param> /// <returns></returns> public string GetUs

关于textjs的tree带复选框的树

通过查阅一些资料和自己之前了解到的一些相关知识,有时项目中需要用到.话不多说,先看一下效果图: 我写的这人员选择的树,主要是改写了TreePanel,如下代码: ExtendTreePanel.js (该文件中可以写一些触发事件) Ext.namespace('Ext.ysq');//Ext.namespace方法定义一个管理类的包,类似Java中定义的包名,目的是建立自己的一个对象名,方便管理,防止重复 Ext.ysq.ExtendTreePanel = Ext.extend(Ext.tree

WPF:带复选框CheckBox的树TreeView

最近要用WPF写一个树,同事给了我一个Demo(不知道是从哪里找来的),我基本上就是参照了这个Demo. 先放一下效果图(3棵树): 这个树索要满足的条件是: 父节点.Checked=true时,子节点全部选中(反之成立): 父节点.Checked=false时,子节点全部不选中(反之成立): 子节点存在部分节点选中,部分节点未选中时,父节点为非全选状态(null)(反之成立): 那么这个树究竟要怎么造出来呢? 由于用WPF,且用MVVM模式,故TreeView的ItemSource及复选框的选

swing jtree 添加了复选框的树,利用了递归获取选中的果实

原文:swing jtree 添加了复选框的树,利用了递归获取选中的果实 源代码下载地址:http://www.zuidaima.com/share/1553270755478528.htm 矿泉水2013-11-05 16:11:37 swing jtree 添加了复选框的树,利用了递归获取选中的果实

关于JFace带复选框的树

树的复选框用CheckboxTreeViewer实现.由于其子类ContainerCheckedTreeViewer在没有选择全部子节点时可以自动将父节点设置成灰选,所以实现树的复选框更多的是用ContainerCheckedTreeViewer. TreeView4.java 1 public class TreeViewer4 { 2 public static void main(String[] args) { 3 new TreeViewer4().open(); 4 } 5 6 pu

ztree点击节点实现选中/取消复选框

效果 代码 在js中初始化tree时 设置复选框操作只影响子节点 复选框事件,想怎么处理就怎么处理 原文地址:https://www.cnblogs.com/xiaostudy/p/10886412.html