本意只是创建个可以操作表格增删查改的JS类，后来需求越来越多，想法越来越多，于是有了下面这个ＪＳ类
将页面HTMl组件和JS结合起来控制，加上Ajax来更新数据，有种如鱼的水的感觉。
ＪＳ类：
View Code
//控件使用说明: //1.HTML 命名规则： clesstba="GTab"为将要为这个表格创建的JS对象 //<table id="GoodsTab" clesstba="GTab" width="100%" border="0" cellpadding="0" cellspacing="1" // class="tabpageAll"> //</table> //2.JS //<script> // //新建表格对象,表格Id为CurrencyTab，简称CTab // CTab = new Tab("CurrencyTab", "CTab"); // //表格显示列头文字 // CTab.TabCells = ["币种ID", "币种名称", "是否本位币", "最后修改人", "最后修改时间", "状态"]; // //表格文字对应字段 // CTab.TabCellsField = ["Currency_Id", "CurrencyName", "IsNational", "Modifier", "Modified", "Status"]; // //需要隐藏的字段 // CTab.TabHideCells = ["Currency_Id"]; // //导航字段 // CTab.TabIsNeviKeys = ["Currency_Id", "CurrencyName"]; // //删除字段 // CTab.IsDelKeys = ["Currency_Id", "Status"]; // //初始化表格 // CTab.TabInit(); //</script> //name:表格ID、Dec：表格名称简写、cells：列头 function Tab(name, Dec, cells) { //属性 this.TabName = name; //表格名称 this.TabDec = Dec; //表格名称简写 this.TabCells = null; //列头 this.TabCellsField = null; //列头字段 this.TabHideCells = null; //隐藏的列 this.TabIsNeviKeys = null; //导航列 this.IsDelKeys = null; //删除条件字段 this.TrIndex = ""; //当前选中行 this.NeviValue=""; //当前选中行导航列值 this.DelValue = ""; //当前选中行删除列值 this.TdCells = 0; //表格列数 this.TrRow = 0; //表格行数 this.TrRowCount = 0; //表格总行数（保证唯一，只增无减） //事件 this.TabInit = TabInit; //表格初始化 this.TabAdd = TabAdd; //添加行 this.TabDelete = TabDelete; //删除行 this.TabClear = TabClear; //清楚所有行 this.TabSelectTr = TabSelectTr; //选中行事件 this.TabSelectTrVal = TabSelectTrVal; //整行选中处理方法 this.TabSetNeviValue = TabSetNeviValue; //设置导航列值 this.TabSetDelValue = TabSetDelValue; //设置删除关键值 this.TabGetNeviValue = TabGetNeviValue; //获取导航列值 this.TabGetDelValue = TabGetDelValue; //获取删除关键值 this.TabGetNeviKeys = TabGetNeviKeys; } //该方法不在Tab空组件中 //全选、全不选 function TabCheckAll(TabDec) { $("input[name='CK" + TabDec + "']").each(function (i) { this.checked = $("#CKH" + TabDec).is(':checked'); }); } //表格初始化 function TabInit() { var TabRow = document.createElement("tr"); TabRow.id = this.TabDec + "Tr" + this.TrRow; TabRow.align = "center"; this.TabShowCells = new Array(); var TabThSelect = document.createElement("th"); TabThSelect.id = this.TabDec + "Th" + this.TdCells; var ckh = document.createElement("<input type='checkbox' >"); ckh.id = "CKH" + this.TabDec; var TabDec = this.TabDec; ckh.onclick = function () { TabCheckAll(TabDec) }; TabThSelect.appendChild(ckh); TabRow.appendChild(TabThSelect); this.TabShowCells.push(this.TdCells); this.TdCells++; for (var i = 0; i < this.TabCells.length; i++) { var TabTh = document.createElement("th"); TabTh.id = this.TabDec + "Th" + this.TdCells; TabTh.innerHTML = this.TabCells[i].toString(); TabRow.appendChild(TabTh); //是否隐藏列 var CellField = this.TabCellsField[i]; var isShowCell = $.grep(this.TabHideCells, function (n, y) { return n == CellField; }); if (isShowCell.length > 0) { $(TabTh).hide(); } this.TdCells++; } $(TabRow).appendTo("#" + this.TabName); this.TrRowCount++; } //添加行 function TabAdd(TabData) { //列数 this.TdCells = 0; var TabRow = document.createElement("tr"); TabRow.id = this.TabDec + "Tr" + this.TrRowCount; TabRow.align = "center"; //添加复选框 var TabTdSelect = document.createElement("td"); TabTdSelect.id = this.TabDec + "Td" + this.TrRowCount + this.TdCells; TabTdSelect.innerHTML = "<input type=\"checkbox\" name=\"CK" + this.TabDec + "\" id=\"CK" + this.TabDec + this.TrRowCount + "\" />"; TabRow.appendChild(TabTdSelect); this.TdCells++; //循环列，建立TD，并设置点击事件 for (var i = 0; i < this.TabCells.length; i++) { var TabTd = document.createElement("td"); TabTd.id = this.TabDec + "Td" + this.TrRowCount + this.TdCells; TabTd.innerHTML = TabData[i]; //设置事件为整行选择事件 TabTd.onclick = function () { eval($(this).parent().parent().parent().attr("clessTba")).TabSelectTr(this.parentNode.id); }; TabRow.appendChild(TabTd); //是否隐藏列 var CellField = this.TabCellsField[i]; var isShowCell = $.grep(this.TabHideCells, function (n, y) { return n == CellField; }); if (isShowCell.length > 0) { $(TabTd).hide(); } this.TdCells++; } $(TabRow).appendTo("#" + this.TabName); //创建表格后选择当前创建表格 this.TabSelectTr(TabRow.id); this.TrRow++; //这个行总数增加和行数增加是因为，行总数（TrRowCount）确保唯一性，当删除时，只减行总数 this.TrRowCount++; } //删除 function TabDelete() { //删除行 $("#" + this.TrIndex).remove(); var _Tablength = document.getElementById(this.TabName).rows.length; //如果当前还有数据行，则设置选中行为第一行 if (_Tablength >= 2) { this.TrIndex = document.getElementById(this.TabName).rows[1].id; this.TabSelectTr(this.TrIndex); } this.TrRow--; } //清除所有数据行，并初始化表格计数 function TabClear() { var _Tablength = document.getElementById(this.TabName).rows.length; var Tab = document.getElementById(this.TabName); for (i = 0; i < _Tablength - 1; i++) { $("#" + Tab.rows[1].id).remove(); } this.TdIndex = ""; //当前选中单元格 this.TrIndex = ""; //当前选中行 this.TrRow = 0; //表格行数 this.TrRowCount = 1; //表格总行数 } //行选择事件 function TabSelectTr(TrId) { //以前选择行颜色 if (this.TrIndex != "") { $("#" + this.TrIndex + " td").each(function () { $(this).css("background-color", "#FFFFFF"); }); } //设置当前行颜色 var Color = "#D5F4FE"; $("#" + TrId.toString() + " td").each(function () { $(this).css("background-color", Color); }); this.TrIndex = TrId; this.TabSetNeviValue(TrId); this.TabSetDelValue(TrId); this.TabSelectTrVal(TrId); } function TabSelectTrVal(TrId) { } //设置导航值 function TabSetNeviValue(TrId) { this.NeviValue = this.TabGetNeviValue(TrId); } //获取导航值 function TabGetNeviValue(TrId) { var NeviValue = ""; var i = -1; var TabCellsField = this.TabCellsField; var TabIsNeviKeys = this.TabIsNeviKeys; $("#" + TrId + " td").each(function () { //这里i!=-1 是因为第一列是复选框,真实数据从第二列开始 if (i != -1) { //是否导航值 var CellField = TabCellsField[i]; var isNeviCell = $.grep(TabIsNeviKeys, function (n, y) { return n == CellField; }); if (isNeviCell.length > 0) { NeviValue += $(this).html(); NeviValue += "|"; } } i++; }); return NeviValue.substring(0, NeviValue.length - 1); } //设置删除条件值 function TabSetDelValue(TrId) { this.DelValue = this.TabGetDelValue(TrId); } //设置删除条件值 function TabGetDelValue(TrId) { var DelValue = ""; var i = -1; var TabCellsField = this.TabCellsField; var IsDelKeys = this.IsDelKeys; $("#" + TrId + " td").each(function () { //这里i!=0 是因为第一列是复选框,真实数据从第二列开始 if (i != -1) { //是否导航值 var CellField = TabCellsField[i]; var isDelCell = $.grep(IsDelKeys, function (n, y) { return n == CellField; }); if (isDelCell.length > 0) { DelValue += $(this).html(); DelValue += "|"; } } i++; }); return DelValue.substring(0, DelValue.length - 1); } //得到导航关键字 function TabGetNeviKeys() { var _Tablength = document.getElementById(this.TabName).rows.length; var Tab = document.getElementById(this.TabName); var NeviKeys = ""; for (i = 0; i < _Tablength - 1; i++) { if ($("#" + Tab.rows[i].id + " :checkbox").is(':checked')) { NeviKeys += this.TabGetNeviValue(Tab.rows[i].id) + "☆"; } } if (NeviKeys != "") { NeviKeys = NeviKeys.substring(0, NeviKeys.length - 1); } return NeviKeys; }
调用：
页面HTML
<table width="100%" border="0" cellpadding="0" cellspacing="1" class="contenttable" id="ListPageTab" clesstba="LTab" > </table>
JS调用：
var LTab; //表格对象 //初始化 $(document).ready(function () { //新建表格对象 LTab = new Tab("ListPageTab", "LTab"); LTab.TabCells = ["id","名称","年龄"]; LTab.TabCellsField = ["id","name","age"] LTab.TabHideCells =["id"]; LTab.TabIsNeviKeys =["id"]; LTab.IsDelKeys = ["id"]; //初始化表格 LTab.TabInit(); })
