【NSBD】——Combotree 加载数据
来源:互联网 发布:js中怎么隐藏div 编辑:程序博客网 时间:2024/05/19 02:20
【项目需求】
以前只做过下拉框加载数据字典,数据字典里面的项都是在同一级下。但是这次物资分类的数据字典是有分类的,像树一样,也就是说我要将整个树结构加载到我的combotree组合框里面。
【分析实现】
之前都是后台取出值,然后前台赋值给相应的combobox就可以了。但是这次我们使用combotree组合框。
上网查资料的时候,说的很简单。只要url的数据是树形结构的就可以了。
<select id="cc"class="easyui-combotree" style="width:200px;"
data-options="url:'get_data.php',required:true">
</select>
可是在我们项目中,组长写的后台传过来的数据不是树形结构的,而是把所有的结构都打散了,没有结构的数据,单纯的一个list。
所以,我们就要将后台传过来的数据进行转换。
functiongetCombotree(dictionaryId){
$("#equIp_Type_Ip").combotree({
lines:true;
panelWidth:200,
panelHeight:200,
url:MYPATH+"/datadict/findTotalByPid.do?pid="+dictionaryId,
//1、过滤数据显示
loadFilter:function(data){
varrows=[];
if(data.trees){
rows=data.trees;
}else{
rows=data;
}
//2、将数据转换为树形结构的数据
return convert(rows);
},
onBeforeExpand:function(node){
vartree=$("#equIp_Type_Ip").combotree("tree");
varoptions=tree.tree("options");
options.url=MYPATH+"/datadict/findTotalByPid.do?pid="+node.id;
},
onSelect:function(node){
$("#equIp_Type_Ip").combotree("setValue",node.text); //给combotree赋值为节点的文本值
}
});
}
//将数据转换为树形结构的数据
functionconvert(rows){
var scope=this;
varnodes=[];
for(var i=0;i<rows.length;i++){
varrow=rows[i];
//判断rows中的数据是否为父节点
if (!exists(rows,row.pid)){
vardata={
id:row.id,
text:row.dictname,
attributes:row.attributes
};
if(row.iconCls!="")data.iconCls=row.iconCls;
nodes.push(data);
}
}
vartoDo=[];
for(vari=0;i<nodes.length;i++){
toDo.push(nodes[i]);
}
//查询父节点的子节点
while(toDo.length){
varnode=toDo.shift();
for(var i=0;i<rows.length;i++){
varrow=rows[i];
if(row.pid==node.id){
varchild={id:row.id,text:row.dictname,attributes:row.attributes,isLeft:true};
if(row.iconCls!="")child.iconCls=row.iconCls;
if(node.children){
node.children.push(child);
}else {
node.children=[child];
}
toDo.push(child);
}
}
}
returnnodes;
}
//查询rows里面id是否为pid
functionexists(rows,parentid){
for(var i=0;i<rows.length;i++){
if(rows[i].id==parentid){
returntrue;
}
}
returnfalse ;
}
【效果展示】
【总结】
上面的这些代码都是人家写好的代码,我只不过是拿过来用了而已。根据官方文档的解释,如果我后台传过来的数据是树形结构的是不是前台代码就不用写这么多了,直接让后台返回树形结构的数据就可以了。那这两种哪样更方便呢?
等我把代码拷到笔记本上的时候,我要自己敲一下看看,比较一下两者之间的区别。
- 【NSBD】——Combotree 加载数据
- combotree动态加载数据
- easyui combotree 加载本地数据
- easyui combotree加载字典数据
- 【NSBD】——Jquery tagsinput标签
- 【NSBD】——My first Map
- 【NSBD】——系统导入导出
- 【NSBD】——导入导出代码实现
- EasyUI——combotree
- 【NSBD】——二维码的生成与打印
- 【NSBD】——datagrid多次选中记录问题
- easyui中combotree与combobox并用动态加载数据
- 【easyui】combotree类似combobox模糊查询功能,动态加载数据
- easyui combotree加载静态数据问题(选不上)
- EasyUI-tree和combotree异步加载数据自定义查询参数
- combotree异步加载 combotree点击加载
- easyui combotree --异步加载
- easyUI combotree加载大量节点数据的处理方式(逐步加载)
- 碎片笔记 2016.06.19
- leetcode 10 Regular Expression Matching
- 数据存储类别
- html
- 进程环境
- 【NSBD】——Combotree 加载数据
- Opencv4Android分享:eclipse下opencv环境搭建
- Java 异常处理机制
- 最全Android开发常用工具类
- WSDL/WebService/SOAP/REST/AXIS/CXF 开放式服务
- Apache Flink fault tolerance源码剖析完结篇
- FloatingActionButton的使用
- @Basic(fetch=FetchType.EAGER)和@Basic(fetch=FetchType.LAZY)
- 189. Rotate Array