用js实现了表格数据管理的以下几个功能:
-
- 点击添加按钮可以添加一个空的可以修改的记录。
- 点击表格单元格可以修改文本。
- 修改后实现了保存的接口。
- 如果添加了新的记录而未做任何修改值都为null,保存全部时将被忽略。
- 保存全部时只保存修改过的值,原有的数据不再重复保存。
- 刷新时如果数据未保存则提示保存。
- 点击删除时如果是临时添加的无效数据则直接删除,如果保存过的记录则实现了记录删除的接口。
考虑到嵌套的比较多就没有使用form表单,用js直接解析dom来分离出了要传递的数据。
先看下运行的效果图:
js的代码如下,其中注释较多就不解释了:
var JCRUD= function (tb,colnum,saveAllBtn,add,ajaxSaver,allAjaxSaver,ajaxDeler){ |
var del = tb.getElementsByTagName( 'a' ); |
var span = tb.getElementsByTagName( 'span' ); |
var delEvent = function (){ |
var dder = this .parentNode.parentNode; |
for ( var i=0; i<dder.children.length-1; i++) |
this .data[i] = dder.children[i].children[0].firstChild.nodeValue; |
for ( var j=0; j< this .data.length; j++){ |
if ( this .data[j]!== 'null' ){ |
for ( var k=0; k<ctr.length; k++) if (ctr[k]===dder) ctr.splice(k,1); |
dder.parentNode.removeChild(dder); |
if (tag==1) ajaxDeler.call( this ); |
var spanEvent = function (){ |
var value = this .firstChild.nodeValue; |
var input = document.createElement( 'input' ); |
this .parentNode.appendChild(input); |
this .parentNode.removeChild( this ); |
input.onblur = function (){ |
var span = document.createElement( 'span' ); |
span.appendChild(document.createTextNode( this .value? this .value: 'null' )); |
this .parentNode.appendChild(span); |
this .parentNode.removeChild( this ); |
var tr = span.parentNode.parentNode |
btns = tds[colnum-1].getElementsByTagName( 'a' ); |
for ( var i=0; i<btns.length; i++){ |
if (btns[i].firstChild.nodeValue!= '保存' ){ |
var saver = document.createElement( 'a' ); |
saver.appendChild(document.createTextNode( '保存' )); |
tds[tds.length-1].appendChild(saver); |
for ( var k=0; k<ctr.length; k++) |
if (tag==-0) ctr.push(tr); |
saver.onclick= function (){ |
for ( var i=0; i<tds.length-1; i++) |
this .data[i] = this .parentNode.parentNode.children[i].children[0].firstChild.nodeValue; |
for ( var i=ctr.length-1; i>=0; i--){ |
if ( this .parentNode.parentNode===ctr[i]){ |
this .parentNode.removeChild( this ); |
for ( var i in del) del[i].onclick = delEvent; |
for ( var j in span) span[j].onclick = spanEvent; |
add.onclick = function (){ |
var tbody = tb.children[0]; |
var tr = document.createElement( 'tr' ); |
for ( var j=0; j<colnum; j++){ |
var td = document.createElement( 'td' ); |
var del = document.createElement( 'a' ); |
del.appendChild(document.createTextNode( '删除' )); |
var span = document.createElement( 'span' ); |
span.appendChild(document.createTextNode( 'null' )); |
var getAllData = function (){ |
for ( var i=0; i<ctr.length; i++){ |
for ( var j=0; j<ctr[i].children.length-1; j++) |
allData[i].push(ctr[i].children[j].children[0].firstChild.nodeValue); |
ctr[i].children[colnum-1].removeChild(ctr[i].children[colnum-1].children[1]); |
saveAllBtn.onclick = function (){ |
this .allData = getAllData(); |
window.onbeforeunload = function (){ |
var y = confirm( '数据还未保存,是否保存数据?' ) |
调用时要传几个参数,有几个参数为函数,每个参数都有注释,调用代码如下:
var table = document.getElementById( 'tb' ), |
saveAllBtn = document.getElementById( 'SaveAll' ), |
addBtn = document.getElementById( 'Add' ), |
alert( '要传的数据为data数据:"' + this .data+ '"此处调用ajax实现后台保存!实现略……' ); |
alert( '要传的数据为allDtat数组:"' + this .allData+ '"此处调用ajax实现后台保存!实现略……' ); |
alert( '要传的数据为data数据:"' + this .data+ '"此处调用ajax实现后台删除!实现略……' ); |
window.JCRUD(table,colnum,saveAllBtn,addBtn,saver,allSaver,deler); |
可以看出saver、allSaver、deler都是需要自己实现的,这与后台的实现相关,与本例子也没有主要关系也就不实现了,只把要传的数据传过来供使用。
下面做了一个比较完整的例子,可以修改一下,实际看一下运行效果:
P.S.:转载请注明本文原始链接。