panda/bettafish-company
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【地图配置】初始化三个不同的交互式世界地图

Browse Source
This commit is contained in:
戒酒的李白
2024-07-03 12:34:03 +08:00
parent 6356721e47
commit 5468d64e64
6 changed files with 7264 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/table-treeview.js
+528
View File
@@ -0,0 +1,528 @@
$(function () {
var
$table = $('#tree-table-1'),
rows = $table.find('tr');
rows.each(function (index, row) {
var
$row = $(row),
level = $row.data('level'),
id = $row.data('id'),
$columnName = $row.find('td[data-column="name"]'),
children = $table.find('tr[data-parent="' + id + '"]');
if (children.length) {
var expander = $columnName.prepend('' +
'<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
'');
children.hide();
expander.on('click', function (e) {
var $target = $(e.target);
if ($target.hasClass('glyphicon-chevron-right')) {
$target
.removeClass('glyphicon-chevron-right')
.addClass('glyphicon-chevron-down');
children.show();
} else {
$target
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
reverseHide($table, $row);
}
});
}
$columnName.prepend('' +
'<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
'');
});
// Reverse hide all elements
reverseHide = function (table, element) {
var
$element = $(element),
id = $element.data('id'),
children = table.find('tr[data-parent="' + id + '"]');
if (children.length) {
children.each(function (i, e) {
reverseHide(table, e);
});
$element
.find('.glyphicon-chevron-down')
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
children.hide();
}
};
});
// table 2
$(function () {
var
$table = $('#tree-table-2'),
rows = $table.find('tr');
rows.each(function (index, row) {
var
$row = $(row),
level = $row.data('level'),
id = $row.data('id'),
$columnName = $row.find('td[data-column="name"]'),
children = $table.find('tr[data-parent="' + id + '"]');
if (children.length) {
var expander = $columnName.prepend('' +
'<span class="treegrid-expander glyphicon glyphicon-plus"></span>' +
'');
children.hide();
expander.on('click', function (e) {
var $target = $(e.target);
if ($target.hasClass('glyphicon-plus')) {
$target
.removeClass('glyphicon-plus')
.addClass('glyphicon-minus');
children.show();
} else {
$target
.removeClass('glyphicon-minus')
.addClass('glyphicon-plus');
reverseHide($table, $row);
}
});
}
$columnName.prepend('' +
'<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
'');
});
// Reverse hide all elements
reverseHide = function (table, element) {
var
$element = $(element),
id = $element.data('id'),
children = table.find('tr[data-parent="' + id + '"]');
if (children.length) {
children.each(function (i, e) {
reverseHide(table, e);
});
$element
.find('.glyphicon-chevron-down')
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
children.hide();
}
};
});
// table 3
$(function () {
var
$table = $('#tree-table-3'),
rows = $table.find('tr');
rows.each(function (index, row) {
var
$row = $(row),
level = $row.data('level'),
id = $row.data('id'),
$columnName = $row.find('td[data-column="name"]'),
children = $table.find('tr[data-parent="' + id + '"]');
if (children.length) {
var expander = $columnName.prepend('' +
'<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
'');
children.hide();
expander.on('click', function (e) {
var $target = $(e.target);
if ($target.hasClass('glyphicon-chevron-right')) {
$target
.removeClass('glyphicon-chevron-right')
.addClass('glyphicon-chevron-down');
children.show();
} else {
$target
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
reverseHide($table, $row);
}
});
}
$columnName.prepend('' +
'<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
'');
});
// Reverse hide all elements
reverseHide = function (table, element) {
var
$element = $(element),
id = $element.data('id'),
children = table.find('tr[data-parent="' + id + '"]');
if (children.length) {
children.each(function (i, e) {
reverseHide(table, e);
});
$element
.find('.glyphicon-chevron-down')
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
children.hide();
}
};
});
// table 4
$(function () {
var
$table = $('#tree-table-4'),
rows = $table.find('tr');
rows.each(function (index, row) {
var
$row = $(row),
level = $row.data('level'),
id = $row.data('id'),
$columnName = $row.find('td[data-column="name"]'),
children = $table.find('tr[data-parent="' + id + '"]');
if (children.length) {
var expander = $columnName.prepend('' +
'<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
'');
children.hide();
expander.on('click', function (e) {
var $target = $(e.target);
if ($target.hasClass('glyphicon-chevron-right')) {
$target
.removeClass('glyphicon-chevron-right')
.addClass('glyphicon-chevron-down');
children.show();
} else {
$target
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
reverseHide($table, $row);
}
});
}
$columnName.prepend('' +
'<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
'');
});
// Reverse hide all elements
reverseHide = function (table, element) {
var
$element = $(element),
id = $element.data('id'),
children = table.find('tr[data-parent="' + id + '"]');
if (children.length) {
children.each(function (i, e) {
reverseHide(table, e);
});
$element
.find('.glyphicon-chevron-down')
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
children.hide();
}
};
});
// table 5
$(function () {
var
$table = $('#tree-table-5'),
rows = $table.find('tr');
rows.each(function (index, row) {
var
$row = $(row),
level = $row.data('level'),
id = $row.data('id'),
$columnName = $row.find('td[data-column="name"]'),
children = $table.find('tr[data-parent="' + id + '"]');
if (children.length) {
var expander = $columnName.prepend('' +
'<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
'');
children.hide();
expander.on('click', function (e) {
var $target = $(e.target);
if ($target.hasClass('glyphicon-chevron-right')) {
$target
.removeClass('glyphicon-chevron-right')
.addClass('glyphicon-chevron-down');
children.show();
} else {
$target
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
reverseHide($table, $row);
}
});
}
$columnName.prepend('' +
'<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
'');
});
// Reverse hide all elements
reverseHide = function (table, element) {
var
$element = $(element),
id = $element.data('id'),
children = table.find('tr[data-parent="' + id + '"]');
if (children.length) {
children.each(function (i, e) {
reverseHide(table, e);
});
$element
.find('.glyphicon-chevron-down')
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
children.hide();
}
};
});
// table 6
$(function () {
var
$table = $('#tree-table-6'),
rows = $table.find('tr');
rows.each(function (index, row) {
var
$row = $(row),
level = $row.data('level'),
id = $row.data('id'),
$columnName = $row.find('td[data-column="name"]'),
children = $table.find('tr[data-parent="' + id + '"]');
if (children.length) {
var expander = $columnName.prepend('' +
'<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
'');
children.hide();
expander.on('click', function (e) {
var $target = $(e.target);
if ($target.hasClass('glyphicon-chevron-right')) {
$target
.removeClass('glyphicon-chevron-right')
.addClass('glyphicon-chevron-down');
children.show();
} else {
$target
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
reverseHide($table, $row);
}
});
}
$columnName.prepend('' +
'<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
'');
});
// Reverse hide all elements
reverseHide = function (table, element) {
var
$element = $(element),
id = $element.data('id'),
children = table.find('tr[data-parent="' + id + '"]');
if (children.length) {
children.each(function (i, e) {
reverseHide(table, e);
});
$element
.find('.glyphicon-chevron-down')
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
children.hide();
}
};
});
// table 7
$(function () {
var
$table = $('#tree-table-7'),
rows = $table.find('tr');
rows.each(function (index, row) {
var
$row = $(row),
level = $row.data('level'),
id = $row.data('id'),
$columnName = $row.find('td[data-column="name"]'),
children = $table.find('tr[data-parent="' + id + '"]');
if (children.length) {
var expander = $columnName.prepend('' +
'<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
'');
children.hide();
expander.on('click', function (e) {
var $target = $(e.target);
if ($target.hasClass('glyphicon-chevron-right')) {
$target
.removeClass('glyphicon-chevron-right')
.addClass('glyphicon-chevron-down');
children.show();
} else {
$target
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
reverseHide($table, $row);
}
});
}
$columnName.prepend('' +
'<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
'');
});
// Reverse hide all elements
reverseHide = function (table, element) {
var
$element = $(element),
id = $element.data('id'),
children = table.find('tr[data-parent="' + id + '"]');
if (children.length) {
children.each(function (i, e) {
reverseHide(table, e);
});
$element
.find('.glyphicon-chevron-down')
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
children.hide();
}
};
});
// table 8
$(function () {
var
$table = $('#tree-table-8'),
rows = $table.find('tr');
rows.each(function (index, row) {
var
$row = $(row),
level = $row.data('level'),
id = $row.data('id'),
$columnName = $row.find('td[data-column="name"]'),
children = $table.find('tr[data-parent="' + id + '"]');
if (children.length) {
var expander = $columnName.prepend('' +
'<span class="treegrid-expander glyphicon glyphicon-chevron-right"></span>' +
'');
children.hide();
expander.on('click', function (e) {
var $target = $(e.target);
if ($target.hasClass('glyphicon-chevron-right')) {
$target
.removeClass('glyphicon-chevron-right')
.addClass('glyphicon-chevron-down');
children.show();
} else {
$target
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
reverseHide($table, $row);
}
});
}
$columnName.prepend('' +
'<span class="treegrid-indent" style="width:' + 15 * level + 'px"></span>' +
'');
});
// Reverse hide all elements
reverseHide = function (table, element) {
var
$element = $(element),
id = $element.data('id'),
children = table.find('tr[data-parent="' + id + '"]');
if (children.length) {
children.each(function (i, e) {
reverseHide(table, e);
});
$element
.find('.glyphicon-chevron-down')
.removeClass('glyphicon-chevron-down')
.addClass('glyphicon-chevron-right');
children.hide();
}
};
});