【NSBD】——Combotree 加载数据

【项目需求】

以前只做过下拉框加载数据字典，数据字典里面的项都是在同一级下。但是这次物资分类的数据字典是有分类的，像树一样，也就是说我要将整个树结构加载到我的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 ;

 

 

}

 

【效果展示】

 

【总结】

 

        上面的这些代码都是人家写好的代码，我只不过是拿过来用了而已。根据官方文档的解释，如果我后台传过来的数据是树形结构的是不是前台代码就不用写这么多了，直接让后台返回树形结构的数据就可以了。那这两种哪样更方便呢？

 

        等我把代码拷到笔记本上的时候，我要自己敲一下看看，比较一下两者之间的区别。