zTree中 checkbox 点击向文本框中赋值
例子如下：第一个 文本框：
<div class="content_wrap" style="height: 0;position: relative; ">
<div class="zTreeDemoBackground left" style="height: 0; ">
<ul class="list">
<li class="title">
<input id="maintprogram" type="text" value="" class="m-wrap width435" onclick="showMenu();" /> <!-- 需要点击 的input框 -->
</ul>
</div>
<div class="right" style="display: none;"> <！-- 全选选中check -->
<ul class="info">
<li class="title">
<ul class="list">
<p >
<input type="checkbox" id="py" class="checkbox first" checked />
<input type="checkbox" id="sy" class="checkbox first" checked />
<input type="checkbox" id="pn" class="checkbox first" checked />
<input type="checkbox" id="sn" class="checkbox first" checked />
<ul id="codecar" class="log" ></ul>
</p>
</ul>
</li>
</ul>
</div> <!-- 显示树 div-->
<div id="menuContent" class="menuContent" style="display:none; top: 24px!important;left: 0px!important; position: absolute; width:435px">
<ul id="treeDemo" class="ztreeOrga" style="margin-top:0; width:100%; height: auto;background: #fafafa; position: absolute;z-index: 999;"></ul>
</div>
</div>
<SCRIPT type="text/javascript">
var setting = {
check: {
enable: true,
chkStyle: "checkbox"
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick,
onCheck: onCheck,
}
};
var zNodes = [
{id: 1,pId: 0,name: "一级保养",open: false,check: true},
{id: 11,pId: 1,name: "机油"},
{id: 12,pId: 1,name: "机油滤清器"},
{id: 13,pId: 1,name: "燃油滤清器"},
{id: 14,pId: 1,name: "空气滤清器"},
{id: 15,pId: 1,name: "冷却液"},
{id: 16,pId: 1,name: "制动器"},
{id: 17,pId: 1,name: "离合器"},
{id: 18,pId: 1,name: "转向助力"},
{id: 19,pId: 1,name: "电瓶"},
{id: 100,pId: 1,name: "皮带"},
{id: 101,pId: 1,name: "车灯"},
{id: 102,pId: 1,name: "轮胎"},
{id: 103,pId: 1,name: "尾气"},
{id: 2,pId: 0,name: "二级保养",open: false,check: true},
{id: 21,pId: 2,name: "机油"},
{id: 22,pId: 2,name: "机油滤清器"},
{id: 23,pId: 2,name: "燃油滤清器"},
{id: 24,pId: 2,name: "空气滤清器"},
{id: 25,pId: 2,name: "冷却液"},
{id: 26,pId: 2,name: "制动器"},
{id: 27,pId: 2,name: "离合器"},
{id: 28,pId: 2,name: "转向助力"},
{id: 29,pId: 2,name: "电瓶"},
{id: 200,pId: 2,name: "皮带"},
{id: 201,pId: 2,name: "车灯"},
{id: 202,pId: 2,name: "轮胎"},
{id: 203,pId: 2,name: "尾气"},
{id: 204,pId: 2,name: "悬挂"},
{id: 205,pId: 2,name: "润滑油"},
{id: 206,pId: 2,name: "发电机"}
];
var codecar;
function beforeClick(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function onCheck(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getCheckedNodes(true),
v = "";
for (var i = 0, l = nodes.length; i < l; i++) {
// v += nodes[0].name + "：";
v += nodes[i].name + ",";
}
if (v.length > 0) v = v.substring(0, v.length - 1);
var cityObj = $("#maintprogram");
cityObj.attr("value", v);
}
function showMenu() {
var cityObj = $("#maintprogram");
var cityOffset = $("#maintprogram").offset();
$("#menuContent").css({
left: "0px",
top: "24px"
}).slideDown("fast");
$("body").bind("mousedown", onBodyDown);
}
function hideMenu() {
$("#menuContent").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "maintprogram" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
hideMenu();
}
}
function setCheck() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
py = $("#py").attr("checked")? "p":"",
sy = $("#sy").attr("checked")? "s":"",
pn = $("#pn").attr("checked")? "p":"",
sn = $("#sn").attr("checked")? "s":"",
type = { "Y":py + sy, "N":pn + sn};
// zTree.setting.check.chkboxType = type;
showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
}
function showCode(str) {
if (!codecar) codecar = $("#codecar");
codecar.empty();
codecar.append("<li>" + str + "</li>");
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
setCheck();
$("#py").bind("change", setCheck);
$("#sy").bind("change", setCheck);
$("#pn").bind("change", setCheck);
$("#sn").bind("change", setCheck);
});
</SCRIPT>
第二个文本框：
<div class="content_wrap" style="height: 0;position: relative; ">
<div class="zTreeDemoBackground left" style="height: 0; ">
<ul class="list">
<li class="title">
<input id="maintprogramup" type="text" value="" class="m-wrap width435" onclick="showMenu1();"/>
</ul>
</div>
<div class="right" style="display: none;">
<ul class="info">
<li class="title">
<ul class="list">
<p>
<input type="checkbox" id="py1" class="checkbox first" checked />
<input type="checkbox" id="sy1" class="checkbox first" checked />
<input type="checkbox" id="pn1" class="checkbox first" checked />
<input type="checkbox" id="sn1" class="checkbox first" checked />
<ul id="codecar1" class="log" ></ul>
</p>
</ul>
</li>
</ul>
</div>
<div id="menuContent1" class="menuContent" style="display:none; top: 24px!important;left: 0px!important; position: absolute; width:435px">
<ul id="treeDemo1" class="ztreeOrga" style="margin-top:0; width:100%; height: auto;background: #fafafa; position: absolute;z-index: 999;"></ul>
</div>
</div>
<SCRIPT type="text/javascript">
var setting1 = {
check: {
enable: true,
chkStyle: "checkbox"
},
view: {
dblClickExpand: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick1,
onCheck: onCheck1
}
};
var zNodes1 = [
{id: 1,pId: 0,name: "一级保养",open: false,check: true},
{id: 11,pId: 1,name: "机油"},
{id: 12,pId: 1,name: "机油滤清器"},
{id: 13,pId: 1,name: "燃油滤清器"},
{id: 14,pId: 1,name: "空气滤清器"},
{id: 15,pId: 1,name: "冷却液"},
{id: 16,pId: 1,name: "制动器"},
{id: 17,pId: 1,name: "离合器"},
{id: 18,pId: 1,name: "转向助力"},
{id: 19,pId: 1,name: "电瓶"},
{id: 100,pId: 1,name: "皮带"},
{id: 101,pId: 1,name: "车灯"},
{id: 102,pId: 1,name: "轮胎"},
{id: 103,pId: 1,name: "尾气"}, {id: 2,pId: 0,name: "二级保养",open: false,check: true},
{id: 21,pId: 2,name: "机油"},
{id: 22,pId: 2,name: "机油滤清器"},
{id: 23,pId: 2,name: "燃油滤清器"},
{id: 24,pId: 2,name: "空气滤清器"},
{id: 25,pId: 2,name: "冷却液"},
{id: 26,pId: 2,name: "制动器"},
{id: 27,pId: 2,name: "离合器"},
{id: 28,pId: 2,name: "转向助力"},
{id: 29,pId: 2,name: "电瓶"},
{id: 200,pId: 2,name: "皮带"},
{id: 201,pId: 2,name: "车灯"},
{id: 202,pId: 2,name: "轮胎"},
{id: 203,pId: 2,name: "尾气"},
{id: 204,pId: 2,name: "悬挂"},
{id: 205,pId: 2,name: "润滑油"},
{id: 206,pId: 2,name: "发电机"} ];
var codecar1;
function beforeClick1(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo1");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
} function onClick1(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo1");
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
} function onCheck1(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo1"),
nodes = zTree.getCheckedNodes(true),
v = "";
for (var i = 0, l = nodes.length; i < l; i++) {
// v += nodes[0].name + "：";
v += nodes[i].name + ",";
}
if (v.length > 0) v = v.substring(0, v.length - 1);
var cityObj = $("#maintprogramup");
cityObj.attr("value", v);
} function showMenu1() {
var cityObj = $("#maintprogramup");
var cityOffset = $("#maintprogramup").offset();
$("#menuContent1").css({
left: "0px",
top: "24px"
}).slideDown("fast");
$("body").bind("mousedown", onBodyDown1);
} function hideMenu1() {
$("#menuContent1").fadeOut("fast");
$("body").unbind("mousedown", onBodyDown1);
} function onBodyDown1(event) {
if (!(event.target.id == "menuBtn" || event.target.id == "maintprogramup" || event.target.id == "menuContent1" || $(event.target).parents("#menuContent1").length > 0)) {
hideMenu1();
}
}
function setCheck1() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo1"),
py = $("#py1").attr("checked")? "p":"",
sy = $("#sy1").attr("checked")? "s":"",
pn = $("#pn1").attr("checked")? "p":"",
sn = $("#sn1").attr("checked")? "s":"",
type = { "Y":py + sy, "N":pn + sn};
// zTree.setting1.check.chkboxType = type;
showCode1('setting1.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
}
function showCode1(str) {
if (!codecar) codecar = $("#codecar1");
codecar.empty();
codecar.append("<li>" + str + "</li>");
} $(document).ready(function(){
$.fn.zTree.init($("#treeDemo1"), setting1, zNodes1);
setCheck1();
$("#py1").bind("change", setCheck1);
$("#sy1").bind("change", setCheck1);
$("#pn1").bind("change", setCheck1);
$("#sn1").bind("change", setCheck1);
});
</SCRIPT>
zTree中 checkbox 点击向文本框中赋值的更多相关文章
- Js控制显示、隐藏文本框中的密码
Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...
- jsp利用cookie记住用户名,下次登录时显示在文本框中（仅仅一个Cookie就整了将近三个小时，⊙﹏⊙b汗）
<%@page import="java.net.URLDecoder"%> <%@page import="sun.security.util.Len ...
- Ajax - 异步处理（点击变成文本框并修改）
效果: 对应的文档结构: Test.aspx 前台代码: 引入JQuery(jquery-1.8.3.min.js). 引入自己所写的JS代码(UserJS.js). <html xmlns=& ...
- 在word2010中添加带滚动条的文本框
由于文件内容过长,为了加强文章的可读性,可以添加一个带滚动条的文本框,既能使文章看起来干净整洁,同时也极大的提高了文章的可读性. 我这里对在word2010中文本框带滚动条作个介绍: 1. 打开wor ...
- Java 获取、删除Word文本框中的表格
本文介绍如何来获取Word文本框中包含的表格,以及删除表格. 程序测试环境包括: IDEA JDK 1.8.0 Spire.Doc.jar 注:jar导入,可通过创建Maven程序项目,并在pom.x ...
- jQuery文本框中的事件应用
jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- DEV中dx:ASPxPopupControl 控件的使用（在窗口关闭或隐藏时，清楚文本框中的内容）
//在窗口关闭或隐藏时,清楚文本框中的内容(核心代码) function(s, e) { ASPxClientEdit.ClearGroup('entryGroup'); } <asp:Cont ...
- 微信内置浏览器中，点击下拉框出现页面乱跳转现象（iphone）
微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone) 前言: 这是小菜博客的第三篇文章.一直认为自己可以表达的东西太过简单,难以上台面,总是吝啬地不肯写.就算是写,也不知道从何开始.在同事的 ...
- ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失
代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLe ...
随机推荐
- flume在windows环境下的使用
Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统,Flume支持在日志系统中定制各类数据发送方,用于收集数据:同时,Flume提供对数据进行简单处理, ...
- 安装 rabbitmq ，通过生成器获取redis列表数据 与 Celery 分布式异步队列
一.安装rabbitmq @全体成员 超简易安装rabbitmq文档 1.安装配置epel源rpm -ivh http://dl.fedoraproject.org/pub/epel/6/i386/ ...
- Ubuntu16.04 - 安装gtk+-3.0和appindicator3-0.1
今天在Ubuntu16.04里面遇到这样的问题: # pkg-config --cflags gtk+-3.0 appindicator3-0.1Package gtk+-3.0 was not fo ...
- django url 路由设置技巧
Django的url使用方法 利用Django开发站点.能够设计出很优美的url规则,假设url的匹配规则(包括正則表達式)组织得比較好,view的结构就会比較清晰.比較easy维护. 最简单的形式 ...
- html5 页面基本骨架
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Android之自定义控件
开发自定义控件的步骤: 1.了解View的工作原理 2. 编写继承自View的子类 3. 为自定义View类增加属性 4. 绘制控件 5. 响应用户消息 6 .自定义回调函数 一.Vie ...
- Struts2中使用OGNL表达式语言访问静态方法和静态属性
1.一定要在struts.xml配置文件中配置允许使用OGNL访问静态方法,否则不能使用OGNL访问静态方法 2.<s:property value="@com.gk.StaticTe ...
- .Net Core命令行配置-配置介绍
1.使用VS2017 创建一个控制台应用程序,选中控制台应用(.NET Core) 2. 使用程序包管理控制台键入 Install-Package Microsoft.AspNetCore -Vers ...
- Python sys os getpass 包的导入
块的导入 导入一个py文件,解释器解释该py文件 导入一个包,解释器解释该包下的 init.py 文件 import module 直接导入模块 from module.xx.xx import xx ...
- Odoo9.0模块开发全流程
构建Odoo模块 模块组成 业务对象 业务对象声明为Python类, 由Odoo自己主动加载. 数据文件 XML或CSV文件格式, 在当中声明了元数据(视图或工作流).配置数据(模块參数).演示数据等 ...