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

pentaho  自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下:

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

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

首先集成ztree 插件,如图

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

画你想要的图

<div class="content_wrap">
    <div class="zTreeDemoBackground left">
		<ul class="list">
			<li class="title"> <input  />
		 <a >选择</a></li>
		</ul>
	</div>
</div>

<div >
    <ul ></ul>
</div> 

 

书写数据源。。。

新建query component 用来接收数据

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

需要注意的是 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);
} 

 

完毕!