easyui-combotree實現樹形結構的下拉控制元件,並實現節點回顯
專案開發,臨時的一個需求,將8000條資料整成樹形機構的下拉控制元件,網上找了資料,可以使用easyUI的combotree實現
看了官網資料,combotree需要的資料必須是json資料,json的key為 id,text,children,用的是jsonarray生成json資料
例如:{'id':1000,"text":root,"children":[{"id":1001,"text":root1,"children":[{"id":1002,"text":root2,"children":[{}]}]}]}
根節點下面有多個子節點的結構
這樣的話:就是一個map容器裡面放置List<Map>的結構
後臺程式碼
package flink.net.util; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.servlet.http.HttpServletRequest; import org.springframework.web.util.WebUtils; import com.ylink.mfo.action.form.UserInfo; import com.ylink.mfo.msg.rsp.RspA9011; import flink.consant.Constants; public class MyBranchUtils { //獲取當前使用者所在機構的所有子機構資訊 //引數list是機構資訊所有記錄 public static Map<String, Object> getCombotreeInfo(List<RspA9011> list,HttpServletRequest request){ Map<String,Object> map = new HashMap<String, Object>(); UserInfo userInfo = (UserInfo)WebUtils.getSessionAttribute(request, Constants.SESSION_USER); for (RspA9011 rspA9011 : list) { if(rspA9011.getBranch_id().equals(userInfo.getBranchId())){ map.put("id", rspA9011.getBranch_id()); map.put("text", rspA9011.getBranch_name()); map.put("children", MyBranchUtils.getChildrenRoleInfo(rspA9011.getBranch_id(), list)); } } return map; } //通過父機構號遞迴獲取子孫機構 public static List<Map<String,Object>> getChildrenRoleInfo(String parentId,List<RspA9011> list){ List<Map<String,Object>> total = new ArrayList<Map<String,Object>>(); for (RspA9011 rspA9011 : list) { if(rspA9011.getParent_branch_id().equals(parentId)){ Map<String,Object> map = new HashMap<String, Object>(); map.put("id", rspA9011.getBranch_id()); map.put("text", rspA9011.getBranch_name()); map.put("children", getChildrenRoleInfo(rspA9011.getBranch_id(), list)); total.add(map); } } return total; } }
說明1:RspA9001類,是一個對應資料庫表(機構號,當前機構名稱,父機構號)的實體,實體的屬性定義如下:
branch_id : 機構號
branch_name: 機構名稱
parent_branch_id: 父機構號
說明2: 方法getCombotreeInfo有兩個引數list是機構資訊的所有記錄數,request請求用來獲取當前使用者的機構號,返回的是Map<List>結構的資料,傳回到前臺時候,需要用Json工具類轉json資料。
寫回json資料,原生的servelet方式,BusinessMap.BRANCH_INFO_LIST是所有機構記錄的list
response.setContentType("text/javascript;charset=utf-8");
response.setCharacterEncoding("utf-8");
JSONArray fromObject = new JSONArray();
if(BusinessMap.BRANCH_INFO_LIST.size()>0){
Map<String, Object> combotreeInfo = MyBranchUtils.getCombotreeInfo(BusinessMap.BRANCH_INFO_LIST, request);
fromObject = JSONArray.fromObject(combotreeInfo);
}
response.getWriter().print(fromObject);
response.getWriter().flush();
response.getWriter().close();
return null;
前臺js載入資料
頁面:
<select id="branch_id" class="easyui-combotree" method="get" style="width: 160px;"></select>
ajax獲取資料
和後臺使用ajax互動,因為多個頁面用到了機構下拉列表,所以就在主頁面載入時候的,請求了一次後臺,快取在主頁面上,後面子頁面都從主頁面取值,當然,也可以ajax獲取成功後,初始化combotree
//載入json機構資訊
var loginBranchInfo;
$.ajax({
type:'get',
url:CONTEXT_PATH+'/sysConfig.do?action=jsonBranchInfo',
dataType:'json',
success:function(data){
loginBranchInfo = data;
//這裡也可以直接初始化combotree
},
error:function(){
alert('機構資訊載入失敗');
}
});
子頁面初始化combotree:
子頁面獲取主頁面資料
var jsonBranchData = window.parent.loginBranchInfo;
$('#branch_id').combotree
({
data:jsonBranchData,
valueField: 'id',
textField: 'text',
required: false,
editable: true,
onLoadSuccess: function (node, data) {
$('#branch_id').combotree('tree').tree("collapseAll");
}
});
其他初始化方式
官網上的方式:將上面的data改為一個url,填入後臺一個地址,返回的是json資料就行
其他功能實現
1. 實現資料回顯
如果是頁面回顯,觸發onLoadSuccess事件,可以遍歷所有節點,只要節點的值和param.[引數]相同,就選中這個節點,
在觸發onSelect事件,設定選中的文字是節點的text,這個有點問題,只能看,不能再次點選,如果再次點選的話,combotree的值是空的。
不過,應該可以這樣,onSelect 後將具體的值,賦給一個隱藏的input,使用這個input提交。
onLoadSuccess: function (node, data) {
//回顯時,預設選中的值
var root = $("#branch_id").combotree('tree').tree('getRoot');
var childrens = $("#branch_id").combotree('tree').tree('getChildren',root.target);
childrens.push(root);
for(var i=0;i<childrens.length;i++){
if(childrens[i].id == '${param.branchId}'){
var thisnode = $("#branch_id").combotree('tree').tree('find',childrens[i].id);
$("#branch_id").combotree('tree').tree('select',thisnode.target);
}
}
$('#branch_id').combotree('tree').tree("collapseAll");
},
onSelect:function(node){
$("#branch_id").combotree('setText',node.text);
}
2. 輸入框輸入,能夠查詢到對應的子節點
要實現輸入select框查詢到對應的節點,需要將editable改為true,網上找了些js方法實現,實現如下
$(".combo-text").bind("input propertychange", function() {
$('#branch_id').combotree('tree').tree("search",$(this).val());
if($(this).val()=="" || null==$(this).val()){
$('#branch_id').combotree('tree').tree("expandAll");
}
});
search方法定義,網上找的
(function($) {
$.extend($.fn.tree.methods, {
search: function(jqTree, searchText) {
// easyui tree的tree物件。可以通過tree.methodName(jqTree)方式呼叫easyui tree的方法
var tree = this;
// 獲取所有的樹節點
var nodeList = getAllNodes(jqTree, tree);
// 如果沒有搜尋條件,則展示所有樹節點
searchText = $.trim(searchText);
if (searchText == "") {
for (var i=0; i<nodeList.length; i++){
$(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
$(nodeList[i].target).show();
}
// 展開已選擇的節點(如果之前選擇了)
var selectedNode = tree.getSelected(jqTree);
if (selectedNode) {
tree.expandTo(jqTree, selectedNode.target);
}
return;
}
// 搜尋匹配的節點並高亮顯示
var matchedNodeList = [];
if (nodeList && nodeList.length>0) {
var node = null;
for (var i=0; i<nodeList.length; i++){
node = nodeList[i];
if (isMatch(searchText, node.text)) {
matchedNodeList.push(node);
}
}
// 隱藏所有節點
for (var i=0; i<nodeList.length; i++){
$(".tree-node-targeted", nodeList[i].target).removeClass("tree-node-targeted");
$(nodeList[i].target).hide();
}
// 摺疊所有節點
tree.collapseAll(jqTree);
// 展示所有匹配的節點以及父節點
for (var i=0; i<matchedNodeList.length; i++){
showMatchedNode(jqTree, tree, matchedNodeList[i]);
}
}
},
showChildren: function(jqTree, node) {
// easyui tree的tree物件。可以通過tree.methodName(jqTree)方式呼叫easyui tree的方法
var tree = this;
// 展示子節點
if (!tree.isLeaf(jqTree, node.target)) {
var children = tree.getChildren(jqTree, node.target);
if (children && children.length>0) {
for (var i=0; i<nodeList.length; i++){
if ($(children[i].target).is(":hidden")) {
$(children[i].target).show();
}
}
}
}
},
scrollTo:function(jqTree, param) {
// easyui tree的tree物件。可以通過tree.methodName(jqTree)方式呼叫easyui tree的方法
var tree = this;
// 如果node為空,則獲取當前選中的node
var targetNode = param && param.targetNode ? param.targetNode : tree.getSelected(jqTree);
if (targetNode != null) {
// 判斷節點是否在可視區域
var root = tree.getRoot(jqTree);
var $targetNode = $(targetNode.target);
var container = param && param.treeContainer ? param.treeContainer : jqTree.parent();
var containerH = container.height();
var nodeOffsetHeight = $targetNode.offset().top - container.offset().top;
if (nodeOffsetHeight > (containerH - 30)) {
var scrollHeight = container.scrollTop() + nodeOffsetHeight - containerH + 30;
container.scrollTop(scrollHeight);
}
}
}
});
function showMatchedNode(jqTree, tree, node) {
// 展示所有父節點
$(node.target).show();
$(".tree-title", node.target).addClass("tree-node-targeted");
var pNode = node;
while ((pNode = tree.getParent(jqTree, pNode.target))) {
$(pNode.target).show();
}
// 展開到該節點
tree.expandTo(jqTree, node.target);
// 如果是非葉子節點,需摺疊該節點的所有子節點
if (!tree.isLeaf(jqTree, node.target)) {
tree.collapse(jqTree, node.target);
}
}
function isMatch(searchText, targetText) {
return $.trim(targetText)!="" && targetText.indexOf(searchText)!=-1;
}
function getAllNodes(jqTree, tree) {
var allNodeList = jqTree.data("allNodeList");
if (!allNodeList) {
var roots = tree.getRoots(jqTree);
allNodeList = getChildNodeList(jqTree, tree, roots);
jqTree.data("allNodeList", allNodeList);
}
return allNodeList;
}
function getChildNodeList(jqTree, tree, nodes) {
var childNodeList = [];
if (nodes && nodes.length>0) {
var node = null;
for (var i=0; i<nodes.length; i++){
node = nodes[i];
childNodeList.push(node);
if (!tree.isLeaf(jqTree, node.target)) {
var children = tree.getChildren(jqTree, node.target);
childNodeList = childNodeList.concat(getChildNodeList(jqTree, tree, children));
}
}
}
return childNodeList;
}
})(jQuery);
相關推薦
easyui-combotree實現樹形結構的下拉控制元件,並實現節點回顯
專案開發,臨時的一個需求,將8000條資料整成樹形機構的下拉控制元件,網上找了資料,可以使用easyUI的combotree實現 看了官網資料,combotree需要的資料必須是json資料,json的key為 id,text,children,用的是jsonarray生成
使用Ext.net時如何遍歷Panel或者FormPanel中Content標籤下的控制元件,並進行驗證
前幾天遇到一個比較複雜的表單格式,如果用Ext.net的佈局做起會比較麻煩(Ext.net這個佈局複雜表單一直是讓人不爽的地方)用Table做起來會比較簡單,於是乎使用了Panel的Content標籤。 結構如下:<ext:FormPanel ID="ContentFo
WPF 窗體基類實現的體驗及實現回車到下一控制元件
原文: WPF 窗體基類實現的體驗及實現回車到下一控制元件 1、窗體基類實現參考 http://weblogs.asp.net/psheriff/archive/2009/11/02/creating-a-base-window-class-in-wpf.aspx 2、基類不能像Wi
【Bootstrap Table】在指定列中新增下拉框控制元件,並獲取所選值
背景 最近在使用Bootstrap table ,有一個在某一列新增一個下拉列表,並且通過 “getAllSelections”方法獲取所選行的需求,在實現這個功能的時,走了一些彎路,遇到了一些坑。所以今天總結出來,既是自己的學習,也分享給大家,
下拉框、下拉控制元件之Select2
一、Select2的功能簡介select2外掛給我們帶來了更加友好的互動方式,比如查詢控制元件展開後可通過關鍵字進行檢索例如: Select2也可以選擇帶查詢控制元件的選擇框... Select2更是支援多值選擇框... 二、如何使用
多選下拉控制元件multiselect使用小結
專案開發中,需要用到多選下拉列表外掛,由於專案前端框架採用了bootstrap,因此自然選擇了bootstrap的元件。經瞭解其有兩組外掛: 1、第一個元件是寫bootstrap table的主人公 wenzhixin 封裝的一個元件—— 筆者參考了“
開發手記--spinner 下拉控制元件加小箭頭
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> &l
bootstrap省市聯動下拉控制元件的使用
bootstrap城市選擇控制元件控制元件效果如下圖所示:支援全國所有城市的選擇。支援input框搜尋模糊查詢城市使用方法:1.按照順序引入的檔案,相關外掛下載地址在文章末尾的GitHub網址:<link href="css/bootstrap.css" rel="st
下拉表單項的二級聯動及回顯
實體類: //員工類 public class CrmStaff { private String staffId; private String loginName; private String loginPwd; private String staffName; pri
android自定義星級評分控制元件,可實現只顯示實心星星
話不多說,上圖 近日app需求弄一個等級展示,看了下UI圖,只顯示實星(點亮的星星).如圖 但是網上關於星級評分的例子大多這樣 也展示虛心星星 通過自定義View package com.starsbar; import android.content.C
在B/S模式下不用控制元件,如何建立客戶端的本地檔案
建立檔案建立空文字檔案(有時被叫做“文字流”)有三種方法。第一種方法是用 CreateTextFile 方法。 下面的示例示範了在 VBScript 中如何用這種方法來建立文字檔案: Dim fso, f1Set fso = CreateObject("Scripting.F
在Ubuntu下安裝nodejs4.x,並實現開機自動啟動forever程序守護nodejs應用後臺執行
一、在Ubuntu下安裝nodejs4.x 官方文件的方法最簡單,不會出錯 Node.js v4.x: NOTE: If you are using Ubuntu Precise or Debian Wheezy, you might want to read a
WPF通過委託跨頁面修改介面控制元件,並傳值原理完全解析
網上有很多講WPF修改控制元件的,但是大部分都只是程式碼佔據了很大的篇幅,沒有詳細講解過程。所以有了我這篇文章。我希望每一個看到這篇文章的朋友都可以看懂,另外不要被太長的標題嚇到。 通過委託跨頁面修改控制元件,所謂的原理就是,構造一個可以觸發事件A的靜態類,然後對頁面做出
easyui中實現多個下拉列表聯動
先看下原始碼 <script type="text/javascript" charset="UTF-8"> $(function() { var provinceId = $('#provinceId').combobox({ url : 'p
樹形控制元件,下拉框,listbox的用法
MFC樹控制元件的簡單入門 本文簡單介紹了有關MFC中樹形控制元件的最基本的用法,鑑於水平有限,僅希望能夠讀者通過簡單的程式設計例項,起到對樹形控制元件入門之目的。因為筆者對MFC知識點的學習也都是從例項中學習,這樣效率會相對較高,好了不說廢話了,開始… 1.
新手自定義控制元件,建立屬於自己的下拉重新整理(一)---Android,ListView實現IOS的彈性效果
前言 相信很多童鞋對於控制元件的下拉重新整理都比較熟悉吧,常用的PullToRefresh開源庫和Google自帶的SwipeRefreshLayout大家肯定也很熟悉吧,但作為一個Android開發新手,對於自定義控制元件和自定義View來實現一些效果肯定還
Android自定義控制元件實戰——實現仿IOS下拉重新整理上拉載入 PullToRefreshLayout
下拉重新整理控制元件,網上有很多版本,有自定義Layout佈局的,也有封裝控制元件的,各種實現方式的都有。但是很少有人告訴你具體如何實現的,今天我們就來一步步實現自己封裝的 PullToRefreshLayout 完美的解決下拉重新整理,上拉載入問題。
easyui 下拉樹元件combotree
專案中做角色授權時,需要做一個下拉框帶樹結構的 並且可以多選的元件,就想到了easyui的combotree,有關這個元件的用法廢話不多說,直接上程式碼$('#bianhao').combotree({ url : urlg2 + '/tbdefaultroll/
easyui實現簡單的下拉框
首先,在jsp頁面加入easyui和jquery的檔案如下 <script type="text/javascript" src="assets/bootstrap/jquery-2.2.3.m
Web前端:如何實現選擇select下拉框選中跳轉其他頁面
option chang 前端 實現 cati onchange 下拉框選中 b- class <select onchange="window.location=this.value;"><option value="a.html">用戶管理<