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#存储过程调用的三个方法
//带参数的SQL语句 private void sql_param() { SqlConnection conn = new SqlConnection("server=WIN-OUD59 ...
- 构建NetCore应用框架之实战篇（一）：什么是框架，如何设计一个框架
一.系列简述 本篇起,将通过一系列文章,去描述如何构建一个应用开发框架,并以作者开发的框架为例,逐个点展开分析,如何从零开始,构建自己的开发框架. 本系列文章的目的,是带领有一编程经验的人,通过动手, ...
- C#中的NameValueCollection简介
NameValueCollection继承自NameObjectCollectionBase,并且和一般的键值对不同的是,它支持集合中出现相同的Key. 引用:using System.Collect ...
- EF 多对多循环引用序列化失败 解决办法
错误:Self referencing loop detected with type 'System.Data.Entity.DynamicProxies.tbldph_901D48A194FB31 ...
- Java基础学习篇---------this、object的学习
一.this的学习方法 1.使用this调用构造方法市一定放在构造方法的首行 2.使用this调用构造方法时一定流出调用的出口 public class MyClass { public MyClas ...
- 931. Minimum Falling Path Sum
Given a square array of integers A, we want the minimum sum of a falling path through A. A falling p ...
- BZOJ 5395--[Ynoi2016]谁的梦（STL&容斥）
5395: [Ynoi2016]谁的梦 Time Limit: 80 Sec Memory Limit: 128 MBSubmit: 22 Solved: 7[Submit][Status][Di ...
- 本机的虚拟机执行ifconfig,显示不出ip的解决方法
源于:https://blog.csdn.net/fuweihua123/article/details/78423715?locationNum=4&fps=1 本机的虚拟机执行ifconf ...
- (4)Oracle基础--操作表中数据
· 添加数据 <1> INSERT 语句 ① 向表中所有字段添加值 语法: INSERT INTO table_name (column1,column2...) VALUES(val ...
- 扩展中国剩余定理（扩展CRT）详解
今天在$xsy$上翻题翻到了一道扩展CRT的题,就顺便重温了下(扩展CRT模板也在里面) 中国剩余定理是用于求一个最小的$x$,满足$x\equiv c_i \pmod{m_i}$. 正常的$CRT$ ...