easyui combotree加载字典数据

来源：互联网发布：c语言与接口这本书怎样编辑：程序博客网时间：2024/05/29 02:05

网上有很多easyui关于combotree的文章，但是看来看去也没有找到合适那种可以实现远程加载数据字典数据的例子，只能私下自己仔细研究了一下combotree控件，这次实现的主要功能就是把数据字典里面的数据加载到combotree的下拉树。

实现效果如下图：

当点击任意一个有下级节点的节点,会加载该节点对应的下级节点的数据，效果如下：

<body>     <div class="easyui-layout" data-options="fit:true">          <input class="easyui-combotree" style="width:150px;" data-options="required:true,editable:false,onChange:function(){toUpOtherPage()}" id="typeCode" name="typeCode"/>     </div>  </body

typeCode是组合框的id，我们需要使用页面元素调用combotree是组合框函数头来做相关处理</span>

下面我们看看，怎么在编辑页面初始化数据：

<pre class="javascript" name="code"></head>  <script type="text/javascript">    $(document).ready(function(){  // 第一个参数：字典项ID -1表示顶级  //第二个参数：字典编码    DIC_WS218_2002_A  getCombotree('-1', 'DIC_WS218_2002_A');  }) function getCombotree(dictionaryId,dictionaryCode){  $("#typeCode").combotree({  //定义在文本改变时如何加载列表数据。如果组合框（combobox）从服务器加载就设置为 'remote'。  //当设置为 'remote' 模式时，用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器，以获取新的数据。  mode: 'remote',     lines:true,//定义是否显示树线条     panelWidth:200,//下拉面板的宽度     panelHeight:200,//下拉面板的高度    url:"${base}/dictionaryItem/queryItemTreeListByCode.action?itemId="+dictionaryId,  queryParams:{"dictionaryCode":dictionaryCode},  onBeforeExpand:function(node){//节点展开前触发,是在点击节点前做处理； 这个是为了实现异步加载子节点 //$("#typeCode").combotree("tree")表示：得到树对象var tree=$("#typeCode").combotree("tree");    //得到树的options对象var options=tree.tree("options");    //访问后台获取子节点的url地址    //queryItemTreeListByCode.action:查询字典项某节点下一级树数据    //queryItemTreeListByCode返回的数据为：List<DictionaryItemTreeDataVO> options.url= "${base}/dictionaryItem/queryItemTreeListByCode.action?itemId="+node.itemId ;  /* 很多事件的回调函数需要 'node' 参数，它包括下列属性：                 id：绑定到节点的标识值。                 text：要显示的文本。                 iconCls：用来显示图标的 css class。                 checked：节点是否被选中。                 state：节点状态，'open' 或 'closed'。                 attributes：绑定到节点的自定义属性。                 target：目标的 DOM 对象。                                                     需要注意的是:现在获取的node是DictionaryItemTreeDataVO对象，                                                     可以获取该对象的所有属性包括：code、dictionaryCode......                 */  },  onSelect:function(node){//当节点被选中时触发  //  $("#typeCode").combotree("setValue",node.code);  }  })  }  </script>

 这个是重写combotree的函数，函数作用是在点击节点前做处理这个是为了实现异步加载子节点，为了实现异步加载子节点，$('#typeCode').combotree("tree").tree("options").url  是访问后台获取子节点的地址

更多combotree的方法：

方法继承至 combo,以下是combotree新增和重写的方法.

NameParameterDescriptionoptionsnone返回 options 对象.treenone返回树(tree)对象. 以下示例展示如何得到选择的树节点(node).

 var t = $('#cc').combotree('tree'); // 得到树对象

 var n = t.tree('getSelected'); // 得到选择的节点

 这里经过实践测试应该使用t.tree('getChecked');

 alert(n.text);

loadDatadata加载本地tree数据.

示例代码:

 $('#cc').combotree('loadData', [{ id: 1, text: 'Languages', children: [{ id: 11, text: 'Java' },{ id: 12, text: 'C++' }] }]);

reloadurl重新请求远程服务器端数据. 传入'url'参数重写原始的URL值.clearnone清除组件值.setValuesvalues设置组件值数组.

示例代码:

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

setValuevalue设置组件值.

示例代码:

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

0 0