数据操作主函数是指当用户执行查询操作时，直接调用主函数即可，不用烦琐地调用每一个基本函数，主函数把所有与数据相关的操作都封装在一起，仅提供一个参数接口，方便用户快速进行调用，该函数可以把查询的数据以数据表格的形式显示在页面的指定包含框中。
exeshow()函数功能比较复杂，它需要对用户传入的数据进行处理，然后根据传入的SQL字符串从数据库中获取查询数据，并调用showData()函数把数据显示出来，然后为每行数据绑定操作按钮，同时定义删除数据函数，并绑定到对应的“删除”按钮上，同时还要判断当前记录是否包含详细信息，如果包含还要绑定“查看”按钮，单击“查看”按钮，能够打开新的数据表格显示该条记录包含的详细子信息。最后为每行数据绑定排序函数，并返回当前查询的所有数据的总金额。演示效果如图1所示。
图1 执行数据显示对外接口函数
详细代码如下。
//===================================
//外部调用接口：显示表格化数据，并进行初始化，设置各种关系和逻辑，绑定事件
//本函数内部调用子函数：showData()、rowtoForm()、updateData()、insertData()
//参数
//paraobj {
//box：显示数据的包含框，DOM对象
//rs：显示的记录集，数据集合对象
//table：显示数据对应的数据表，字符串
//sql：记录集查询的SQL字符串，以备查看和调用，可选，字符串
//}
//返回值：如果操作成功返回true，否则返回false
var exeshow = function(paraobj){
var _paraobj = paraobj; //保存参数
var paraobj = {};
for(var name in _paraobj){
paraobj[name] = _paraobj[name];
}
if(!paraobj.box){ //处理参数值
alert("没有指明显示数据的包含框！");
return false;
}else
var box = paraobj.box;
if(!paraobj.table){
alert("没有指明当前表格显示数据对应的数据表！");
return false;
}else
var table = paraobj.table;
if(!paraobj.rs){
alert("没有传递记录集！");
return false;
}else
var rs = paraobj.rs;
box.style.display = "block"; //显示包含框
box.innerHTML = ""; //清空包含框
//绘制数据表格，显示数据
//如果返回false，则跳出
if(!showdata(paraobj))
return false;
//===================================
//为数据表格绑定数据行基本操作行为
//===================================
//编辑数据行行为
var edit = document.getElementsByClassName("edit", box);
for(var i=0; i< edit.length; i++){ //遍历可编辑行
edit[i].style.cursor = "pointer"; //设置样式
edit[i].onclick = (function(cell){ //绑定单击事件
return function(){
var row = cell.parentNode; //获取行
paraobj.row = row; //为参数对象添加row属性，并传递当前表格行对象
var childnodes = row.childNodes; //获取行内所有单元格
var rowoldvalue = rowtoForm(paraobj); //使行处于可编辑状态
//为参数对象添加rowoldvalue属性，并传递当前表格行原来的数据
paraobj.rowoldvalue = rowoldvalue;
cell.innerHTML = ""; //清空“编辑”文字
var _editclick = cell.onclick; //临时保存编辑单元格的编辑行为
cell.onclick = null; //清空编辑单元格行为，避免影响其他操作
var btn = document.createElement("input"); //创建确定按钮
btn.type = "button";
btn.id = "addrs";
btn.value = "确定";
cell.appendChild(btn);
btn.onclick = function(){ //绑定行为
updateData(paraobj); //把修改的数据保存到数据库
cell.innerHTML = "修改"; //恢复默认名称
cell.onclick = _editclick; //恢复默认行为
}
var btn = document.createElement("input"); //创建取消按钮
btn.type = "button";
btn.id = "clearform";
btn.value = "取消";
cell.appendChild(btn);
btn.onclick = function(){ //绑定行为
resettData(paraobj); //恢复表格行原来的值
cell.innerHTML = "修改"; //恢复默认名称
cell.onclick = _editclick; //恢复默认行为
}
}
})(edit[i]);
}
//删除数据行行为
var del = document.getElementsByClassName("del",paraobj.box);
for(var i=0; i< del.length; i++){ //遍历可删除行
del[i].style.cursor = "pointer"; //设置样式
del[i].onclick = (function(cell){ //绑定click事件
return function(){
var row = cell.parentNode; //获取当前行对象
paraobj.row = row; //为参数对象添加row属性，并传递当前表格行对象
delData(paraobj); //执行删除操作
}
})(del[i]);
}
//查看记录明细行为
var detail = document.getElementsByClassName("detail",paraobj.box);
if(detail){
for(var i=0; i< detail.length; i++){ //遍历所包含或者可能包含明细的记录行
var cell = detail[i]; //获取当前单元格对象
var rowlist = cell.parentNode.childNodes;
for(var j=0; j<rowlist.length; j++){ //获取当前行记录的id和upperid值
var td = rowlist[j];
var classname = td.className;
if(classname == "id" ){
var id = parseInt(td.firstChild.data);
}
if(classname == "title"){
var uppertitle = td.firstChild.data;
}
}
if(!id){
alert("当前记录没有指定ID值！");
return false;
}
if(tableobj[table][4]!="no"){ //判断当前数据表是否包含明细或子类表格
//定义查询字符串
var sql = "select * from " + tableobj[table][4] + " where upperid = "+ id;
var detailrs = requeryrs(sql); //查询数据
//如果查找到明细记录
//或者如果没有找到明细表，但是是分类数据表，则可以显示空表格，允许进行添加操作
if(!detailrs.eof || tableobj[table][5]=="class" ){
cell.style.cursor = "pointer"; //设置当前单元格指针样式
//如果是分类表，则当前记录没有明细记录，则修改单元格中的文本
if(tableobj[table][5]=="class" && detailrs.eof)
cell.innerHTML = "添加";
detail[i].onclick = (function(cell, id){ //绑定单击行为
return function(){
var row = cell.parentNode.childNodes //高亮显示当前行
for(var i=0;i<row.length;i++){
row[i].style.color = "red";
}
var sql = "select * from " + tableobj[table][4] + " where upperid = "+ id;
var subrs = requeryrs(sql); //查询数据
if(cell.parentNode.nextSibling != null){ //如果不是tbody内最后一行
var cankao = cell.parentNode.nextSibling; //获取下一行对象
//获取下一行第二个单元格的x轴坐标
var x = getElementLeft(cankao.firstChild.nextSibling);
var y = getElementTop(cankao); //获取下一行y轴坐标
}
//如果是tbody内最后一行，则获取tfoot内第一行对象的偏移坐标
else{
var cankao = cell.parentNode.parentNode.nextSibling.firstChild;
var x = getElementLeft(cankao.firstChild) + 58;
var y = getElementTop(cankao);
}
var x1 = getElementLeft(cell); //获取当前单元格的x轴坐标
var w = x1-x; //计算明细表格框显示的宽度
if(box === showdetailbox){ //显示明细表格包含框，并进行定位
var subbox = showsubdetailbox
}else{
var subbox = showdetailbox;
}
subbox.style.display = "block";
subbox.style.position = "absolute";
subbox.style.left = (x-10) + "px";
subbox.style.top = (y-5) + "px";
subbox.style.width = w + "px";
exeshow({ //在明细包含框中绘制数据表格，显示当前记录的明细信息
box : subbox,
rs : subrs,
table: tableobj[table][4],
sql: sql,
id: id, //为参数对象添加id属性，并传递当前表格行的记录编号
cell: cell,
showsubinfo: true //指示在信息面板中显示缩进信息，而不是覆盖信
//息板上原信息
});
//为明细表包含框添加清除明细表格包含框的行为按钮
var del_detailbox = document.getElementsByClassName("del_detailbox",subbox)[0];
if(del_detailbox){
del_detailbox.style.cursor = "pointer";
del_detailbox.onclick = (function(box){
return function(){
if(box === showdetailbox){
box.innerHTML = "";
box.style.display = "none";
showsubdetailbox.innerHTML = "";
showsubdetailbox.style.display = "none";
}else {
box.innerHTML = "";
box.style.display = "none";
}
//恢复父表中当前行的字体色
var row = cell.parentNode.childNodes
for(var i=0;i<row.length;i++){
if(row[i].className == "price"){
row[i].style.color = "red";
}
else {
row[i].style.color = "#000";
}
}
paraobj.cell = null;
}
})(subbox)
}
}
})(cell, id);
}
else{ //否则清空单元格内的文本
cell.innerHTML = "";
}
closers(detailrs); //关闭记录集
}
}
}
//添加新数据
var add = document.getElementsByClassName("add_tfoot",paraobj.box);
if(add){
for(var i=0; i< add.length; i++){
var cell = add[i];
cell.style.cursor = "pointer"; //设置样式
cell.onclick = (function(cell){
return function(){
var row = cell.parentNode;
paraobj.row = row; //为参数对象添加row属性，并传递当前表格行对象
newrowForm(paraobj);
}
})(cell);
}
}
//===================================
//为数据表绑定查询、隐藏等外部操作行为
//===================================
//单列搜索
var searchcol = document.getElementsByClassName("searchcol",paraobj.box);
var tenptable = paraobj.box.getElementsByTagName("table")[0];
var tbody = paraobj.box.getElementsByTagName("tbody")[0];
var tr = tbody.firstChild;
var tdlist = tr.childNodes;
if(searchcol){
for(var i=0; i< searchcol.length; i++){
var cell = searchcol[i];
var input = cell.lastChild;
input.onkeyup = (function(input,i){
return function(){
var td = tdlist[i];
var classname = td.className;
//调用uiTableFilter插件
$.uiTableFilter( $(tenptable) , this.value, fieldobj[classname][1]);
}
})(input,i);
}
}
//隐藏单列搜索
searchcol[0].parentNode.style.display = "none";
searchcol[0].parentNode.ok = false;
var colsearch = document.getElementsByClassName("colsearch",paraobj.box)[0];
if(colsearch){
colsearch.onclick = function(){
if(!searchcol[0].parentNode.ok){
searchcol[0].parentNode.style.display = "";
searchcol[0].parentNode.ok = true;
colsearch.style.color = "blue";
}
else{
searchcol[0].parentNode.style.display = "none";
searchcol[0].parentNode.ok = false;
colsearch.style.color = "red";
}
}
}
//表格搜索
var tableinput = document.getElementsByClassName("tableinput",paraobj.box)[0];
tableinput.style.display = "none";
tableinput.ok = false;
var input = tableinput.firstChild
input.onkeyup = function(){
$.uiTableFilter( $(tenptable) , this.value); //调用uiTableFilter插件
}
//隐藏表格搜索
var tablesearch = document.getElementsByClassName("tablesearch",paraobj.box)[0];
if(tablesearch){
tablesearch.onclick = function(){
if(!tableinput.ok){
tableinput.style.display = "";
tableinput.ok = true;
tablesearch.style.color = "blue";
}
else{
tableinput.style.display = "none";
tableinput.ok = false;
tablesearch.style.color = "red";
}
}
}
//数据列隐藏
var hidecol = document.getElementsByClassName("hidecol",paraobj.box);
var tenptable = paraobj.box.getElementsByTagName("table")[0];
var tbody = paraobj.box.getElementsByTagName("tbody")[0];
var thlist = paraobj.box.getElementsByTagName("th");
var tr = tbody.firstChild;
var tdlist = tr.childNodes;
if(hidecol){
for(var n=0; n< hidecol.length; n++){
var cell = hidecol[n];
var input = cell.lastChild;
input.onclick = (function(input,n){
return function(){
var td = tdlist[n];
var classname = td.className;
if(!input.checked){
input.checked = false;
thlist[n].style.display = "none";
var checkedfield = document.getElementsByClassName(classname,paraobj.box);
for(var j=0; j< checkedfield.length; j++){
var subcell = checkedfield[j];
subcell.style.display = "none";
}
}
else{
input.checked = true;
thlist[n].style.display = "";
var checkedfield = document.getElementsByClassName(classname,paraobj.box);
for(var j=0; j< checkedfield.length; j++){
var subcell = checkedfield[j];
subcell.style.display = "";
}
}
}
})(input,n);
}
}
//隐藏数据列隐藏
hidecol[0].parentNode.style.display = "none";
hidecol[0].parentNode.ok = false;
var colhide = document.getElementsByClassName("colhide",paraobj.box)[0];
if(colhide){
colhide.onclick = function(){
if(!hidecol[0].parentNode.ok){
hidecol[0].parentNode.style.display = "";
hidecol[0].parentNode.ok = true;
colhide.style.color = "blue";
}
else{
hidecol[0].parentNode.style.display = "none";
hidecol[0].parentNode.ok = false;
colhide.style.color = "red";
}
}
}
//统计金额
if(tableobj[paraobj.table][5] != "class"){
var sumprice = document.getElementsByClassName("sumprice",paraobj.box)[0];
var pricelist = document.getElementsByClassName("price",paraobj.box);
var sumpricevalue = document.getElementsByClassName("sumpricevalue",paraobj.box)[0];
sumprice.onclick = function(){
sumprice.style.color = "blue";
var sumvalue = 0;
var sumn = 0;
for(var i=0; i< pricelist.length; i++){
var cell = pricelist[i];
var show = cell.parentNode.style.display;
if(show !="none"){
var value = cell.innerHTML;
value = parseFloat(value);
sumvalue += value;
sumn += 1;
}
}
sumvalue = sumvalue.toFixed(2);
sumpricevalue.innerHTML = "（共<b class='red'>"+ sumn +"</b>条记录，合计<b class='red'>" +
sumvalue +"</b>元）<span class='clearsumprice'>清除信息</span>";
var clearsumprice = document.getElementsByClassName("clearsumprice",paraobj.box)[0];
clearsumprice.onclick = function(){
sumpricevalue.innerHTML = '';
sumprice.style.color = "red";
}
}
}
//===================================
//为数据表绑定外围信息服务
//===================================
showinfobox.style.display = "block";
if(!paraobj.showsubinfo){
if(paraobj.tabletitle){
showinfobox.innerHTML = "<h2>查询表格：<span class='red blod'>" + paraobj.tabletitle +
"</span></h2>";
paraobj.tabletitle = null;
}
else{
showinfobox.innerHTML = "<h2>查询表格：<span class='red blod'>" + tableobj[paraobj.table][1]
+ "</span></h2>";
}
showinfobox.innerHTML += "<p>查询语句：<span class='red blod'>" + paraobj.sql + "</span></p>";
var rstemp = requeryrs(paraobj.sql);
var rstempn = 0;
var rstempprice = 0;
while(!rstemp.eof){
rstempn += 1;
if(tableobj[paraobj.table][5] != "class" && tableobj[paraobj.table][6] != 3){
rstempprice += parseFloat(rstemp("price")) ;
}
rstemp.moveNext;
}
if(rstempn >0){
showinfobox.innerHTML += "<p>查询记录：<span class='red blod'>" + rstempn + "条</span>
</p>";
}
if(rstempprice>0){
showinfobox.innerHTML += "<p>合计金额：<span class='red blod'>" + parseFloat(rstempprice).
toFixed(2) + "</span>元</p>";
}
showinfobox.innerHTML += "<p>";
showinfobox.innerHTML += "<input type='button' value = '清空数据表' class='cleartable' />";
showinfobox.innerHTML += "<input type='button' value = '清空全部信息' class='cleartableinfo' />";
showinfobox.innerHTML += "</p>";
var cleartableinfo = document.getElementsByClassName("cleartableinfo")[0];
var cleartable = document.getElementsByClassName("cleartable")[0];
cleartableinfo.onclick = function(){
showinfobox.innerHTML = "";
showinfobox.style.display = "none";
showtablebox.innerHTML = "";
showtablebox.style.display = "none";
showdetailbox.innerHTML = "";
showdetailbox.style.display = "none";
showsubdetailbox.innerHTML = "";
showsubdetailbox.style.display = "none";
}
cleartable.onclick = function(){
showtablebox.innerHTML = "";
showtablebox.style.display = "none";
showdetailbox.innerHTML = "";
showdetailbox.style.display = "none";
showsubdetailbox.innerHTML = "";
showsubdetailbox.style.display = "none";
}
//初始化菜单中控制数据表的按钮状态
window.hidetable = false;
hidetable.innerHTML = "隐藏数据表";
}
}