2019独角兽企业重金招聘Python工程师标准>>>

引言

最近由于工作的需要，需要使用到下拉树，就是我们有一个输入框，用户要输入东西，但是输入的东西是从我们那个之中选的，为了防止用户输入错误，我们使用了下拉树，因为为一个树形列表，用户选择点击树形列表的哪一个，哪一个就会上去。combotree,效果如下：

1.创建combotree

我们知道easyui的每一个控件创建都有两种方法，combotree也不例外，一种是使用html标签直接初始化，一种是使用javascript方法实现。

a.html标签实现

<select id="cc" class="easyui-combotree" style="width:200px;"data-options="url:'get_data.php',required:true">
</select>

b.javascript创建

<input id="cc" value="01">

$('#cc').combotree({url: 'get_data.php',required: true
});

可以看得出，这儿加载数据都是在初始化的时候，直接去服务器请求，然后easyui自己加载的，其实就是加载json数据，但是我们写项目一般都是先用ajax请求下来，然后在本地加载该js对象，所以我们一般使用loadData来加载数据：

$('#addEmailform #ifinereportCptNameUrl').combotree('loadData',data );

值得注意的是：该数据的格式，必须是如下：

var data=[{id: 1,text: 'Languages',children: [{id: 11,text: 'Java'},{id: 12,text: 'C++'}]}]

就是初始化的时候请求远程的数据，该数据也一样需要是这个格式。

2.取值

其实有很多种方法，下面举两种

a.combotree的onSelect事件中就可以得到

$('#addEmailform #ifinereportCptNameUrl').combotree({required: true,width:350,height:35,onSelect :function(node){alert(node.id+node.text)                         }});

上述方法，就是在初始化combotree的时候，注册一个onSelect事件，但是有更多的时候，我们在在别的函数里面需要得到现在已经选中的节点的值，就必须采用第二种方法了。

b.方法如下

 var tCpt = $('#addEmailform #ifinereportCptNameUrl').combotree('tree');   // get the tree objectvar n = tCpt.tree('getSelected');      // get selected node     alert(n.id+n.text)

3.设置值

setValues

values

设置组件值的数组。
代码实例：

$('#cc').combotree('setValues', [1,3,21]);

setValue

value

设置组件的值。
代码实例：

$('#cc').combotree('setValue', 6);

注意第二个参数树该节点的id

至此，基础知识普及完成。

4.easyui的combotree的一个小坑，值得注意。

就是同一个页面，有好几个combotree加载同一个本地数据的时候，只有最后一个combotree起作用，废话不多说，贴bug的代码：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>form-combotree - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../../themes/icon.css"><link rel="stylesheet" type="text/css" href="../demo.css"><script type="text/javascript" src="../../jquery.min.js"></script><script type="text/javascript" src="../../jquery.easyui.min.js"></script><script type="text/javascript">$(function() {var data = [{id: 1,text: 'Languages',children: [{id: 11,text: 'Java'},{id: 12,text: 'C++'}]},{id: 2,text: 'book',children: [{id: 13,text: 'xxx1'},{id: 14,text: 'ccc'}]}];$('#cc').combotree({required: true});$('#cc').combotree('loadData',data );$('#cc1').combotree({required: true});$('#cc1').combotree('loadData',data );$('#cc2').combotree({required: true,multiple: true,height:50});$('#cc2').combotree('loadData',data );})function setvalue(){$.messager.prompt('SetValue','Please input the value(1,2,3,etc):',function(v){if (v){$('#cc1').combotree('setValue',v);}});}</script>
</head>
<body><h2>Basic Form combotree </h2><div style="margin:20px 0;"></div><div class="easyui-panel" title="New Topic" style="width:400px"><div style="padding:10px 60px 20px 60px" ><div>combotree</div><input id="cc" ></div><div style="padding:10px 60px 20px 60px" >combotree action<div style="margin:20px 0;"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert('key:'+$('#cc1').combotree('getValue'))">GetValue</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combotree('disable')">Disable</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combotree('enable')">Enable</a></div><input id="cc1" ></div><div style="padding:10px 60px 20px 60px" ><div>combotree multiple</div><input id="cc2" ></div></div>
</body>
</html>

你会发现只有第三个起作用，其余的不起作用，原因在于，三个加载的是同一份data数据，而且时间点很近，解决办法，给每一个combotree注册一个 onShowPanel事件，然后再在这个事件里面加载data数据，就可以，解决之后的代入如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Basic Dialog - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="themes/icon.css"><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jquery.easyui.min.js"></script><script type="text/javascript">$(function() {var data = [{id: 1,text: 'Languages',children: [{id: 11,text: 'Java'},{id: 12,text: 'C++'}]},{id: 2,text: 'book',children: [{id: 13,text: 'xxx1'},{id: 14,text: 'ccc'}]}];$('#cc').combotree({required: true,onShowPanel:function(){$('#cc').combotree('loadData',data );}});//$('#cc').combotree('loadData',data );$('#cc1').combotree({required: true,onShowPanel:function(){$('#cc1').combotree('loadData',data );}});//$('#cc1').combotree('loadData',data );$('#cc2').combotree({required: true,multiple: true,height:50,onShowPanel:function(){$('#cc2').combotree('loadData',data );}});//$('#cc2').combotree('loadData',data );})function setvalue(){$.messager.prompt('SetValue','Please input the value(1,2,3,etc):',function(v){if (v){$('#cc1').combotree('setValue',v);}});}function getText(){var tCpt = $('#cc1').combotree('tree');   // get the tree objectvar n = tCpt.tree('getSelected');      // get selected nodealert(n.text);}</script>
</head>
<body><h2>Basic Form combotree </h2><div style="margin:20px 0;"></div><div class="easyui-panel" title="New Topic" style="width:400px"><div style="padding:10px 60px 20px 60px" ><div>combotree</div><input id="cc" ></div><div style="padding:10px 60px 20px 60px" >combotree action<div style="margin:20px 0;"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert('key:'+$('#cc1').combotree('getValue'))">GetValue</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combotree('disable')">Disable</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#cc1').combotree('enable')">Enable</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="getText()">getText</a></div><input id="cc1" ></div><div style="padding:10px 60px 20px 60px" ><div>combotree multiple</div><input id="cc2" ></div></div>
</body>
</html>

打完收工！

转载于:https://my.oschina.net/u/1540325/blog/780751

【combotree】easyui的combotree(树形下拉框)使用总结相关推荐

html树形多选下拉列表,EasyUI 多行树形下拉框(Multiple ComboTree)_Vue EasyUI Demo
源代码 Multiple ComboTree v-model="value" :data="data" :multiple="true" : ...
easyui复杂表单_jQuery EasyUI 表单 – 创建树形下拉框（ComboTree） | 菜鸟教程
jQuery EasyUI 表单 - 创建树形下拉框树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
在开发过程中遇到的小案例效果展示未处理之前的效果: 处理之后的效果: 需求详情 combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值,但是子节点的状态是选中的. 当所有子节 ...
ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
iview 下拉select样式_Vue.js相关：iview实现select tree树形下拉框的示例代码
Vue.js相关:iview实现select tree树形下拉框的示例代码发布于 2020-3-16| 复制链接摘记: 本文介绍了iview实现select tree树形下拉框的示例代码,分享给大 ...
treeselect只选了分支节点全选_vue Treeselect 树形下拉框:获取选中节点的ids和lables操作...
API: https://vue-treeselect.js.org/#events 1.ids: 即value 1.lable: 需要用到方法:@select(node,instanceId) 和 ...
JavaScript树形下拉框
js库地址:https://github.com/hzwy23/Hselect 这个JS文件是对select标签的一个扩展,使得select能够支持树形下拉框 1.依赖关系: 使用这段js代码之前,请 ...
element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...
element做树形下拉_一个基于 elementUi 的树形下拉框组件vue
wl-vue-select,wl-tree-select 简介用于vue框架的树形下拉框及带全选的普通下拉框. Tree drop-down box for vue framework and or ...
树形下拉框字体变粗问题
树形下拉框点击选中后,选中的字体颜色变粗,再次打开下拉框,未选中的字体也会变粗,解决方法: <style lang='less'> // el-tree 字体不加粗 .el-tree .e ...

【combotree】easyui的combotree(树形下拉框)使用总结

1.创建combotree

2.取值

3.设置值

4.easyui的combotree的一个小坑，值得注意。

【combotree】easyui的combotree(树形下拉框)使用总结相关推荐

最新文章

热门文章