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 ...
随机推荐
- C# 创建、部署和调用WebService简单示例
webservice 可以用于分布式应用程序之间的交互,和不同程序之间的交互. 概念性的东西就不说太多,下面开始创建一个简单的webservice的例子.这里我用的是Visual Studio 201 ...
- VisualStudio神级插件——JetBrains Resharper 2018.2.3 Ultimate完美破解版+教程
ReSharper是一个JetBrains公司出品的著名的代码生成工具,是Visual Studio里面的一个插件.它包括一系列丰富的能大大增加C#和Visual Basic .NET开发者生产力的特 ...
- .Net Core WebApi返回的json数据，自定义日期格式
基本上所有的人都在DateTime类型的字段,被序列化成json的时候,遇到过可恨的Date(1294499956278+0800):但是又苦于不能全局格式化设置,比较难受.以往的方式,要么使用全局的 ...
- 第五章 ReentrantLock源码解析1--获得非公平锁与公平锁lock()
最常用的方式: int a = 12; //注意:通常情况下,这个会设置成一个类变量,比如说Segement中的段锁与copyOnWriteArrayList中的全局锁 final Reentrant ...
- C语言作业03-函数
1.本章学习总结 1.1 思维导图 1.2本章学习体会,代码量学习体会 1.2.1学习体会 通过这几周的函数学习,让我明白了函数的重要性,在很多时候运用函数,会使得代码分工明确,逻辑严密,不繁琐.函数 ...
- FreePascal - CodeTyphon交叉编译，在一个操作系统生成各个操作系统可以运行的程序！
致谢:[XE3]MN,让我加快完成了使用CodeTyphon进行交叉编译! CodeTyphon版本: 6.0 下载:http://www.pilotlogic.com/codetyphon/zips ...
- tomcat 项目发布方式
1.WEB应用的组成结构 开发web应用时,不同类型的文件有严格的存放规则,否则不仅会使web应用无法访问 还会导致web服务器自动报错. mail:web应用所在目录(该目录自定义) html,js ...
- .NET Windows Form 改变窗体类名（Class Name）有多难？
研究WinForm的东西,是我的一个个人兴趣和爱好,以前做的项目,多与WinForm相关,然而这几年,项目都与WinForm没什么关系了,都转为ASP.NET MVC与WPF了.关于今天讨论的这个问题 ...
- Redis的Pub/Sub机制存在的问题以及解决方案
Redis的Pub/Sub机制使用非常简单的方式实现了观察者模式,但是在使用过程中我们发现,它仅仅是实现了发布订阅机制,但是很多的场景没有考虑到.例如一下的几种场景: 1.数据可靠性无法保证 一个re ...
- Hive导出表数据
法一: hive (stuchoosecourse) > insert overwrite local directory '/home/landen/文档/exportDir' ...