jquery 树形框 横_jQuery横向树枝结构图布局特效代码下载

最新推荐文章于 2021-11-09 09:58:06 发布
最新推荐文章于 2021-11-09 09:58:06 发布
阅读量702 收藏
点赞数
文章标签： jquery 树形框 横
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_32242475/article/details/111959383
版权

特效描述：横向树枝 结构图布局。jQuery基于svg绘制横向树枝结构图，公司控股集团股份结构图，企业内部分支结构图，树状结构图ui布局特效。支持自定义设置结构图数据内容列表。

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

var container;

var zoom;

var rootData;

var depthInfo;

var rootName;//根节点名称

jQuery(document).ready(function () {

/* resizeScreen();*/

//selectChange();

var child=document.getElementById("product_tree");

child.innerHTML = '';

getData();

});

var getData =function() {

// 测试内容

rootData = {

"downward": {

"direction": "downward",

"name": "origin",

"children": [

{

"name": "金科城有限公司",

"amount": "100",

"ratio": "55%",

"hasHumanholding":true,

"hasChildren":true,

"isExpand": false,

"children": [

{

"name": "公司名字",

"hasHumanholding":false,

"hasChildren":true,

"amount": "100",

"ratio": "55%",

"children": []

},

{

"name": "公司名字",

"hasHumanholding":false,

"hasChildren":true,

"amount": "100",

"ratio": "55%",

"children": []

}

]

},

{

"name": "大鹅普测有限公司",

"amount": "100",

"ratio": "55%",

"hasHumanholding":true,

"hasChildren":true,

"isExpand": false,

"children": [

{

"name": "公司名字",

"hasHumanholding":false,

"hasChildren":true,

"amount": "100",

"ratio": "55%",

"children": []

},

{

"name": "公司名字",

"hasHumanholding":false,

"hasChildren":true,

"amount": "100",

"ratio": "55%",

"children": []

}

]

},

{

"name": "北京多彩有限公司",

"amount": "100",

"ratio": "55%",

"hasHumanholding":true,

"hasChildren":true,

"isExpand": false,

"children": [

{

"name": "公司名字",

"hasHumanholding":false,

"hasChildren":true,

"amount": "100",

"ratio": "55%",

"children": []

},

{

"name": "公司名字",

"hasHumanholding":false,

"hasChildren":true,

"amount": "100",

"ratio": "55%",

"children": []

}

]

},

{

"name": "哈尔滨维斯特科技发展有限公司",

"hasHumanholding":false,

"hasChildren":true,

"amount": "100",

"ratio": "55%",

"children": []

},

{

"name": "哈尔滨维斯特科技发展有限公司",

"hasHumanholding":false,

"hasChildren":true,

"isExpand": false,

"amount": "100",

"ratio": "55%",

"children": [

{

"name": "公司或股东名字",

"hasHumanholding":false,

"amount": "100",

"ratio": "55%",

"children": []

},

{

"name": "公司或股东名字",

"hasHumanholding":false,

"amount": "100",

"ratio": "55%",

"children": []

},

{

"name": "公司或股东名字",

"hasHumanholding":false,

"amount": "100",

"ratio": "55%",

"children": []

},

{

"name": "公司或股东名字",

"hasHumanholding":false,

"amount": "100",

"ratio": "55%",

"children": []

}

]

}

]

}

}

rootName = '北京伴学科技有限公司';

drawing();

};

vardrawing = function() {

var _this = this;

// var rootName = ''; //根节点的名字

var rootRectWidth = 0; //根节点rect的宽度

var forUpward = true;

var treeChart = function(d3Object) {

this.d3 = d3Object;

this.directions = ['downward'];

};

treeChart.prototype.drawChart = function() {

// First get tree data for both directions.

this.treeData = {};

var self = this;

self.directions.forEach(function(direction) {

self.treeData[direction] = _this.rootData[direction];

});

// rootName = '北京伴学科技有限公司';

rootRectWidth = _this.rootName.length * 15;

self.graphTree(self.getTreeConfig());

};

treeChart.prototype.getTreeConfig = function() {

var treeConfig = {

'margin': {

'top': 10,

'right': 5,

'bottom': 0,

'left': 5

}

}

treeConfig.chartWidth = (1600 - treeConfig.margin.right - treeConfig.margin.left);

treeConfig.chartHeight = (800 - treeConfig.margin.top - treeConfig.margin.bottom);

treeConfig.centralHeight = treeConfig.chartHeight / 2;

treeConfig.centralWidth = treeConfig.chartWidth / 6;

treeConfig.linkLength = 300;

treeConfig.duration = 500; //动画时间

return treeConfig;

};

treeChart.prototype.graphTree = function(config) {

var self = this;

var d3 = this.d3;

var linkLength = config.linkLength;

var duration = config.duration;

var hasChildNodeArr = [];

var id = 0;

var diagonal = d3.svg.diagonal()

.projection(function(d) {

return [d.y, d.x];

});

var pathFunc;

if (false) {

pathFunc = diagonal;

} else {

pathFunc = funLine;

}

var zoom = d3.behavior.zoom()

.scaleExtent([0.5, 2])

.on('zoom', redraw);

var svg = d3.select('#product_tree')

.append('svg')

.attr('width', config.chartWidth + config.margin.right + config.margin.left)

.attr('height', config.chartHeight + config.margin.top + config.margin.bottom)

.attr('xmlns','http://www.w3.org/2000/svg')

.on('mousedown', disableRightClick)

.call(zoom)

.on('dblclick.zoom', null);

var treeG = svg.append('g')

.attr('class', 'gbox')

.attr('transform', 'translate(' + config.margin.left + ',' + config.margin.top + ')');

//箭头

var markerDown = svg.append("marker")

.attr("id", "resolvedDown")

.attr("markerUnits", "strokeWidth") //设置为strokeWidth箭头会随着线的粗细发生变化

.attr("markerUnits", "userSpaceOnUse")

.attr("viewBox", "0 -5 10 10") //坐标系的区域

.attr("refX", 0) //箭头坐标

.attr("refY", 0)

.attr("markerWidth", 12) //标识的大小

.attr("markerHeight", 12)

.attr("orient", "0") //绘制方向，可设定为：auto(自动确认方向)和 角度值

.attr("stroke-width", 2) //箭头宽度

.append("path")

.attr("d", "M0,-5L10,0L0,5") //箭头的路径

.attr('fill', '#000'); //箭头颜色

// Initialize the tree nodes and update chart.

for(var d in this.directions) {

var direction = this.directions[d];

var data = self.treeData[direction];

if (typeof(data) != "undefined") {

data.x0 = config.centralHeight;

data.y0 = config.centralWidth;

data.children.forEach(collapse);

update(data, data, treeG);

}

}

function update(source, originalData, g) {

console.log(source)

var direction = originalData['direction'];

var node_class = direction + 'Node';

var link_class = direction + 'Link';

var downwardSign =1;

var nodeColor = '#8b4513';

var isExpand = false;

var nodeSpace = 160;

var tree = d3.layout.tree().sort(sortByDate).nodeSize([nodeSpace, 0]);

var nodes = tree.nodes(originalData);

var links = tree.links(nodes);

var offsetY = -config.centralHeight;

nodes.forEach(function(d) {

d.y = downwardSign * (d.depth * linkLength) + config.centralWidth;

d.x = d.x - offsetY;

if(d.name == 'origin') {

d.x = config.centralHeight;

d.y += downwardSign * 0; // 左右两树图根节点之间的距离

}

});

// Update the node.

var node = g.selectAll('g.' + node_class)

.data(nodes, function(d) {

return d.id || (d.id = ++id);

});

var nodeEnter = node.enter().append('g')

.attr('class', node_class)

//.classed('alink',true)//为选择名称而添加的统一class

.attr('data-text', function(d) {

return d.name;

})

.attr('transform', function(d) {

return 'translate(' + source.y0 + ',' + source.x0 + ')';

})

.style('cursor', function(d) {

return(d.name == 'origin') ? '' : (d.children || d._children) ? 'pointer' : '';

});

// .on('click', click);

nodeEnter.append("svg:rect")

.attr("x", function(d) {

return(d.name == 'origin') ? -(rootRectWidth / 2) : 95;

})

.attr("y", function(d) {

return(d.name == 'origin') ? -20 : -16;

})

.attr("width", function(d) {

return(d.name == 'origin') ? rootRectWidth : 150;

})

.attr("height", 40)

.attr("rx", 10)

.style("stroke", function(d) {

return(d.name == 'origin') ? "#0505ee" : "#CCC";//外边框颜色

})

.style("fill", function(d) {

return(d.name == 'origin') ? "#0080E3" : "#FFF";//节点背景色

});

nodeEnter.append('circle')

.attr('r', 1e-6);

nodeEnter.append("text")

.attr("class", "linkname")

.attr("x",function(d) {

return(d.name == 'origin') ? '0' : '170';

})

.attr('dy', function(d) {

return(d.name == 'origin') ? '.35em' : '-3';

})

.attr("text-anchor",'middle')

.attr('fill', '#337ab7')

.text(function(d) {

if(d.name == 'origin') {

// return ((forUpward) ? '根节点TOP' : '根节点Bottom');

return _this.rootName;

}

if(d.repeated) {

return '[Recurring] ' + d.name;

}

return(d.name.length > 10) ? d.name.substr(0, 10) : d.name;

})

.style({

'fill-opacity': 1e-6,

'fill': function(d) {

if(d.name == 'origin') {

return '#fff';

}

},

'font-size': function(d) {

return(d.name == 'origin') ? 14 : 13;

},

'cursor': "pointer"

})

.on('click', Change_modal);

nodeEnter.append("text")

.attr("class", "linkname")

.attr("x",function(d) {

return(d.name == 'origin') ? '0' : '170';

})

.attr("dy", function(d) {

return(d.name == 'origin') ? '0' :'9';

})

.attr("text-anchor",'middle')

.text(function(d) {

return d.name.substr(10, d.name.length);

})

.style({

'fill': '#337ab7',

'font-size': function(d) {

return(d.name == 'origin') ? 14 : 13;

},

'cursor': "pointer"

});

// .on('click', Change_modal);

nodeEnter.append("text")

.attr("x",function(d) {

return(d.name == 'origin') ? '0' : '170';

})

.attr("dy", function(d) {

return(d.name == 'origin') ? '.35em' : '20';

})

.attr("text-anchor",'middle')

.attr("class", "linkname")

.style("fill", "#7F7F7F")

.style('font-size', 10)

.text(function(d) {

var str = (d.name == 'origin') ? '' :"认缴金额:"+ d.amount +"万";

return(str.length > 13) ? str.substr(0, 13) + ".." : str;

});

nodeEnter.append("text")

.attr("x", "30")

.attr("dy", function(d) {

return(d.name == 'origin') ? '.35em' :'-5';

})

.attr("text-anchor", "start")

.attr("class", "linkname")

.style("fill", "green")

.style('font-size', 10)

.text(function(d) {

return(d.name == 'origin') ? "" : d.ratio;

});

nodeEnter.append("text")

.attr("x", '35')

.attr("dy", function(d) {

return(d.name == 'origin') ? '.35em' :'15';

})

.attr("text-anchor", "start")

.attr("class", "linkname")

.style("fill", "#0ba4ec")

.style('font-size', 10)

.text(function(d) {

return(d.name == 'origin'||parseFloat(d.ratio.substring(0,3)) <= 50) ? "" : '控股';

});

// Transition nodes to their new position.原有节点更新到新位置

var nodeUpdate = node.transition()

.duration(duration)

.attr('transform', function(d) {

return 'translate(' + d.y + ',' + d.x + ')';

});

nodeUpdate.select('circle')

.attr('r', function(d) {

return(d.name == 'origin') ? 0 : (hasChildNodeArr.indexOf(d) == -1) ? 0 : 6;

})

.attr('cx', function(d) {

return(d.name == 'origin') ? -20 : 251;

})

.style('fill', function(d) {

return hasChildNodeArr.indexOf(d) != -1 ? "#fff" : "";

// if (d._children || d.children) { return "#fff"; } else { return "rgba(0,0,0,0)"; }

})

.style('stroke', function(d) {

return hasChildNodeArr.indexOf(d) != -1 ? "#8b4513" : "";

// if (d._children || d.children) { return "#8b4513"; } else { return "rgba(0,0,0,0)"; }

})

.style('fill-opacity', function(d) {

if(d.children) {

return 0.35;

}

})

// Setting summary node style as class as mass style setting is

// not compatible to circles.

.style('stroke-width', function(d) {

if(d.repeated) {

return 5;

}

});

//代表是否展开的+-号

nodeEnter.append("svg:text")

.attr("class", "isExpand")

.attr("x", "251")

.attr("dy", function(d) {

return 3;

})

.attr("text-anchor", "middle")

.style("fill", "#000")

.text(function(d) {

if(d.name == 'origin') {

return '';

}

return hasChildNodeArr.indexOf(d) != -1 ? "+" : "";

/* if (d._children || d.children) {

return "+";

} */

})

.on('click',click);

nodeUpdate.select('text').style('fill-opacity', 1);

var nodeExit = node.exit().transition()

.duration(duration)

.attr('transform', function(d) {

return 'translate(' + source.y + ',' + source.x + ')';

})

.remove();

nodeExit.select('circle')

.attr('r', 1e-6);

nodeExit.select('text')

.style('fill-opacity', 1e-6);

var link = g.selectAll('path.' + link_class)

.data(links, function(d) {

return d.target.id;

});

link.enter().insert('path', 'g')

.attr('class', link_class)

.attr('stroke',function(d){

return '#8b4513';

})

.attr('fill',"none")

.attr('stroke-width','1px')

.attr('opacity', 0.5)

.attr('d', function(d) {

var o = {

x: source.x0,

y: source.y0

};

return pathFunc({

source: o,

target: o

});

})

.attr("marker-end", function(d) {

return "url(#resolvedDown)";

}) //根据箭头标记的id号标记箭头;

.attr("id", function(d, i) {

return "mypath" + i;

});

link.transition()

.duration(duration)

.attr('d', pathFunc);

link.exit().transition()

.duration(duration)

.attr('d', function(d) {

var o = {

x: source.x,

y: source.y

};

return pathFunc({

source: o,

target: o

});

})

.remove();

nodes.forEach(function(d) {

d.x0 = d.x;

d.y0 = d.y;

});

function Change_modal () {

_this.Modal = true

}

function click(d) {

if(forUpward) {

} else {

if(d._children) {

console.log('对外投资--ok')

} else {

console.log('对外投资--no')

}

}

isExpand = !isExpand;

if(d.name == 'origin') {

return;

}

if(d.children) {

d._children = d.children;

d.children = null;

d3.select(this).text('+')

} else {

d.children = d._children;

d._children = null;

// expand all if it's the first node

if(d.name == 'origin') {

d.children.forEach(expand);

}

d3.select(this).text('-')

}

update(d, originalData, g);

}

}

function expand(d) {

if(d._children) {

d.children = d._children;

d.children.forEach(expand);

d._children = null;

}

}

function collapse(d) {

if(d.children && d.children.length != 0) {

d._children = d.children;

d._children.forEach(collapse);

d.children = null;

hasChildNodeArr.push(d);

}

}

function redraw() {

treeG.attr('transform', 'translate(' + d3.event.translate + ')' +

' scale(' + d3.event.scale + ')');

}

function disableRightClick() {

// stop zoom

if(d3.event.button == 2) {

console.log('No right click allowed');

d3.event.stopImmediatePropagation();

}

}

function sortByDate(a, b) {

var aNum = a.name.substr(a.name.lastIndexOf('(') + 1, 4);

var bNum = b.name.substr(b.name.lastIndexOf('(') + 1, 4);

return d3.ascending(aNum, bNum) ||

d3.ascending(a.name, b.name) ||

d3.ascending(a.id, b.id);

}

};

var d3GenerationChart = new treeChart(d3);

d3GenerationChart.drawChart();

};

var funLine = function(obj) { //折线

var s = obj.source;

//console.log('获取折线对象1：'+s.y);

var sy = (s.name == 'origin' ? s.y+60 :s.y+260);

//console.log('获取折线对象2：'+sy);

var t = obj.target;

var ty = (t.name == 'origin' ? t.y+90 :t.y+85);

return "M"+sy+","+s.x+"L"+(sy+(ty-sy)/2)+","+s.x+"L"+(sy+(ty-sy)/2)+","+t.x+"L"+ty+","+t.x;

}

var downloadfun = function() { //下载

// 注释该方法为svg 直接下载

// var SvgSaver = require('svgsaver'); // if using CommonJS environment

// var svgsaver = new SvgSaver(); // creates a new instance

// var svg = document.querySelector('#product_tree'); // find the SVG element

// svgsaver.asSvg(svg); // save as SVG

var g = document.getElementById('product_tree').getElementsByTagName('g')[0].getBBox();

var gbox = document.getElementById('product_tree').getElementsByClassName('gbox')[0];

var x = -g.x;//计算偏移位置

var y = -g.y;

gbox.style.transform = "translate(" + x + 'px' + "," + y + "px" + ") scale(1)"; //偏移位置

var svgbox = $('#product_tree svg')

var boxwidth = svgbox.width;

var boxheight = svgbox.height;

svgbox.attr('width', g.width)

svgbox.attr('height', g.height)

var canvas = document.createElement("canvas");

var c = canvas.getContext('2d');

//新建Image对象

//svg内容

var svg = document.getElementById('product_tree').innerHTML;

var img = new Image();

img.src = 'data:image/svg+xml,' + unescape(encodeURIComponent(svg));//svg内容中可以有中文字符

img.src = 'data:image/svg+xml,' + svg;//svg内容中不能有中文字符

img.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svg)));

//图片初始化完成后调用

img.onload = function() {

//将canvas的宽高设置为图像的宽高

canvas.width = img.width;

canvas.height = img.height+60;

c.fillStyle = "#fff";

c.fillRect(0, 0, canvas.width, canvas.height);

c.drawImage(img, 0, 30);

//canvas画图片

var a = document.createElement("a");

a.download = "png";

a.href= canvas.toDataURL("image/png");

a.click();

}

//图片转换为base64后 传给后端 发邮件

gbox.style.transform = ''

// svgbox.attr('width',boxwidth)

// svgbox.attr('height',boxheight)

svgbox.attr('width',1100)

svgbox.attr('height',600)

// 结束

}

Tranyn.X
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jOrgChart树形图插件
郭晓湉
07-26 7203
项目要做组织架构图，要把它做成自上而下的树形结构。 一、说明（1）通过后台查询数据库，生成树形数组结构，返回到前台。（2）需要引入的js插件和css文件：　　①jquery.jOrgChart.css　　②jquery.min.js　　③jquery.jOrgChart.js（3）使用jOrgChart插件，根据返回的数据将其子节点加入到相应的<li></li>中。首先，我们的数据表应该要有 id
JS横向树（组织结构）
06-01
NULL 博文链接：https://wangdingxin.iteye.com/blog/2298298
d3+jQuery横向树图，可展开
weixin_43085797的博客
04-17 2080
效果图 实现： <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="gqct.css"> <title>d3+jQuery横向树图</title&gt...
js实现树形结构
ernesto的博客
08-15 1518
js实现树形结构 1、html 2、js加载数据 $(function() { loadTree(); }); function loadTree() { $.ajax({ async:true, cache:false, type:'get', data:'orgId=610', url: 'sysDepartment/loadTree', success:function(dat...
树形图jQuery插件jOrgChart
07-10
jOrgChart插件，用于在页面中动态生成树形图结构，具体的使用方法，可见https://blog.csdn.net/rhx_1989/article/details/80982428
jQuery横向树枝结构图特效特效代码
03-20
【jQuery横向树枝结构图特效】是一种使用JavaScript库jQuery和SVG（Scalable Vector Graphics）技术实现的视觉展示效果。在IT行业中，这种特效通常用于表示复杂的组织结构、公司股权结构或者逻辑关系图，使得信息更...
jQuery横向树枝结构图特效.zip
10-10
jQuery横向树枝结构图特效是一种常见的网页交互元素，用于呈现数据或信息层次结构，例如组织架构、网站导航或者项目关系。这种特效通过JavaScript库jQuery实现，结合CSS样式来达到动态、美观的效果。在网页设计中，...
jQuery横向树枝结构图特效
06-24
"jQuery横向树枝结构图特效"是一个专门用于创建公司控股集团股份结构图的工具，它利用jQuery库和SVG（Scalable Vector Graphics）技术，以高效且美观的方式展现企业间的层级关系。 jQuery是一个广泛使用的...
jQuery基于svg绘制横向树枝结构图特效源码.zip
11-18
《jQuery基于SVG绘制横向树枝结构图特效源码详解》 在现代网页开发中，视觉效果的呈现往往能提升用户体验，而树枝结构图作为一种常见的数据展示方式，被广泛应用于组织架构、流程图等领域。jQuery作为一款强大的...
使用JQuery MiniUI,json数据构建TreeGrid(树图)
ラピスラズリ(Dawn)的笔记本
01-26 292
index.html直接上代码. 需要引用MiniUI的boot.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Tree大数据量:10000</title> <script s...
jquery树状图
08-24
jquery树状图
SVG经典入门(SVG应用指南) 完整带目录
04-30
SVG经典入门(SVG应用指南) 完整带目录
zTree树形图实例(jQuery 树插件)--菜单侧边栏
qq_43155489的博客
08-27 705
zTree的树形图显示、右键事件、新增节点、修改节点、删除节点、选中节点等功能。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../frames/zTree_v3/css/zTreeStyl...
css+jq横向树的实现
若晨工作室
07-31 4839
最近工作中有个UE设计是横向树的展示，查找了网上的一些资料并没有发现横向树的代码，于是自己根据实际需求利用::before和::after伪元素加上jq去简单实现，以后有机会争取再进行优化。 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt...
【Echarts】基于Echarts的横向组织结构图：修改树图(横向、连接线由曲线转为直角线)
浪荡子爱自由的博客
11-09 5030
最终效果： 基于echart树图的横向组织结构图（连接线为直角线）完整代码​​​​​​​，包括echart.js文件和网页代码。 实现步骤： 点击查看从左至右树状图官方示例，效果以及代码如下： myChart.showLoading(); //显示Loading标志； var myChart = echarts.init(document.getElementById('页面中div的id')); $.get('data/asset/data/flare....
tree前端实现（tree控件与tabs控件的使用）
m0_54546762的博客
09-10 459
一.tree控件 1.第一种： 树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。 缺陷：①样式缺陷 ②不好做数据的渲染，树形结构的动态显示 <div class="easyui-panel" style="padding:5px"> <ul class="easyui-tree"> <li> &l
vue横向树结构_vue树形结构的实现
weixin_39838362的博客
12-19 561
Tree组件是典型的递归组件，其他的诸如菜单组件都属于这⼀一类，也是相当常见的。组件设计Tree组件最适合的结构是无序列列表ul，创建一个递归组件Item表示Tree选项，如果当前Item存在 children，则递归渲染子树，以此类推;同时添加一个标识管理理当前层级item的展开状态。实现Item组件{{model.title}}[{{open ? '-' : '+'}}]export defa...
treeTable.js 生成树形结构
opfan的博客
04-09 6734
效果如下 引入js和css html结构 在table中设置id属性，每个tr中都有id=node-id的属性 每个子节点必须有child-of-node-id  属性，child-of-node-id 的值必须等于 父节点的node-id值  表格中行的展示必须按照树的展开顺序来，即传递过来的List必须是有序的，且与树展开后的顺序一致 $("#menus-ta
jquery 树形穿梭框插件
最新发布
01-09
jQuery 树形穿梭框插件是一种基于jQuery库开发的可用于在网页中呈现树状结构的穿梭框插件。这个插件可以帮助用户通过直观的方式在不同的树形结构之间进行选择和移动数据。 该插件具有以下主要特点： 1. 功能丰富：jQuery 树形穿梭框插件具备多种功能，包括多层级树形展示、复选框选择、拖拽排序、搜索和过滤等。这些功能使得用户可以方便地进行树形数据的选择和移动操作。 2. 可定制性强：插件提供了丰富的配置选项，可以根据具体需求进行自定义配置。用户可以自定义树形的样式、节点的图标、展开和折叠的方式等，以及其他一些行为和事件的处理。 3. 兼容性好：该插件基于jQuery库开发，因此兼容性较好，可以在主流浏览器中正常运行。同时，插件还提供了一定的兼容性处理，可以适应不同的浏览器和版本。 4. 使用简单：使用该插件非常简单，只需引入相关的JavaScript和CSS文件，并在页面中加入相应的HTML结构和JavaScript代码即可。插件提供了清晰的文档和示例，方便用户快速上手使用。 5. 生态丰富：jQuery 树形穿梭框插件是一个开源项目，在开发者社区中有较大的用户群体和活跃度。用户可以通过社区获得技术支持、交流经验，并且可能会有新的更新版本和功能拓展。 综上所述，jQuery 树形穿梭框插件是一款功能丰富、可定制性强且易于使用的插件，适用于在网页中实现树形数据的选择和移动操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值