pentaho cde 自定义复选下拉框 checkbox select

pentaho  自带的component 虽多，可是当用户须要在一个表格中查看多个组别的数据时，pentaho自带的单选框就不能实现了，因此复选下拉框势在必行，实现效果以下：

实现原理是借用了jquery ztree 插件。

首先集成ztree 插件，如图

 

画你想要的图

<div class="content_wrap">
    <div class="zTreeDemoBackground left">
		<ul class="list">
			<li class="title"> <input id="citySel" type="text" readonly value="" style="width:120px;" onclick="showMenu();" />
		 <a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a></li>
		</ul>
	</div>
</div>

<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
    <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
</div> 

　

书写数据源。。。

 

新建query component 用来接收数据

 

须要注意的是 ztree 插件须要的是一个json 格式的数组

因此要在post 里面把接收的数据源 换算成  json 数组

function fun() {
  if(!myResult.length) return null; 
  var i = 0; 
  array = []; 
  for(var i = 0;i < myResult.length;i++){ 
    array.push({"id":myResult[i][0],"pId":myResult[i][1],"name":myResult[i][2]}); 
  } 
console.log(JSON.stringify(array))
$.fn.zTree.init($("#treeDemo"), setting, array);
} 

　

完毕！