ztree插件封装

来源：互联网发布：windows播放器下载编辑：程序博客网时间：2024/06/18 01:20

这个是一个基于ztree插件封装的可以直接调用的插件，所用框架为：jquery、bootstrap，插件封装源码为：

;

$(function () {
window.ZtreePanel = function () {
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
// 参数配置
var config = {
depositNameArray: [],//记录选中节点的名称；
depositIdArray: [] //记录选中节点的Id号；
};
// ztree复选的配置
var settingCheckBox = {
check: {enable: true, chkStyle: 'checkbox'},
view: {dblClickExpand: true, showLine: true, txtSelectedEnable: false
},
data: {simpleData: {enable: true, idKey: "id", pIdKey: "pId", rootPId: ""}},
// 回调事件
callback: {
beforeClick: function () {
return false;
}
}
};
// ztree单选配置
var settingRadio = {
check: {
enable: false//不显示勾选框
},
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false, // 不支持同时选中多个节点
autoCancelSelected: false //不支持配合 Ctrl 或 Cmd 键进行取消节点选择的操作
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
}
};
// jquery对象的面板代码
var getHtml = function () {
var Html;
$.ajax({
url: "ztreepanel.html",
async: false,
dataType: "html",
cache: true,//使用缓存，从缓存中获取
success: function (data) {
Html = data;
}
});
return Html;
};

/**
* 主要的树形结构
* @param obj 传入的主调函数
*/
var _showBoxSearch = function (obj) {
/*默认的参数信息*/
var defaultParams = {
target: '',
titleName: '部门列表',
flag: 'checkbox',
searchData: {},
showUser: false, //只选择用户的条件
caseReason: false, //案由选择叶子节点
success: null ,
initFilterData:{},
expand: true //默认要展开全部，为false不展开
};
//将用户配置的参数和自己传入的参数进行交换
var obj = $.extend(defaultParams, obj);
//转换成jquery对象
var treeHtml = $(getHtml());
/*替换模板dom结构里面的内容*/
var html = treeHtml.html().replace(reg, function (node, key) {
return {Title: defaultParams.titleName}[key];
});
treeHtml.html(html);
// 判断ztree复选的配置的对于父子节点的关联关系
if (obj.flag === "checkbox") {
settingCheckBox.check.chkboxType = {"Y":'', "N": ''}
}
// 数据加载的区域
var searchTree = treeHtml.find("#zTree");
//按钮注册事件
setBtnMethod(searchTree, treeHtml, obj);
var dataList = getDataInit(obj);
if (obj.showUser) {
changeUserIcon(dataList);
}
$.fn.zTree.init(searchTree, obj.flag == "checkbox" ? settingCheckBox : settingRadio, dataList);
//将树形列表插入到body中
$(document.body).append(treeHtml);
//设置树形结构的初始化状态
defaultSelect(obj);
// 将生成的checkbox面板追加到页面中
if ($("#modal-bg").attr("class") === "modal-bg modal-backdrop fade in") {
$("#modal-bg").css({"z-index": "3100"});
} else {
$("#modal-bg").addClass("modal-backdrop fade in");// 模态
}
//下面控制勾选的状态，防止回显数据乱勾选
var treeObj = $.fn.zTree.getZTreeObj("zTree");
var type = {"Y": obj.Y, "N": obj.N};
if(obj.Y && obj.N){
treeObj.setting.check.chkboxType = type;
}
// 初始化查询出来的数据，第一次加载进来
if(obj.flag === "checkbox"){
//事件委托
checkSetting(treeObj, treeHtml);
}else{
treeHtml.find('[data-toggle="popover"]').remove();
treeHtml.find('input[type=text]').css("width", "285px");
}
};

var checkSetting = function(treeObj, treeHtml){
var popHtml = $("<div class='row ztreePanelPop'>" +
"<div class='col-xs-6'><label>勾选关联子集 <input type='checkbox' value='1'/></label></div>" +
"<div class='col-xs-6'><label>勾选关联父集 <input type='checkbox' value='2'/></label></div>" +
"</div>");
//提示弹框面板,用户设置勾选方式
treeHtml.find("[data-toggle=popover]").popover({
html: true,
content: popHtml,
title:'勾选设置',
trigger:'click',
placement:'left'
});
//使用事件代理
$(".dialog-tree").delegate("input[type=checkbox]","click", function(){
var Ys = '',Yp = '',Ns = '',Np = '',valType;
var $val = $(".ztreePanelPop").find(":checkbox:checked");
if($val.length === 0){
valType = {"Y": '' ,"N": ''};
}
$.each($val, function(index, value){
var val = $(this).val();
switch (val) {
case "1": Ns = 's';Ys = 's'; break;
default: Yp = 'p'; Np = 'p'; break;
}
//拼接设置
valType = {"Y": Yp + Ys ,"N": Np + Ns};
});
treeObj.setting.check.chkboxType = valType;
});
};

/**
* 设置树形结构的初始化状态开始
*
* @param obj 显示的对象
*/
var defaultSelect = function (obj) {
var treeObj = $.fn.zTree.getZTreeObj("zTree");
var nodes = $(obj.target).find(".searchKeyId").val();
//初始化选中节点
if (nodes) {
var nodesArr = nodes.split(",");
var selectNode;
for (var i = 0; i < nodesArr.length; i++) {
selectNode = treeObj.getNodeByParam("id", nodesArr[i]);
if ("radio" === obj.flag) {
//treeObj.selectNode(selectNode);//单选框设置为选中文本；//单选框不设置选中，这样才可以清空文本框
} else {
treeObj.checkNode(selectNode, true, true);//复选框设置为选中勾选框；
}
}
}
if(obj.expand){
// 展开所有的节点
treeObj.expandAll(true);
}
};

/**
* 注册按钮的事件
*
* @param searchTree 搜索关键节点
* @param treedom 树形dom结构
* @param obj 对象
*/
var setBtnMethod = function (searchTree, treedom, obj) {
// 注册搜索按钮的事件
treedom.find(".info-search").on("click", function () {
var keySearch = treedom.find("input[name=keySearch]").val();
//对于默认的参数进行追加
obj.searchData.name = keySearch;
var searchKeyObject = $.extend(obj.searchData, obj.initFilterData);
getListDataSearch(searchTree, obj.flag == "checkbox" ? settingCheckBox : settingRadio, obj.searchData, obj.url);
});
// 注册提交按钮的事件
treedom.find(".btn-primary").on("click", function () {
submitBtn(obj.target, this, obj);
});
};

/**
* 搜索框输入信息后进行树形菜单重新加载
*
* @param searchTree 数据加载的区域
* @param setting 参数配置
* @param keySearch 收缩关键字
* @param url 搜索的url
*/
var getListDataSearch = function (searchTree, setting, keySearch, url) {
$.fn.zTree.init(searchTree, setting, getSearchListData(keySearch, url));
};

/**
* 搜索数据的显示
*
* @param keySearch 搜索关键字
* @param url 收缩的url地址
* @returns 返回得到的json数据
*/
var getSearchListData = function (keySearch, url) {
var result;
$.ajax({
url: url,
dataType: 'json',
type: "POST",
data: keySearch,
async: false,
cache: true,
success: function (json) {
result = json['data']
}
});
return result;
};

/**
* 初始化数据
* @param url 请求的url地址
* @returns {*} 返回请求成功的数据
*/
var getDataInit = function (obj) {
var result;
$.ajax({
url: obj.url,
dataType: 'json',
type: "POST",
data: obj.initFilterData ,
cache: true,
async: false,
success: function (json) {
result = json['data']
}
});
return result;
};

/**
* 更改用户的图标
* @param zNodes
*/
var changeUserIcon = function (zNodes) {
if (zNodes) {
$.each(zNodes, function (index, value) {
var $person = value;
//更换图标
if ($person["type"] === 3) {
$person["iconSkin"] = "usericon";
}
$person.chkDisabled = false;
});
}
};

/**
* 点击确定填充值
*/
var printValue = function(obj){
var tree = $.fn.zTree.getZTreeObj("zTree");
var nodes = (obj.flag === "checkbox") ? tree.getCheckedNodes(true) : tree.getSelectedNodes();
//每次初始化选中的节点
config.depositNameArray.length = 0;
config.depositIdArray.length = 0;
if ((null !== nodes) && (nodes.length > 0)) {
if (obj.flag === "checkbox") {
for (var i = 0; i < nodes.length; i++) {
inConditionSelect(obj, nodes[i]);
}
} else {
inConditionSelect(obj, nodes[nodes.length - 1]);
}
}
};

/**
* 根据业务选择不同的节点
* 可扩展
*/
var inConditionSelect = function(obj, node){
//用于用户绑定选择用户
if (obj.showUser) {
if (!((!node.children) && (node.type === 3))) {
return false;
}
//案由选择案件-案由-选择根节点
} else if (obj.caseReason){
if (!((!node.children) && (node.end === 0))) {
return false;
}
}
config.depositNameArray.push(node.name);
config.depositIdArray.push(node.id);
};


/**
* 提交按钮向表单填值
*
* @param target 关闭选择框
* @param arr 上下文ID
* @param flag 是复选框还是单选框
* @param success 回调函数
*/
var submitBtn = function (target, arr, obj) {
//获取选中的节点信息
printValue(obj);
//填写数据信息
$(target).find(".searchKeyName").val(config.depositNameArray.join(","));
$(target).find(".searchKeyId").val(config.depositIdArray.join(","));
//回调函数
if (obj.success instanceof Function) {
obj.success.apply(this, [config.depositNameArray, config.depositIdArray]);
}
//显示的样式处理
if ($("#modal-bg").attr("style")) {
$("#modal-bg").removeAttr("style");
$(arr).parents(".panel").remove();
} else {
toolMethod.closePanel(arr, true, true);
}
};
return {
tree: _showBoxSearch
}
}();

});

ztreepanel.html：模板代码为（bootstrap框架）

调用方式为：

ZtreePanel.tree({
target: target, //节点id或者class，如#content
titleName: title, //展示的panel名称
flag: flag, //单选还是多选框，'radio'或者'checkbox'
url: url, //请求后台数据地址
success : function(name, nodeId) { // name,id} //树形勾选节点成功后的回调函数
});

其中，target这个节点是用于放置树形选择器选择完毕后勾选的值和隐藏id；参数target和url必选，其余参数选用。

html书写方式为：

</div>

1 0