zTree插件之多选下拉菜单代码
zTree插件之多选下拉菜单代码
css和js
<!--ztree树结构-->
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeIcons.css"> <script src="assets/js/jquery.js"></script> <!--ztree树-->
<script src="assets/ztree/js/jquery.ztree-2.6.js"></script>
html
<div class="input-append">
<input class="input-medium" id="citySel" readonly type="text" value="">
<a id="menuBtn" class="btn" type="button"><i class="icon-search"></i></a>
</div> <div id="DropdownMenuBackground" style="display:none; position:absolute;z-index:999;height:250px; min-width:163px; background-color:white;border:1px solid;">
<div style="height:220px; min-width:163px; background-color:white;border:1px solid;border-bottom:0px;overflow-y:auto;overflow-x:auto;">
<ul id="dropdownMenu" class="tree"></ul>
</div>
<div style="height:26px;border:1px #D4D4D4 solid;box-shadow:0 -1px 10px rgba(0,0,0,0.1);background-color:#FAFAFA;background-image:-webkit-linear-gradient(top,#FFF,#F2F2F2);background-repeat: repeat-x;">
<div align="center"><a href="javascript:void(0)" onclick="enter();hideMenu();" id="enter" class="btn btn-mini btn-inverse" style="margin-top:3px;">确定</a></div>
</div>
</div>
自定义的js代码
<script type="text/javascript">
var zTree1;
var setting = {
checkable:true,
checkType : { "Y": "s", "N": "s" },
isSimpleData: true,
treeNodeKey: "id",
treeNodeParentKey: "pId",
fontCss: setFont,
callback: {
beforeClick: zTreeOnBeforeClick,
}
};
var zNodes = [
{id:, pId:, name:"北京"},
{id:, pId:, name:"天津"},
{id:, pId:, name:"上海"},
{id:, pId:, name:"重庆"},
{id:, pId:, name:"河北省", open:false},
{id:, pId:, name:"石家庄"},
{id:, pId:, name:"保定"},
{id:, pId:, name:"邯郸"},
{id:, pId:, name:"承德"},
{id:, pId:, name:"广东省", open:false},
{id:, pId:, name:"广州"},
{id:, pId:, name:"深圳"},
{id:, pId:, name:"东莞"},
{id:, pId:, name:"佛山"},
{id:, pId:, name:"福建省", open:false},
{id:, pId:, name:"福州"},
{id:, pId:, name:"厦门"},
{id:, pId:, name:"泉州"},
{id:, pId:, name:"三明"}
]; function setFont(treeId, treeNode) {
if (treeNode && treeNode.isParent) {
return {color: "blue"};
} else {
return null;
}
}
function showMenu(){
var cityObj = $("#citySel");
var cityOffset = $("#citySel").offset();
$("#DropdownMenuBackground").css({left:cityOffset.left+"px",top:cityOffset.top+cityObj.outerHeight()+"px"}).slideDown("fast");
}
function reloadTree(){
hideMenu();
zTree1 = $("#dropdownMenu").zTree(setting, zNodes);
}
function hideMenu() {
$("#DropdownMenuBackground").slideUp("fast");
}
function zTreeOnBeforeClick(treeId, treeNode) {
return false;
}
function enter(){
var str = "";
var nodes = zTree1.getCheckedNodes();
var i = ;
do{
str = str+nodes[i].name+",";
if(nodes[i].isParent&&nodes[i].checked){
i = i+nodes[i].nodes.length;
}
else{
i++;
}
}while(i<nodes.length)
str = str.slice(,-);
$("#citySel").val(str);
} $(document).ready(function(e) {
reloadTree();
$("#menuBtn").bind("click",
function(){
if($("#DropdownMenuBackground").css("display") == "none"){
showMenu();
}
else{
hideMenu();
}
}
);
$("body").bind("mousedown",
function(event){
if (!(event.target.id == "DropdownMenuBackground" || $(event.target).parents("#DropdownMenuBackground").length>)) {
hideMenu();
}
});
});
</script>
转载请注明:http://www.tea119.com
zTree插件之多选下拉菜单代码的更多相关文章
- jQuery插件:模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- js 导航栏多项点击显示下拉菜单代码
<!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...
- zTree插件之单选下拉菜单代码
<!--ztree树结构--> <link rel="stylesheet" type="text/css" href="asset ...
- bootstrap multiselect的使用 多选下拉菜单
官网网址: http://davidstutz.de/bootstrap-multiselect/
- Excel制作多选下拉框代码以及图示
1.首先 点击Sheet1(需要显示多选框的页) ,然后右键查看代码,进入编辑界面 2.写入如下代码 Private Sub Worksheet_SelectionChange(ByVal Targ ...
- 小米网css3导航下拉菜单代码
效果:http://hovertree.com/texiao/css3/19/ 代码如下: <!doctype html> <!-- W3C规范 --> <html la ...
- DOM(十)使用DOM设置单选按钮、复选框、下拉菜单
1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...
- 【Bootstrap】 bootstrap-select2下拉菜单插件
这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...
随机推荐
- IntelliSense: namespace "osgDB" 没有成员 "BEGIN_BRACKET"
IntelliSense: namespace "osgDB" 没有成员 "BEGIN_BRACKET" 转自:http://bbs.osgchina.org/ ...
- linux文本操作界面 vi面板如何复制一行
linux文本操作界面 vi面板如何复制一行 1)把光标移动到要复制的行上2)按yy3)把光标移动到要复制的位置4)按p 在vi里如何复制一行中间的几个字符?如果你要从光标处开始复制 4 个字符,则先 ...
- gcc 编译器参数
一.GCC编译过程 参考:http://hi.baidu.com/zengzhaonong/item/c00e079f500adccab625314f------------------------- ...
- Log打印日志遇到的问题
Log日志打印出现空指针问题 AndroidRuntime(372): Caused by: java.lang.NullPointerException: println needs a messa ...
- jsp...九九乘法表,三角形,菱形
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Oracle10g RAC的简单操作
1.查看OCR位置用户指定的位置会被放置在 /etc/oracle/ocr.loc(Liunx系统) 或 /var/opt/oracle/ocr.loc [oracle@rac4 opt]$ cat ...
- vue 一些开发姿势
.vue : <template></template><script></script> .js :import Vue from 'vue'
- HDU 5919 Sequence II(主席树+逆序思想)
Sequence II Time Limit: 9000/4500 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) To ...
- c#根据后台数据,自动生成checkbox
前端在aspx中,添加生成checkbox的容器div: <div id="container" runat="server"></div&g ...
- ajax for in eval()知识点的应用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...