<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul {
padding-left: 20px;
}
li {
line-height: 24px;
}
ul, li {
list-style: none;
}
.treeArrow{
display: inline-block;
width: 10px;
height: 10px;
margin:-10px 5px 0 0;
border-top: 2px solid #000;
border-right: 2px solid #000;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
vertical-align: middle;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
cursor: pointer;
}
.treeArrow.expansionTree{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.l-children{
overflow: hidden;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-ms-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
}
.l-body input[name='tree-checkbox'],
.l-children input[name='tree-checkbox']{
margin:0 5px;
width: 16px;
height: 16px;
cursor: pointer;
background-color: transparent;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="redStar">
<ul id="tree">
</ul>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
var data = [
{
fid: "2",
fname: "用户列表",
ischecked: true,
pfid: "59",
treedataindex: 61,
children: [
{
fid: "100099",
pfid: "2",
fname: "用户列表-列表查询",
pType: "2",
ischecked: true
},
{
fid: "100098",
pfid: "2",
fname: "用户列表-列表编辑",
pType: "2",
ischecked: true
}
]
},
{
fid: "3",
fname: "用户列表1",
ischecked: false,
pfid: "59",
treedataindex: 61,
children: [
{
fid: "100097",
pfid: "3",
fname: "用户列表-列表查询1",
pType: "2",
ischecked: false,
children: [
{
fid: "100092",
pfid: "100097",
fname: "用户列表-1",
pType: "2",
ischecked: false
},
{
fid: "100091",
pfid: "100097",
fname: "用户列表-1",
pType: "2",
ischecked: false
}
]
},
{
fid: "100096",
pfid: "3",
fname: "用户列表-列表编辑1",
pType: "2",
ischecked: false
}
]
},
{
fid: "4",
fname: "用户列表2",
ischecked: true,
pfid: "60",
treedataindex: 61,
children: [
{
fid: "100095",
pfid: "4",
fname: "用户列表-列表查询2",
pType: "2",
ischecked: true
},
{
fid: "100094",
pfid: "4",
fname: "用户列表-列表编辑2",
pType: "2",
ischecked: true
}
]
},
];
//扩展树形插件
$.extend({
renderTree: function (id, data) {
function createTree(id, data) {
var _this = this;
this.id = id;
_this.renderData = function (data) {
var str = '<li><div class="l-body">' +
'<span class="'+(data.children?'treeArrow':'')+'"></span>' +
'<input class="tree-checkbox" ' +
'value="' + data.fid + '" ' +
'name="tree-checkbox" ' +
'' + (data.ischecked ? 'checked' : '') + ' ' +
'type="checkbox">' + data.fname + '</div>';
if (data.children) {
str += ' <div class="l-children">' +
'<ul>';
$.each(data.children, function (i, v) {
str += _this.renderData(v)
});
str += '</ul>' +
'</div>'
}
str += '</li>';
return str;
};
var str = '';
$.each(data, function (i, v) {
str += _this.renderData(v);
});
$(id).html(str);
this.setChecked = function (dom) {
$(dom).find('input[name="tree-checkbox"]').prop('checked', true);
if ($(dom).closest('.l-children').length) {
_this.setChecked($(dom).closest('.l-children').siblings('.l-body'))
}
};
$(id).on('change', 'input[name="tree-checkbox"]', function () {
if ($(this).attr('checked')) {
//向下查找,获取兄弟元素
$(this).closest('.l-body').siblings('.l-children').find('input[name="tree-checkbox"]').prop('checked', true);
//向上查找,选中上级元素
if ($(this).closest('.l-children').length) {
_this.setChecked($(this).closest('.l-children').siblings('.l-body'))
}
} else {
//向下查找,获取兄弟元素
$(this).closest('.l-body').siblings('.l-children').find('input[name="tree-checkbox"]').prop('checked', false);
}
}).on('click','.treeArrow',function () {
if($(this).hasClass('expansionTree')){
$(this).closest('.l-body').siblings('.l-children').height(0)
}else{
$(this).closest('.l-body').siblings('.l-children').height('auto')
}
})
}
createTree.prototype.handleChecked = function () {
$(this.id).on('change', 'input[name="tree-checkbox"]', function () {
console.log($(this).attr('checked'));
})
};
createTree.prototype.getChecked = function () {
console.log(1);
var arr = [];
$(this.id).find('input[name="tree-checkbox"]:checked').each(function () {
console.log($(this).val());
arr.push($(this).val());
});
console.log(arr);
return arr;
};
return new createTree(id, data);
}
});
//使用
var trees = $.renderTree('#tree', data);
trees.getChecked()
})
</script>
</body>
</html>
扫一扫
221
01-19
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
