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);
} 

　

完畢！