使用zTree实现树形下拉框

来源：互联网发布：php 字符串截取函数编辑：程序博客网时间：2024/05/30 05:11

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">这两天项目中需要用到选择属性下拉框，树状结构我用了zTree，下拉框本想用插件的，但是没找到好的插件就只能自己搞出来了，正好网上也有一些zTree下拉框的例子，就做出来了</span>

效果如下：

HTML:

<form id="theform" onsubmit="return false;"><ul class="forminfo"><li><label>商品名称<b>*</b></label> <input name="goodsName"id="goodsName" type="text" class="dfinput" style="width: 400px;" /><span id="goodsNameTip"></span></li><li><label>商品货号<b>*</b></label> <input name="goodsSn"id="goodsSn" type="text" class="dfinput" style="width: 400px;" /> <spanid="goodsSnTip"></span></li><li><label>商品分类<b>*</b></label> <input name="catName" id="catName"type="text" class="dfinput" style="width: 400px;" value=""onfocus="showMenu()" onclick="showMenu()" /><span id="catIdTip"></span><input type="hidden" name="catId" id="catId"/></li><li><label>价格<b>*</b></label> <input name="shopPrice"id="shopPrice" type="text" class="dfinput" style="width: 400px;" /><span id="shopPriceTip"></span></li><li><label>单价<b>*</b></label> <input name="buyPrice"id="buyPrice" type="text" class="dfinput" style="width: 400px;" /><span id="buyPriceTip"></span></li><li><label>产地</label> <input name="chandi" id="chandi"type="text" class="dfinput" style="width: 400px;" /> <spanid="chandiTip"></span></li><li><label>规格</label> <input name="guige" id="guige" type="text"class="dfinput" style="width: 400px;" /> <span id="guigeTip"></span></li><li><input type="submit" class="btn" value="保存" /> <inputtype="button" onclick="parent.layer.closeAll();" class="btn"value="关闭" /></li></ul></form><div id="menuContent" class="menuContent"style="display: none; position: absolute;"><ul id="cateTree" class="ztree selectZtree" style="margin-top: 0; width: 160px;"></ul></div>

js代码：

function zTreeBeforeClick(treeId, treeNode, clickFlag) {var check = (treeNode && !treeNode.isParent);if (!check){//alert("只能选择子节点...");var catObj = $("#catName");catObj.attr("value", "");}return check;}function zTreeOnClick(event, treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj("cateTree"), nodes = zTree.getSelectedNodes(), v = "", ids = "";nodes.sort(function compare(a, b) {return a.id - b.id;});//for (var i = 0, l = nodes.length; i < l; i++) {//v += nodes[i].catName + ",";//ids += nodes[i].catId +",";//}v =  nodes[0].catName;ids = nodes[0].catId;//if (v.length > 0)//v = v.substring(0, v.length - 1);var catObj = $("#catName"),catId = $("#catId");catObj.attr("value", v);catId.attr("value", ids);}function showMenu() {var cityObj = $("#catName");var cityOffset = $("#catName").offset();$("#menuContent").css({left : cityOffset.left + "px",top : cityOffset.top + cityObj.outerHeight() + "px"}).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 == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {hideMenu();}}var setting = {view: {selectedMulti: false},data : {key : {name : "catName"},simpleData : {enable : true,idKey : "catId",pIdKey : "parentId",rootPId : 0}},callback: {//beforeClick: zTreeBeforeClick,                onClick: zTreeOnClick            }};$(function() {$.getJSON('${cssRoot}/category/queryTree.do', {}, function(res) {$.fn.zTree.init($("#cateTree"), setting, res.list);});});

这次熟悉了zTree的一些api，包括callback、不需要多选的时候selectedMulti: false等等

0 1