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 ...
随机推荐
- Openlayers地图量算功能
http://openlayers.org/en/latest/examples/measure.html?q=measure 按官网的例子来就行,新建对象时注意加上命名空间 var vect ...
- Winform 搭建http服务器
using System; using System.Collections; using System.IO; using System.Net; using System.Net.Sockets; ...
- C#多线程编程系列（五）- 使用任务并行库
目录 1.1 简介 1.2 创建任务 1.3 使用任务执行基本的操作 1.4 组合任务 1.5 将APM模式转换为任务 1.6 将EAP模式转换为任务 1.7 实现取消选项 1.8 处理任务中的异常 ...
- CSS2.1SPEC：视觉格式化模型之width属性详解(下)
本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...
- AJPFX告诉你MT4平台有什么优势？
FX TERMINAL(Meta Trader4)交易平台功能 成功驾驭金融市场的第一步是拥有正确的工具.AJPFX为客户提供二十四小时的在线交易服务,MT4交易软件是目前全世界上最为先进,应用最为广 ...
- 用layui遇到过的问题
1.报错“layui.form is not a function”问题 把代码中这一串修改一下:form = layui.form(); 括号去掉就行: form = layui.form; 如果你 ...
- SFML从入门到放弃(3) 视角和碰撞检测
SFML从入门到放弃(3) 视角和碰撞检测 视角 window.draw();所画出的对象是在世界坐标的绝对位置. 视角可以选定在窗口中显示世界坐标下的的哪一个区域. sf::View init_vi ...
- js代码上的优化
例1 if ( config.url === '/web/teacher/classes' || config.url === '/web/teacher/students || config.u ...
- Django(wsgiref、jinja2模块使用介绍)
day60 wsgiref比较稳定 """ 根据URL中不同的路径返回不同的内容--函数进阶版 返回HTML页面 让网页动态起来 wsgiref模块版 "&qu ...
- docker镜像基本操作一
获取镜像 首先说明一下如何从Docker hub中获取高质量的镜像,从Docker镜像库获取镜像的命令是docker pull .其命令格式为: docker pull [选项] [Docker Re ...