Easyui和zTree如何实现树形下拉框
这篇文章给大家分享的是有关Easyui和zTree如何实现树形下拉框的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联公司凭借专业的设计团队扎实的技术支持、优质高效的服务意识和丰厚的资源优势,提供专业的网站策划、成都网站设计、成都做网站、网站优化、软件开发、网站改版等服务,在成都10多年的网站建设设计经验,为成都超过千家中小型企业策划设计了网站。
方式一,使用zTree
前端代码:
js代码:
/* * 点击事件下拉树的设置 */ var actionTypeSetting = { view: { dblClickExpand: true, showIcon: false, fontCss : {"font-weight":"400","font-size":"20px"} }, data: { key: { name: "text", children: "children" }, simpleData: { enable: true } }, callback: { onClick: actionTypeOnClick } }; /* * 点击事件下拉树的点击事件 */ function actionTypeOnClick(e, treeId, treeNode) { $("#actionTypeId").val(treeNode.id); $("#selectActionType").val(treeNode.text); } /* * 初始化点击事件类型 * */ function initActionType() { $.ajax({ async: false, cache: false, type: 'POST', dataType: "json", url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2', error: function () {//请求失败处理函数 alert('请求失败'); }, success: function (data) { //请求成功后处理函数 $.fn.zTree.init($("#actionTypeTree"), actionTypeSetting, data); } }); } /* * 展示点击事件SelectTree */ function showActionTypeTree() { $.ajax({ url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2', type: 'POST', dataType: "json", async: false, success: function (data) { $.fn.zTree.init($("#actionTypeTree"), actionTypeSetting, data); var deptObj = $("#selectActionType"); var deptOffset = $("#selectActionType").offset(); $("#actionTreeContent").css({ left: deptOffset.left - 26 + "px", top: deptOffset.top + "px" }).slideDown("fast"); $('#actionTypeTree').css({width: deptObj.outerWidth() + "px"}); var zTree = $.fn.zTree.getZTreeObj("actionTypeTree"); var node = zTree.getNodeByParam("id", $('#actionTypeId').val(), null); zTree.selectNode(node); $("body").bind("mousedown", onBodyDownByActionType); } }); } /* * Body鼠标按下事件回调函数 */ function onBodyDownByActionType(event) { if (event.target.id.indexOf('switch') == -1) { hideActionTypeMenu(); } } /* * 隐藏点击事件Tree */ function hideActionTypeMenu() { $("#actionTreeContent").fadeOut("fast"); $("body").unbind("mousedown", onBodyDownByActionType); }
方式二:使用easyui
前端代码:
js代码:
$("#actionTypeId2").combotree({ url: localStorage.getItem("adminPath") + '/touch/typeTable/getActionList?businessTypeId=2', textField:'name', onClick: function (node) { $("#actionTypeId").val(node.id); }, onSelect: function (node) { /** * 当选中该节点时展开该节点,同时关闭其他节点 */ if (node.state == "closed") { $(this).tree('expand', node.target); } else { var isLeaf = $(this).tree('isLeaf', node.target); if (!isLeaf) { $(this).tree("collapse", node.target); } } } });
感谢各位的阅读!关于“Easyui和zTree如何实现树形下拉框”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
本文题目:Easyui和zTree如何实现树形下拉框
网站网址:http://scyanting.com/article/ggdogh.html