再次向大家致意
我回头来展示我开发的这个网格组件。 使用此网格，您可以像普通表格一样显示数据，删除所需的行，添加行，导入数据，调用确定的函数以及编辑已经存在的数据
您需要使用什么网格？ 具有标准标记和ID的表以调用脚本，该脚本会将表转换为网格
参数：
tabelaID =>将变成网格的表的ID
maxLinha =>网格将显示的行数，如果行数超过该数目，网格将创建一个滚动条
edicao =>用于控制网格版本的数组。 此参数接受2个数组，
梅多多和尤尼科edicao.metodo =>数组，用于确定如何编辑各列。 使用null表示没有版本，“ default”表示免费版本，并使用带有该选项的select数组
edicao.unico ==>数组，该数组确定一个数据在网格中是否唯一，例如：最后一列的编辑方法为“ yes”和“ no”，但您只想在所有网格中使用1 yes。 可能的值为null或相应数组的唯一索引
valor =>接受一个称为tag的数组，该数组确定如何填充网格的值。 可能的值为“默认”以将所有数据放入单元格，特定的标记名称（如“ span”）仅从该列中的跨度获取数据，为null则跳过该列
largura =>数组，以百分比确定每个列的宽度（最大值= 100）
alinhamento =>确定每个列（左，右，居中，对齐）的倾斜度的数组
fn =>确定按下添加按钮时将调用的函数
参数可能看起来很难传递，但是该示例对此有所帮助
文件：grid.css
.grid {border-collapse:collapse; table-layout:fixed; width:560px; font:normal 11px arial;}
.grid th {background:url(img/headerBg.jpg); border-right:1px solid #ddd; border-bottom:1px solid #ddd; color:#fff}
.grid td, .grid table td {text-indent:5px; white-space:nowrap; overflow:hidden; padding:0px 5px 0px 0;}
.grid table td {height:20px}
.grid .holder {overflow:auto; width:559px;}
.grid table {table-layout:fixed; border-collapse:collapse; width:540px; font:normal 11px arial}
.grid .scrollBar {border:0; background:transparent; width:13px;}
.grid .par td {background:#fff}
.grid .impar td {background:#eee}
.grid .hover td {background:#D9E8FB}
.grid span {display:none}
* html .grid .scrollBar {width:16px}
.divEdicao {background:#eee; border:1px solid #aaa; position:absolute; width:auto; height:18px;}
.divEdicao img {margin:2px; cursor:pointer}
.overlay {position:absolute; background:#eee; filter:alpha(opacity=0); -moz-opacity:0; opacity:0}
.botaoAdicionar {position:relative; cursor:pointer; margin-bottom:10px}
.botaoAceitar, .botaoCancelar {position:absolute; cursor:pointer;}
.edicaoTable {position:absolute; font:normal 11px arial; background:#fff; border-collapse:collapse; table-layout:fixed}
.edicaoTable td {white-space:nowrap; overflow:hidden; padding:0;}
.edicaoTable td input {margin:0; padding:0; width:100%; height:20px; overflow:hidden; font:normal 11px arial; padding:2px}
.edicaoTable td select {margin:0; padding:0; width:100%; height:18px; overflow:hidden; font:normal 11px arial;} [HTML]
<！DOCTYPE HTML PUBLIC“-// W3C // DTD HTML 4.0 Transitional // EN”>
<头>
<title>网格</ title>
</ head>
<link rel =“ stylesheet” href =“ grid.css”>
<script src =“ grid.js”> </ script>
<脚本>
window.onload = function（）{
gridUm = new criarGrid（'tabelaUm'，10，{metodo：[null，null，null，['Yes'，'No']]]，unico：[null，null，null，1]}，{tag：[' default'，null，null，'default']}，[40,25,15,20]，['left'，'right'，'center'，'right']，'abrirPopup（“ filtro.html”） '）;
}
函数abrirPopup（url）{
janela = window.open（URL，'Janela'，'width = 670，height = 400，let t = 200，top = 200，toolbar = no'）
}
</ script>
<身体>
<table id =“ tabelaUm”>
<thead>
<tr>
<th>标题1 </ th>
<th>标题2 </ th>
<th>标题3 </ th>
<th>标题4 </ th>
</ tr>
</ thead>
<身体>
<tr>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>否</ td>
</ tr>
<tr>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>否</ td>
</ tr>
<tr>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>否</ td>
</ tr>
<tr>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>否</ td>
</ tr>
<tr>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>是</ td>
</ tr>
<tr>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>否</ td>
</ tr>
<tr>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>否</ td>
</ tr>
<tr>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>虚拟文字</ td>
<td>否</ td>
</ tr>
</ tbody>
</ table>
<br> <br> <br>
<button onclick =“ alert（gridUm.valores）”>勇气</ button>
</ body>
</ html>
[/ HTML]
// Author: Romulo do Nascimento Ferreira //
// Email: romulo.nf@gmail.com //
/* parametros
tabelaID: id da tabela que vai ter funcionalidade de grid
maxLinha: número máximo de linhas a ser mostrado (para criação de barra de rolagem)
edicao: array que determina o método de edição de cada coluna
edicao.metodo:
default = edicao livre
null = sem edicao
array de string = opcoes da combo box
edicao.unico:
index = indica exclusividade de uma opcao de index x
valor: array que determina qual elemento vai compor o array valores[] do grid
default = conteudo da coluna
null = nenhum valor atribuido
tag = atribui ao array o conteudo da tag escolhida dentro da coluna
ex: span
largura: array com a porcentagem de largura de cada coluna
alinhamento: array que determina o alinhamento de cada coluna (left,right,center,justify)
fn: função chamada pelo botao de adicionar na parte inferior do grid
*/
function criarGrid(tabelaID,maxLinha,edicao,valor,largura,alinhamento,fn) {
this.tempInputs = new Array()
this.tabela = document.getElementById(tabelaID)
this.tabela.className = "grid"
this.cabecalho = this.tabela.tHead
this.numCol = this.cabecalho.rows[0].cells.length
this.corpo = this.tabela.tBodies[0]
this.tamMax = this.corpo.rows.length > 0 ? (maxLinha * this.corpo.rows[0].offsetHeight) : maxLinha * 20
this.holder = this.tabela.parentNode
this.alturaCabecalho = this.cabecalho.rows[0].offsetHeight
this.opcoes = false
this.protecao = false
this.larguraCol = typeof largura !="undefined" ? largura : null
this.alignCol = typeof alinhamento !="undefined" ? alinhamento : null
if (edicao && edicao !=false) {
this.metodoEdicao = typeof edicao.metodo !="undefined" ? edicao.metodo : null
this.unicoEdicao = typeof edicao.unico !="undefined" ? edicao.unico : null
}
if (edicao == false) {
this.bloquearEdicao = true
}
if (valor) this.tagValor = typeof valor.tag !="undefined" ? valor.tag : null
this.organizarEstrutura(fn)
this.executarTarefas()
}
criarGrid.prototype.verificarTamanho = function() {
this.alturaLinhas = 0
for (x=0; x<this.novoCorpo.rows.length; x++) { this.alturaLinhas += this.novoCorpo.rows[x].offsetHeight }
this.divHolder.style.height = this.alturaLinhas < this.tamMax ? this.alturaLinhas + "px" : this.tamMax + "px"
}
criarGrid.prototype.associarValores = function() {
if (!this.valores) this.valores = new Array()
if (this.valores.length > this.novoCorpo.rows.length) this.valores = new Array()
for (x=0; x<this.novoCorpo.rows.length; x++) {
this.valores[x] = new Array()
for (y=0; y<this.numCol; y++) {
if (this.tagValor[y] != "default") {
tag = this.novoCorpo.rows[x].cells[y].getElementsByTagName(this.tagValor[y])
tag.length > 0 ? conteudo = tag[0].innerHTML : conteudo = null
}
else { conteudo = this.novoCorpo.rows[x].cells[y].innerHTML }
if (this.tagValor[y] != "undefined" || this.tagValor[y] != null) { this.valores[x][y] = conteudo }
}
}
}
criarGrid.prototype.funcoesTr = function() {
for (x=0; x<this.novoCorpo.rows.length; x++) {
this.novoCorpo.rows[x].grid = this
// zebraRows
x%2 == 0 ? this.novoCorpo.rows[x].className = "par" : this.novoCorpo.rows[x].className = "impar"
// mouseover event
this.novoCorpo.rows[x].onmouseover = function() {
if (this.grid.timer) clearTimeout(this.grid.timer)
this.grid.mostrarOpcoes(this)
this.className += " hover"
}
// mouseout event
this.novoCorpo.rows[x].onmouseout = function() {
var _this = this.grid
this.grid.timer = setTimeout(function(){_this.removerOpcoes()},500)
this.className = this.className.substring(0,this.className.indexOf(" hover"))
}
}
}criarGrid.prototype.criarOverlay = function() {
if (this.protecao) this.removerOverlay()
this.protecao = true
this.overlay = document.createElement("div")
this.overlay.className = "overlay"
this.overlay.style.height = this.divHolder.offsetHeight + 10 + "px"
this.overlay.style.width = this.novaTabela.offsetWidth + 10 + "px"
this.overlay.style.top = this.divHolder.offsetTop + this.tabela.offsetTop + this.alturaCabecalho + "px"
this.overlay.style.left = this.divHolder.offsetLeft + this.tabela.offsetLeft + "px"
this.holder.appendChild(this.overlay)
this.divHolder.style.overflow = "hidden"
this.botaoAdicionar.style.display = "none"
}
criarGrid.prototype.removeOverlay = function() {
this.overlay.parentNode.removeChild(this.overlay)
this.protecao = false
this.divHolder.style.overflow = "auto"
this.botaoAdicionar.style.display = ""
}
criarGrid.prototype.editarLinha = function(tr) {
this.removerOpcoes()
this.criarOverlay()
this.edicaoTable = document.createElement("table")
this.edicaoTable.className = "edicaoTable"
this.edicaoTbody = document.createElement("tbody")
this.cloneTr = tr.cloneNode(true)
this.edicaoTable.appendChild(this.edicaoTbody)
this.edicaoTbody.appendChild(this.cloneTr)
this.edicaoTable.style.width = tr.offsetWidth + "px"
this.edicaoTable.style.top = tr.offsetTop - this.divHolder.scrollTop + this.tabela.offsetTop + this.alturaCabecalho + "px"
this.edicaoTable.style.left = this.tabela.offsetLeft - this.divEdicaoTr.offsetWidth + "px"
// metodos de edicao
for (x=0; x<this.cloneTr.cells.length; x++) {
this.cloneTr.cells[x].style.width = tr.cells[x].offsetWidth + "px"
if (this.metodoEdicao[x] == "default") {
this.tempInputs[x] = document.createElement("input")
this.tempInputs[x].value = tr.cells[x].innerHTML
this.cloneTr.cells[x].replaceChild(this.tempInputs[x],this.cloneTr.cells[x].childNodes[0])
}
else if (this.metodoEdicao[x] && this.metodoEdicao[x].length > 1) {
this.tempInputs[x] = document.createElement("select")
for (y=0; y<this.metodoEdicao[x].length; y++) {
opcaoTemp = document.createElement("option")
opcaoTemp.value = this.metodoEdicao[x][y]
opcaoTemp.innerHTML = this.metodoEdicao[x][y]
this.tempInputs[x].appendChild(opcaoTemp)
}
this.cloneTr.cells[x].replaceChild(this.tempInputs[x],this.cloneTr.cells[x].childNodes[0])
for (y=0; y<this.tempInputs[x].options.length; y++) {
if (this.tempInputs[x].options[y].innerHTML.toLowerCase() == tr.cells[x].innerHTML.toLowerCase()) {
this.tempInputs[x].options[y].selected = "selected"
}
}
}
else {
this.tempInputs[x] = document.createElement("input")
this.tempInputs[x].value = tr.cells[x].innerHTML
this.tempInputs[x].disabled = "disabled"
this.cloneTr.cells[x].replaceChild(this.tempInputs[x],this.cloneTr.cells[x].childNodes[0])
}
}
this.holder.appendChild(this.edicaoTable)
this.botaoAceitar = new Image()
this.botaoAceitar.src = "img/aceitar.gif"
this.botaoAceitar.className = "botaoAceitar"
this.botaoAceitar.grid = this
this.botaoAceitar.onclick = function() { this.grid.aceitarEdicao(tr) }
this.botaoAceitar.style.top = parseInt(this.edicaoTable.style.top) + this.edicaoTable.offsetHeight/6 + "px"
this.botaoAceitar.style.left = parseInt(this.edicaoTable.style.left) + this.edicaoTable.offsetWidth + 3 + "px"
this.holder.appendChild(this.botaoAceitar)
this.botaoCancelar = new Image()
this.botaoCancelar.src = "img/cancelar.gif"
this.botaoCancelar.className = "botaoCancelar"
this.botaoCancelar.grid = this
this.botaoCancelar.onclick = function() { this.grid.cancelarEdicao() }
this.botaoCancelar.style.top = parseInt(this.botaoAceitar.style.top) + "px"
this.botaoCancelar.style.left = parseInt(this.edicaoTable.style.left) + this.edicaoTable.offsetWidth + 20 + "px"
this.holder.appendChild(this.botaoCancelar)
}
criarGrid.prototype.aceitarEdicao = function(tr) {
for (x=0; x<this.tempInputs.length; x++) {
if (this.unicoEdicao[x] && this.tempInputs[x].value != this.metodoEdicao[x][this.unicoEdicao[x]]) {
for (y=0; y<this.novoCorpo.rows.length; y++) {
this.novoCorpo.rows[y].cells[x].innerHTML = this.metodoEdicao[x][this.unicoEdicao[x]]
}
}
tr.cells[x].innerHTML = this.tempInputs[x].value
}
this.cancelarEdicao()
this.executarTarefas()
}
criarGrid.prototype.cancelarEdicao = function() {
this.removeOverlay()
this.edicaoTable.parentNode.removeChild(this.edicaoTable)
this.botaoCancelar.parentNode.removeChild(this.botaoCancelar)
this.botaoAceitar.parentNode.removeChild(this.botaoAceitar)
}
criarGrid.prototype.excluirLinha = function(tr) {
this.removerOpcoes()
tr.parentNode.removeChild(tr)
this.executarTarefas()
}
criarGrid.prototype.removerOpcoes = function() {
if (this.divEdicaoTr) this.divEdicaoTr.parentNode.removeChild(this.divEdicaoTr)
this.opcoes = false
}
criarGrid.prototype.mostrarOpcoes = function(tr) {
if (this.opcoes) this.removerOpcoes()
this.opcoes = true
this.divEdicaoTr = document.createElement("div")
this.divEdicaoTr.className = "divEdicao"
this.divEdicaoTr.grid = this
this.divEdicaoTr.onmouseover = function() { if (this.grid.timer) clearTimeout(this.grid.timer) }
this.divEdicaoTr.onmouseout = function() {
var _this = this.grid
this.grid.timer = setTimeout(function(){_this.removerOpcoes()},500)
}
this.holder.appendChild(this.divEdicaoTr)
if (!this.bloquearEdicao) {
this.botaoEditar = new Image()
this.botaoEditar.grid = this
this.botaoEditar.alt = "Clique aqui para editar a linha " + (tr.rowIndex + 1)
this.botaoEditar.title = "Clique aqui para editar a linha " + (tr.rowIndex + 1)
this.botaoEditar.onclick = function() { this.grid.editarLinha(tr) }
this.botaoEditar.src = "img/lapis.gif"
this.divEdicaoTr.appendChild(this.botaoEditar)
}
this.botaoExcluir = new Image()
this.botaoExcluir.grid = this
this.botaoExcluir.alt = "Clique aqui para excluir a linha " + (tr.rowIndex + 1)
this.botaoExcluir.title = "Clique aqui para excluir a linha " + (tr.rowIndex + 1)
this.botaoExcluir.onclick = function() { this.grid.excluirLinha(tr) }
this.botaoExcluir.src = "img/lixeira.gif"
this.divEdicaoTr.appendChild(this.botaoExcluir)
this.divEdicaoTr.style.top = tr.offsetTop - this.divHolder.scrollTop + this.tabela.offsetTop + this.alturaCabecalho + "px"
this.divEdicaoTr.style.left = tr.offsetWidth + this.tabela.offsetLeft - this.divEdicaoTr.offsetWidth + "px"
}
criarGrid.prototype.executarTarefas = function() {
this.corrigirLargura()
this.funcoesTr()
this.associarValores()
this.verificarTamanho()
}
criarGrid.prototype.corrigirLargura = function() {
for (x=0; x<this.numCol; x++) {
if (this.larguraCol) { this.cabecalho.rows[0].cells[x].style.width = this.larguraCol[x] + "%" }
for (y=0; y<this.novoCorpo.rows.length; y++) {
if (this.larguraCol) { this.novoCorpo.rows[y].cells[x].style.width = this.larguraCol[x] + "%" }
if (this.alignCol) { this.novoCorpo.rows[y].cells[x].style.textAlign = this.alignCol[x] }
}
}
}
criarGrid.prototype.organizarEstrutura = function(fn) {
this.scrollBar = document.createElement("th")
this.trHolder = document.createElement("tr")
this.tdHolder = document.createElement("td")
this.divHolder = document.createElement("div")
this.novaTabela = document.createElement("table")
this.novoCorpo = document.createElement("tbody")
while (this.corpo.rows.length > 0) { this.novoCorpo.appendChild(this.corpo.rows[0]) }
this.scrollBar.innerHTML = " "
this.scrollBar.className = "scrollBar"
this.cabecalho.rows[0].appendChild(this.scrollBar)
this.corpo.appendChild(this.trHolder)
this.tdHolder.colSpan = (this.numCol+1)
this.trHolder.appendChild(this.tdHolder)
this.divHolder.className = "holder"
this.divHolder.style.height = this.tamMax + "px"
this.tdHolder.appendChild(this.divHolder)
this.divHolder.appendChild(this.novaTabela)
this.novaTabela.appendChild(this.novoCorpo)
this.botaoAdicionar = new Image()
this.botaoAdicionar.onmouseover = function() { this.src = "img/add2-hover.gif" }
this.botaoAdicionar.onmouseout = function() { this.src = "img/add2.gif" }
this.botaoAdicionar.className = "botaoAdicionar"
this.botaoAdicionar.src = "img/add2.gif"
this.botaoAdicionar.onclick = function() { eval(fn) }
this.holder.insertBefore(this.botaoAdicionar,this.tabela.nextSibling)
}
criarGrid.prototype.importarDados = function(tr) {
inserirTr = true
for (x=0; x<this.novoCorpo.rows.length; x++) {
conteudoAtual = this.novoCorpo.rows[x].textContent ? this.novoCorpo.rows[x].textContent : this.novoCorpo.rows[x].innerText
conteudoNovo = tr.textContent ? tr.textContent : tr.innerText
if (conteudoAtual == conteudoNovo) { inserirTr = false }
}
if (inserirTr) {
this.novoCorpo.insertRow(this.novoCorpo.rows.length)
for (x=0; x<this.numCol; x++) {
this.novoCorpo.rows[this.novoCorpo.rows.length-1].insertCell(x)
this.novoCorpo.rows[this.novoCorpo.rows.length-1].cells[x].innerHTML = tr.getElementsByTagName("td")[x].innerHTML
}
this.divHolder.scrollTop = this.divHolder.scrollHeight
this.executarTarefas()
}
else { janela.alert("Informação existente") }
} 随意使用/修改网格以达到自己的目的。
我只要求您在此保留版权。
URL波纹管是一个zip，其中包含从过滤器获取数据的网格示例，这是我已经在此处发布的另一个组件。 该文件还包含一些我在网格上使用的图像，但是您可以轻松更改这些图像以创建自定义网格。
网格和过滤器From: https://bytes.com/topic/javascript/insights/744273-grid-table-add-remove-import-edit
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
