基於jquery的樹列表選擇外掛 JqTree.js
阿新 • • 發佈：2020-07-31
樣式
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 .ul_tree{ 6 list-style: none; 7 } 8 .ul_tree .sub_li{ 9 border-bottom: none; 10 padding-left: 0px !important; 11 } 12 .ul_tree li{ 13 list-style: none; 14 min-height: 40px; 15 height: auto; 16 line-heightView Code: 40px; 17 padding-left: 30px; 18 border-bottom: 1px solid #E5E5E5; 19 font-size: 18px; 20 } 21 .ul_tree li input{ 22 margin-right: 5px; 23 } 24 25 .ul_tree .open { 26 background-image: url('/content/img/tree_open.png') ; 27 background-repeat: no-repeat; 28 background-size: 20px 15px; 29 background-position:5px 12.5px; 30 } 31 .ul_tree .close{ 32 background-image: url('/content/img/tree_close.png') ; 33 background-repeat: no-repeat; 34 background-size: 10px 20px; 35 background-position:10px 10px; 36 } 37 .ul_tree .act_li{ 38 background-color: #E5E5E5; 39 border-color: #ddd; 40 } 41 /* 樹級別 從0級開始*/ 42 /* 第1級 */ 43 .ul_tree .tree_level_1 li{ 44 padding-left: 40px; 45 } 46 .ul_tree .tree_level_1 .open{ 47 background-position:15px 12.5px; 48 } 49 .ul_tree .tree_level_1 .close{ 50 background-position:20px 10px; 51 } 52 /* 第2級 */ 53 .ul_tree .tree_level_2 li{ 54 padding-left: 50px; 55 } 56 .ul_tree .tree_level_2 .open{ 57 background-position:25px 12.5px; 58 } 59 .ul_tree .tree_level_2 .close{ 60 background-position:30px 10px; 61 } 62 /* 第3級 */ 63 .ul_tree .tree_level_3 li{ 64 padding-left: 60px; 65 } 66 .ul_tree .tree_level_3 .open{ 67 background-position:35px 12.5px; 68 } 69 .ul_tree .tree_level_3 .close{ 70 background-position:40px 10px; 71 } 72 /* 第4級 */ 73 .ul_tree .tree_level_4 li{ 74 padding-left: 70px; 75 } 76 .ul_tree .tree_level_4 .open{ 77 background-position:45px 12.5px; 78 } 79 .ul_tree .tree_level_4 .close{ 80 background-position:50px 10px; 81 } 82 /* 第5級 */ 83 .ul_tree .tree_level_5 li{ 84 padding-left: 80px; 85 } 86 .ul_tree .tree_level_5 .open{ 87 background-position:55px 12.5px; 88 } 89 .ul_tree .tree_level_5 .close{ 90 background-position:60px 10px; 91 } 92 /* 第6級 */ 93 .ul_tree .tree_level_6 li{ 94 padding-left: 90px; 95 } 96 .ul_tree .tree_level_6 .open{ 97 background-position:65px 12.5px; 98 } 99 .ul_tree .tree_level_6 .close{ 100 background-position:70px 10px; 101 } 102 /* 第7級 */ 103 .ul_tree .tree_level_7 li{ 104 padding-left: 100px; 105 } 106 .ul_tree .tree_level_7 .open{ 107 background-position:75px 12.5px; 108 } 109 .ul_tree .tree_level_7 .close{ 110 background-position:80px 10px; 111 } 112 /* 第8級 */ 113 .ul_tree .tree_level_8 li{ 114 padding-left: 110px; 115 } 116 .ul_tree .tree_level_8 .open{ 117 background-position:85px 12.5px; 118 } 119 .ul_tree .tree_level_8 .close{ 120 background-position:90px 10px; 121 }
JS
$.fn.JqTreeInit = function (data, options, callback) {
var JqTree = {
target: null,
sourcedata: null,
init: function (data, options) {
this.sourcedata = data;
//處理引數
this.options = $.extend({}, this.defaults, options || {});
//初始化資料
this.initData(data);
//註冊單擊事件
this.registerTreeClick();
//回撥方法
if (callback) {
callback(this)
}
},
initData: function (data) {
//構建樹結構
var treeData = this.getTreeData(data, this.options.topPid);
//生成樹
var treeHtml = this.generateTreeHtml(treeData, 1);
$(this.target).html(treeHtml)
},
getTreeData: function (data, pid) {
var obj = this;
var result = [];
$(data).each(function (i, item) {
if (item[obj.options.pIdName] == pid) {
result.push({
id: item[obj.options.idName],
pid: item[obj.options.pIdName],
name: item[obj.options.nameName],
children: obj.getTreeData(data, item[obj.options.idName])
});
}
});
return result;
},
generateTreeHtml: function (data, level) {
var obj = this;
var result = "";
$(data).each(function (i, item) {
var id = item.id;
var name = item.name;
var className = "open";
if (item.children.length == 0) {
className = "last";
}
else if (obj.options.expandLevel > 0 && level > obj.options.expandLevel) {
className = "close";
}
result += '<li id="' + id + '" class="' + className + '"><input type="checkbox" />' + name + '</li>';
if (item.children.length > 0) {
result += '<li pid="' + id + '" class="sub_li" ' + (className == "close" ? "hidden" : "") + '>';
result += '<ul class="tree_level_' + (level) + '">';
result += obj.generateTreeHtml(item.children, level + 1);
result += '</ul></li>';
}
});
return result;
},
//註冊樹單擊事件
registerTreeClick: function () {
var obj = this;
var parentBox = obj.target;
$(parentBox).find("li").not(".sub_li").each(function (i, li) {
//行單擊事件
$(li).click(function () {
var id = $(this).attr("id");
var isopen = $(this).is(".open");
var subli = $(parentBox).find("li[pid='" + id + "']");
if (subli.length > 0) {
if (isopen) {
$(parentBox).find("li[pid='" + id + "']").hide();
$(this).removeClass("open").addClass("close");
}
else {
$(parentBox).find("li[pid='" + id + "']").show();
$(this).removeClass("close").addClass("open");
}
}
//最後一級
if($(this).is(".last")){
$(this).find("input[type='checkbox']").click();
}
});
//複選框單擊事件
$(li).find("input[type='checkbox']").click(function (e) {
var id = $(this).parent().attr("id");
var ischecked = $(this).is(":checked");
//單選
if (obj.options.single) {
if (ischecked) {
$(parentBox).find("input[type='checkbox']").prop("checked", false);
$(this).prop("checked", true);
}
}
//複選
else {
//選中狀態
if (ischecked) {
//正向聯動
$(parentBox).find("li[pid='" + id + "'] input[type='checkbox']").prop("checked", true);
}
else {
//正向聯動
$(parentBox).find("li[pid='" + id + "'] input[type='checkbox']").prop("checked", false);
}
//反向聯動
obj.checkboxReverseLinkage(this, ischecked)
}
//設定li選中狀態
obj.setLiAct();
//阻止事件冒泡
if (e && e.stopPropagation) {//非IE
e.stopPropagation();
}
else {//IE
window.event.cancelBubble = true;
}
});
});
},
//反向聯動
checkboxReverseLinkage: function (checkbox, ischecked) {
var parentBox = this.target;
var parentSubLi = $(checkbox).parent().parent().parent();
if (parentSubLi != undefined && parentSubLi != null && parentSubLi.length > 0) {
var subliCheckBox = $(parentBox).find("li[id='" + $(parentSubLi).attr("pid") + "'] input[type='checkbox']");
if (ischecked) {
//反向聯動
if ($(parentSubLi).find("input[type='checkbox']").not(":checked").length == 0) {
$(subliCheckBox).prop("checked", true);
}
}
else {
//反向聯動
if ($(parentSubLi).find("input[type='checkbox']").not(":checked").length > 0) {
$(subliCheckBox).prop("checked", false);
}
}
this.checkboxReverseLinkage(subliCheckBox, ischecked);
}
},
setLiAct: function () {
var parentBox = this.target;
$(parentBox).find("li").removeClass("act_li");
$(parentBox).find("input[type='checkbox']:checked").parent().addClass("act_li");
},
//獲取選中值
getCheckedDatas: function () {
var obj = this;
var parentBox = this.target;
var ids = new Array();
$(parentBox).find(".act_li").each(function () {
ids.push($(this).attr("id"));
});
var result = [];
$(this.sourcedata).each(function () {
if (ids.indexOf(this[obj.options.idName] + "") > -1) {
result.push(this)
}
});
if (obj.options.single) {
return result.length == 0 ? null : result[0]
}
else {
return result.length == 0 ? null : result;
}
},
getDataById: function (id) {
var obj = this;
var result = null;
$(this.sourcedata).each(function () {
if ((this[obj.options.idName] + "") === (id + "")) {
result = this;
return result;
}
});
return result;
},
//預設引數
defaults: {
single: true,//是否單選
idName: "id",
nameName: "name",
pIdName: "parentId",
topPid: 0,
expandLevel: 1 //預設展開級別
},
//實際引數
options: {}
}
JqTree.target = this;
JqTree.init(data, options);
return JqTree;
}
呼叫
<ul class="ul_tree" id="ulTree"> </ul>
//樹形結構資料 var data=[{ id = 1, pid=0, name ="一級標題" }, { id = 2, pid=1, name ="二級標題" }]; //載入樹 var JqTreeObj = $("#ulTree").JqTreeInit(data, { pIdName: "parentid", topPid: null }); //獲取選中值 var data = JqTreeObj.getCheckedDatas();
注：以上程式碼屬個人整理，用於交流學習，原創。轉載請標明出處。（QQ/微信：742010299 暱稱：同心同德）