JS可编辑的表格

来源：互联网发布：lumia950xl安装linux 编辑：程序博客网时间：2024/05/16 08:26

// 设置多个表格可编辑
function EditTables() {
for ( var i = 0; i < arguments.length; i++) {
SetTableCanEdit(arguments[i]);
}
}
var _maxRow = 0;
// 设置表格是可编辑的
function SetTableCanEdit(table, maxRow) {
_maxRow = maxRow;
for ( var i = 1; i < table.rows.length; i++) {
SetRowCanEdit(table.rows[i]);
}
}

function SetRowCanEdit(row, bool) {
for ( var j = 0; j < row.cells.length; j++) {

  // 如果当前单元格指定了编辑类型，则表示允许编辑
  var editType = row.cells[j].getAttribute("EditType");
  if (!editType) {
   // 如果当前单元格没有指定，则查看当前列是否指定
   editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");
  }
  if (editType) {
   row.cells[j].onclick = function() {
    EditCell(this, bool);
   }
  }
}

}

// 设置指定单元格可编辑
function EditCell(element, bool) {
var editType = element.getAttribute("EditType");
if (!editType) {
  // 如果当前单元格没有指定，则查看当前列是否指定
  editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex]
    .getAttribute("EditType");
}

switch (editType) {
case "TextBox":
  CreateTextBox(element, element.innerHTML);
  break;
case "DropDownList":
  CreateDropDownList(element);
  break;
case "Date":
  CreateDate(element);
  break;
case "Picker":
  CreatePicker(element,$(element).attr("value"),bool);
  break;
case "Suffix":
  CreateSuffix(element, element.innerHtml);
  break;
default:
  break;
}
}
function CreateNo(element, value) {
// 检查编辑状态，如果已经是编辑状态，跳过
var t = element.parentNode.parentNode;
var value = t.rows[t.rows.length - 1].cells[element.cellIndex].value + 1;
  // 创建文本框
  var textBox = document.createElement("INPUT");
  textBox.type = "text";
  textBox.value = value;
  // 向当前单元格添加文本框
  ClearChild(element);
  element.appendChild(textBox);
  // 改变状态变量
  t.setAttribute("CurrentRow", element.parentNode.rowIndex);

}
// 为单元格创建可编辑输入框
function CreateTextBox(element, value) {
// 检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState");
var required = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("required");
if (editState != "true") {
  // 创建文本框
  var textBox = document.createElement("INPUT");
  textBox.type = "text";
  if(required == 'required') {
   textBox.className = "EditCell_TextBox easyui-validatebox";
   $(textBox).validatebox({required:true});
  }else {
   textBox.className = "EditCell_TextBox";
  }

  // 设置文本框当前值
  if (!value) {
   value = element.getAttribute("Value") == undefined ? '' : element.getAttribute("Value");
  }
  textBox.value = value;

  // 设置文本框的失去焦点事件
  textBox.onblur = function() {
   if($(this).validatebox('isValid')) {
    CancelEditCell(this.parentNode, this.value);
   }
  }
  // 向当前单元格添加文本框
  ClearChild(element);
  element.appendChild(textBox);
  textBox.focus();
  textBox.select();

  // 改变状态变量
  element.setAttribute("EditState", "true");
  element.parentNode.parentNode.setAttribute("CurrentRow",
    element.parentNode.rowIndex);
}

}

/**
* 为单元格创建选择框@param element 元素
*
* @param value
*            默认值
* @param data
*            数据来源
*/
function CreateDropDownList(element, value) {
// 检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState");
element.setAttribute('value', '');
if (editState != "true") {
  if($(element).find('span').length > 0) {
   var combo = $(element).find('.combo');
   combo.show();
   combo.next().remove();
   return;
  }

}

}
/**
* 为单元格创建时间选择框@param element 元素
*
* @param value
*            默认值
* @param data
*            数据来源
*/
function CreateDate(element, value) {
// 检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState");
element.setAttribute('value', '');
if (editState != "true") {
  if($(element).find('span').length > 0) {
   var combo = $(element).find('.combo');
   combo.show();
   combo.next().remove();
   return;
  }
  // 创建文本框

}

}

//为单元格创建选择框
function CreatePicker(element, value, bool) {
// 检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState");
//var required = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("required");
if (editState != "true") {
  if($(element).find('span').length > 0) {
   var picker = $(element).find('input:first');
   picker.show();
   $(element).find('span').remove();
   return;
  }
  // 创建文本框
  var textBox = document.createElement("INPUT");
  textBox.className = "easyui-validatebox input-tdlarge noboder-input";
  $(textBox).attr('invalidMessage', '请选择到县一级住址！');
  textBox.type = "text";
  var id = element.parentNode.parentNode.rows[0].cells[element.cellIndex]
    .getAttribute("name")
    + element.parentNode.rowIndex;
  textBox.id = id;

  // 设置文本框当前值
  var text = element.innerText;
  if (!value) {
   value = element.getAttribute("Value");
  }
  textBox.value = value;
  ClearChild(element);
  element.appendChild(textBox);

  // 创建easyui的下拉框
  var dataSourceId = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("dataSource");
  $('#' + id).addresspicker({
   url : dataSourceId,
   steped:true,
   initValue:bool?{}:{value:value,text:text},
   zIndex : 1060,
   header:'全国',
   requireCallback:function(value) {
    return !(value && value.match('^\\d+0{5}$'));
   },
   onChange:function(value, values, names, finish) {
    if(finish) {
     // 设置address的值
     $(element.parentNode).find('td:first')[0].setAttribute("value" ,names.join(''));
     CancelEditCell($('#' + id)[0].parentNode, value, names.join(''), id);
    }
   }
  });
  $(element).on("postpaste", function() {
   $('#' + id).addresspicker('setAddress',this.firstChild.value.replace(new RegExp('-','g'),''));
  }).pasteEvents();
  if(bool) {
   $('#' + id).addresspicker('setAddress', text);
  }
  // 记录状态的改变
  element.setAttribute("EditState", "true");
  element.parentNode.parentNode.setAttribute("LastEditRow",
    element.parentNode.rowIndex);
}

}

//为单元格创建可编辑补充输入框--身份证验证
function CreateSuffix(element, value) {
// 检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState");
var required = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("required");
if (editState != "true") {
  // 创建文本框
  var textBox = document.createElement("INPUT");
  textBox.type = "text";
  if(required == 'required') {
   textBox.className = "EditCell_TextBox easyui-validatebox";
   $(textBox).validatebox({required:true});
  }else {
   textBox.className = "EditCell_TextBox easyui-validatebox";
   $(textBox).validatebox({validType:'idcard'});
  }

  // 设置文本框当前值
  if (!value) {
   value = element.getAttribute("Value") == undefined ? '' : element.getAttribute("Value");
  }
  textBox.value = value;

  // 改变状态变量
  element.setAttribute("EditState", "true");
  element.parentNode.parentNode.setAttribute("CurrentRow",
    element.parentNode.rowIndex);
}

}

// 取消单元格编辑状态
function CancelEditCell(element, value, text, id) {
element.setAttribute("Value", value);
if(id) { //如果是easyuicombotree不销毁控件
  $('#'+id).hide();
  $('#'+id).next().hide();
  $('#'+id).prev().hide();
  if(text) {
   $(element).append('<span>'+text+'</span>');
  }else {
   $(element).append('<span>'+value+'</span>');
  }
}else {
  if (text) {
   element.innerHTML = text;
  } else {
   element.innerHTML = value;
  }
}
element.setAttribute("EditState", "false");

// 检查是否有公式计算
CheckExpression(element.parentNode);
}

// 清空指定对象的所有字节点
function ClearChild(element) {
element.innerHTML = "";
}

// 添加行
function AddRow(table, index) {
if(_maxRow && table.rows.length > _maxRow) {
  return;
}
//var lastRow = table.rows[table.rows.length - 1];
var lastRow = table.rows[0];
var newRow = lastRow.cloneNode(true);
table.tBodies[0].appendChild(newRow);
$(newRow).find('th').each(function(i , n) {
  var editType = table.rows[0].cells[i].getAttribute('EditType');
  if(i == 0) {
   $(this).replaceWith('<td style="border:1px solid #ccc; text-align:center;">'+$(this).html()+'</td>');
  }else if(editType == 'No'){
   $(this).replaceWith('<td style="border:1px solid #ccc; text-align:center;">'+(table.rows.length - 1)+'</td>');
  }else if(editType == 'Text'){
   $(this).replaceWith('<td style="border:1px solid #ccc; text-align:center;">'+table.rows[0].cells[i].getAttribute('name')+'</td>');
  }else if(editType == 'Date'){
   var element = document.createElement("TD");
   element.style.border = '1px solid #ccc';
   element.style.textAlign = 'center';
   $(this).replaceWith(element);
   var required = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("required");
   var textBox = document.createElement("INPUT");
   textBox.type = "text";
   var id = element.parentNode.parentNode.rows[0].cells[element.cellIndex]
   .getAttribute("name")
   + element.parentNode.rowIndex;
   textBox.id = id;
   textBox.className = "easyui-datebox";

   // 设置文本框当前值
   //ClearChild(element);
   element.appendChild(textBox);

   // 创建easyui的下拉框
   $('#' + id).datebox({
    required : required == 'required',
    editable : false,
    /*onSelect:function(date) {
     var year = date.getFullYear();
     var month = date.getMonth() + 1;
     var day = date.getDate();
     var dateStr = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
     $('#' + id).val(dateStr);
     // 设置文本框的失去焦点事件
     CancelEditCell($('#' + id)[0].parentNode, dateStr, dateStr, id);
    },*/
    onHidePanel:function() {
     var dateStr = $('#' + id).datebox('getValue');
     $('#' + id).val(dateStr);
     CancelEditCell($('#' + id)[0].parentNode, dateStr, dateStr, id);
    }
   });

   // 记录状态的改变
   element.setAttribute("EditState", "true");
   element.parentNode.parentNode.setAttribute("LastEditRow",
     element.parentNode.rowIndex);
  }else if(editType == 'DropDownList') {
   var element = document.createElement("TD");
   element.style.border = '1px solid #ccc';
   element.style.textAlign = 'center';
   $(this).replaceWith(element);
   var required = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("required");
   // 创建文本框
   var textBox = document.createElement("INPUT");
   textBox.type = "text";
   var id = element.parentNode.parentNode.rows[0].cells[element.cellIndex]
     .getAttribute("name")
     + element.parentNode.rowIndex;
   textBox.id = id;
   textBox.className = "easyui-combobox";

   // 设置文本框当前值
   //var text = element.innerText;
   ClearChild(element);
   element.appendChild(textBox);

   // 创建easyui的下拉框
   var dataSourceId = element.parentNode.parentNode.rows[0].cells[element.cellIndex]
   .getAttribute("dataSource");
   $('#' + id).combobox({
    url : dataSourceId,
    valueField:'id',
    textField:'name',
    required : required == 'required',
    filter: function (q, row) {
                var opts = $(this).combobox('options');
                return row[opts.textField].toLowerCase().indexOf(q.toLowerCase()) >= 0;
            },
      onHidePanel: function () {
                //文本框内的文本；
                var txt_Box = $("#" + id).combobox('getText');
                //获取列表数据；
                var listdata = $.data(this, "combobox");
                var rowdata = listdata.data;
                //遍历列表，若匹配则将值设为当前列并返回；否则将值设为null；
                for (var i = 0; i < rowdata.length; i++) {
                    var _row = rowdata[i];
                    var txt_Val = _row["name"];
                    if (txt_Box && txt_Val.toLowerCase().indexOf(txt_Box.toLowerCase()) != -1) {
                    $("#" + id).combobox('setText', txt_Val);
                        $("#" + id).combobox('setValue', _row["id"]);
                        $("#" + id).val(_row["id"]);
                        CancelEditCell($('#' + id)[0].parentNode, _row["id"], txt_Val, id);
                        return;
                    }
                }
      },
    onSelect:function(node) {
     $('#' + id).val(node.name);
     // 设置文本框的失去焦点事件
     //CancelEditCell($('#' + id)[0].parentNode, node.name, node.name, id);
    }
   });

   // 记录状态的改变
   element.setAttribute("EditState", "true");
   element.parentNode.parentNode.setAttribute("LastEditRow",
     element.parentNode.rowIndex);
  }else{
   $(this).replaceWith('<td style="border:1px solid #ccc;"></td>');
  }
});
SetRowCanEdit(newRow);
return newRow;

}
// 初始化数据bool:true 添加一行，bool:false 添加多行
function InitRow(table, dataStr, bool) {
if(_maxRow && table.rows.length >= _maxRow) {
  return;
}
if(!bool) {
  //先清空数据
  $(table).find('td').remove();
}
if(dataStr != '') {
  var obj = [];
  if(bool) {
   obj.push(dataStr);
  }else {
   obj = eval("("+dataStr+")");
  }
  for(var i = 0 ; i < obj.length ; i++) {
   //添加一行
   var lastRow = table.rows[0];
   var newRow = lastRow.cloneNode(true);
   table.tBodies[0].appendChild(newRow);
   $(newRow).find('th').each(function(index , n) {
    var name = table.rows[0].cells[index].getAttribute("name");
    var editType = table.rows[0].cells[index].getAttribute("EditType");
    if(index == 0) {
     $(this).replaceWith('<td bgcolor="#ffffff" value="'+obj[i][name]+'">'+$(this).html()+'</td>');
    }else {
     if(editType == 'DropDownList' || editType == 'Picker') {
      var text = table.rows[0].cells[index].getAttribute("text");
      $(this).replaceWith('<td bgcolor="#ffffff" value = "'+obj[i][name]+'">'+obj[i][text]+'</td>');
     }else if(editType == 'TextBox' || editType == 'Suffix'){
      $(this).replaceWith('<td bgcolor="#ffffff" value = "'+(obj[i][name] === 'null'?'':obj[i][name])+'">'+(obj[i][name] === 'null'?'':obj[i][name])+'</td>');
     }
    }
   });
   //设置为可编辑
   SetRowCanEdit(newRow, true);
  }
}
}

// 删除行
function DeleteRow(table, index) {
for ( var i = table.rows.length - 1; i > 0; i--) {
  var chkOrder = table.rows[i].cells[0].firstChild;
  if (chkOrder) {
   if (chkOrder.type = "CHECKBOX") {
    if (chkOrder.checked) {
     // 执行删除
     try{
      delCallBack(table, index,i);
     }catch(e){};
     table.deleteRow(i);
    }
   }
  }
}
}

//全选功能

// 提取表格的值,JSON格式
function GetTableData(table) {
var tableData = new Array();
//alert("行数：" + table.rows.length);
for ( var i = 1; i < table.rows.length; i++) {
  var row = GetRowData(table.rows[i]);
  if(row === -1) {
   throw 'required validate error!';
  }else if(row) {
   tableData.push(row);
  }
}
return tableData;

}
// 提取指定行的数据，JSON格式
function GetRowData(row) {
var rowData = {};
var has = false;
var _error = false;
for ( var j = 0; j < row.cells.length; j++) {
  var name = row.parentNode.rows[0].cells[j].getAttribute("Name");
  var required = row.parentNode.rows[0].cells[j].getAttribute("required");
  //var editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");
  if (name) {
   var value = row.cells[j].getAttribute("Value");
   if(required && !value) {
    $(row.cells[j]).find('input').click();
    row.cells[j].click();
    _error = true;
    continue;
   }
   /*if (editType == 'Suffix') {
    value = row.cells[j].innerHTML;
   }*/
   if(!has && value) {
    has = true;
   }
   rowData[name] = value;
  }
}
if(has && _error) {/*has为true：不全为空、_error为true：录入不全*/
  return -1;
}
// alert("ProductName:" + rowData.ProductName);
// 或者这样：alert("ProductName:" + rowData["ProductName"]);
return rowData;

}

// 检查当前数据行中需要运行的字段
function CheckExpression(row) {
for ( var j = 0; j < row.cells.length; j++) {
  expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");
  // 如指定了公式则要求计算
  if (expn) {
   var result = Expression(row, expn);
   var format = row.parentNode.rows[0].cells[j].getAttribute("Format");
   if (format) {
    // 如指定了格式，进行字值格式化
    row.cells[j].innerHTML = formatNumber(Expression(row, expn),
      format);
   } else {
    row.cells[j].innerHTML = Expression(row, expn);
   }
  }

}
}

// 计算需要运算的字段
function Expression(row, expn) {
var rowData = GetRowData(row);
// 循环代值计算
for ( var j = 0; j < row.cells.length; j++) {
  name = row.parentNode.rows[0].cells[j].getAttribute("Name");
  if (name) {
   var reg = new RegExp(name, "i");
   expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));
  }
}
return eval(expn);
}

// /////////////////////////////////////////////////////////////////////////////////
/**
* onpostpaste事件
*/
$.fn.pasteEvents = function(delay) {
if (delay == undefined)
  delay = 20;
return $(this).each(function() {
  var $el = $(this);
  $el.on("paste", function() {
   $el.trigger("prepaste");
   setTimeout(function() {
    $el.trigger("postpaste");
   }, delay);
  });
});
};
/**
* 格式化数字显示方式用法 formatNumber(12345.999,'#,##0.00');
* formatNumber(12345.999,'#,##0.##'); formatNumber(123,'000000');
*
* @param num
* @param pattern
*/
/*
* 以下是范例 formatNumber('','')=0 formatNumber(123456789012.129,null)=123456789012
* formatNumber(null,null)=0
* formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12
* formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12
* formatNumber(123456789012.129,'#0.00')=123,456,789,012.12
* formatNumber(123456789012.129,'#0.##')=123,456,789,012.12
* formatNumber(12.129,'0.00')=12.12 formatNumber(12.129,'0.##')=12.12
* formatNumber(12,'00000')=00012 formatNumber(12,'#.##')=12
* formatNumber(12,'#.00')=12.00 formatNumber(0,'#.##')=0
*/
function formatNumber(num, pattern) {
var strarr = num ? num.toString().split('.') : [ '0' ];
var fmtarr = pattern ? pattern.split('.') : [ '' ];
var retstr = '';

// 整数部分
var str = strarr[0];
var fmt = fmtarr[0];
var i = str.length - 1;
var comma = false;
for ( var f = fmt.length - 1; f >= 0; f--) {
  switch (fmt.substr(f, 1)) {
  case '#':
   if (i >= 0)
    retstr = str.substr(i--, 1) + retstr;
   break;
  case '0':
   if (i >= 0)
    retstr = str.substr(i--, 1) + retstr;
   else
    retstr = '0' + retstr;
   break;
  case ',':
   comma = true;
   retstr = ',' + retstr;
   break;
  }
}
if (i >= 0) {
  if (comma) {
   var l = str.length;
   for (; i >= 0; i--) {
    retstr = str.substr(i, 1) + retstr;
    if (i > 0 && ((l - i) % 3) == 0)
     retstr = ',' + retstr;
   }
  } else
   retstr = str.substr(0, i + 1) + retstr;
}

retstr = retstr + '.';
// 处理小数部分
str = strarr.length > 1 ? strarr[1] : '';
fmt = fmtarr.length > 1 ? fmtarr[1] : '';
i = 0;
for ( var f = 0; f < fmt.length; f++) {
  switch (fmt.substr(f, 1)) {
  case '#':
   if (i < str.length)
    retstr += str.substr(i++, 1);
   break;
  case '0':
   if (i < str.length)
    retstr += str.substr(i++, 1);
   else
    retstr += '0';
   break;
  }
}
return retstr.replace(/^,+/, '').replace(/\.$/, '');
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>编辑表格数据</title>
<style type="text/css">
<!--
body,div,p,ul,li,font,span,td,th{
font-size:10pt;
line-height:155%;
}
table{
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
}
td{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}
.EditCell_TextBox {
width: 90%;
border:1px solid #0099CC;
}
.EditCell_DropDownList {
width: 90%;
}
-->
</style>
<script>
/**
* JS实现可编辑的表格
* 用法:EditTables(tb1,tb2,tb2,......);
* Create by Senty at 2008-04-12
**/
//设置多个表格可编辑
function EditTables(){
for(var i=0;i<arguments.length;i++){
SetTableCanEdit(arguments[i]);
}
}
//设置表格是可编辑的
function SetTableCanEdit(table){
for(var i=1; i<table.rows.length;i++){
SetRowCanEdit(table.rows[i]);
}
}
function SetRowCanEdit(row){
for(var j=0;j<row.cells.length; j++){
//如果当前单元格指定了编辑类型，则表示允许编辑
var editType = row.cells[j].getAttribute("EditType");
if(!editType){
//如果当前单元格没有指定，则查看当前列是否指定
editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");
}
if(editType){
row.cells[j].onclick = function (){
EditCell(this);
}
}
}
}
//设置指定单元格可编辑
function EditCell(element, editType){
var editType = element.getAttribute("EditType");
if(!editType){
//如果当前单元格没有指定，则查看当前列是否指定
editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");
}
switch(editType){
case "TextBox":
CreateTextBox(element, element.innerHTML);
break;
case "DropDownList":
CreateDropDownList(element);
break;
default:
break;
}
}
//为单元格创建可编辑输入框
function CreateTextBox(element, value){
//检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState");
if(editState != "true"){
//创建文本框
var textBox = document.createElement("INPUT");
textBox.type = "text";
textBox.className="EditCell_TextBox";
//设置文本框当前值
if(!value){
value = element.getAttribute("Value");
}
textBox.value = value;
//设置文本框的失去焦点事件
textBox.onblur = function (){
CancelEditCell(this.parentNode, this.value);
}
//向当前单元格添加文本框
ClearChild(element);
element.appendChild(textBox);
textBox.focus();
textBox.select();
//改变状态变量
element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);
}
}
//为单元格创建选择框
function CreateDropDownList(element, value){
//检查编辑状态，如果已经是编辑状态，跳过
var editState = element.getAttribute("EditState");
if(editState != "true"){
//创建下接框
var downList = document.createElement("Select");
downList.className="EditCell_DropDownList";
//添加列表项
var items = element.getAttribute("DataItems");
if(!items){
items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");
}
if(items){
items = eval("[" + items + "]");
for(var i=0; i<items.length; i++){
var oOption = document.createElement("OPTION");
oOption.text = items[i].text;
oOption.value = items[i].value;
downList.options.add(oOption);
}
}
//设置列表当前值
if(!value){
value = element.getAttribute("Value");
}
downList.value = value;
//设置创建下接框的失去焦点事件
downList.onblur = function (){
CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);
}
//向当前单元格添加创建下接框
ClearChild(element);
element.appendChild(downList);
downList.focus();
//记录状态的改变
element.setAttribute("EditState", "true");
element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);
}
}
//取消单元格编辑状态
function CancelEditCell(element, value, text){
element.setAttribute("Value", value);
if(text){
element.innerHTML = text;
}else{
element.innerHTML = value;
}
element.setAttribute("EditState", "false");
//检查是否有公式计算
CheckExpression(element.parentNode);
}
//清空指定对象的所有字节点
function ClearChild(element){
element.innerHTML = "";
}
//添加行
function AddRow(table, index){
var lastRow = table.rows[table.rows.length-1];
var newRow = lastRow.cloneNode(true);
//计算新增加行的序号，需要引入jquery 的jar包
var startIndex = $.inArray(lastRow,table.rows);
var endIndex = table.rows;
nbsp;table.tBodies[0].appendChild(newRow);
newRow.cells[0].innerHTML=endIndex-startIndex;
SetRowCanEdit(newRow);
return newRow;
}
//删除行
function DeleteRow(table, index){
for(var i=table.rows.length - 1; i>0;i--){
var chkOrder = table.rows[i].cells[0].firstChild;
if(chkOrder){
if(chkOrder.type = "CHECKBOX"){
if(chkOrder.checked){
//执行删除
table.deleteRow(i);
}
}
}
}
}
//提取表格的值,JSON格式
function GetTableData(table){
var tableData = new Array();
alert("行数：" + table.rows.length);
for(var i=1; i<table.rows.length;i++){
tableData.push(GetRowData(tabProduct.rows[i]));
}
return tableData;
}
//提取指定行的数据，JSON格式
function GetRowData(row){
var rowData = {};
for(var j=0;j<row.cells.length; j++){
name = row.parentNode.rows[0].cells[j].getAttribute("Name");
if(name){
var value = row.cells[j].getAttribute("Value");
if(!value){
value = row.cells[j].innerHTML;
}
rowData[name] = value;
}
}
//alert("ProductName:" + rowData.ProductName);
//或者这样：alert("ProductName:" + rowData["ProductName"]);
return rowData;
}
//检查当前数据行中需要运行的字段
function CheckExpression(row){
for(var j=0;j<row.cells.length; j++){
expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");
//如指定了公式则要求计算
if(expn){
var result = Expression(row,expn);
var format = row.parentNode.rows[0].cells[j].getAttribute("Format");
if(format){
//如指定了格式，进行字值格式化
row.cells[j].innerHTML = formatNumber(Expression(row,expn), format);
}else{
row.cells[j].innerHTML = Expression(row,expn);
}
}
}
}
//计算需要运算的字段
function Expression(row, expn){
var rowData = GetRowData(row);
//循环代值计算
for(var j=0;j<row.cells.length; j++){
name = row.parentNode.rows[0].cells[j].getAttribute("Name");
if(name){
var reg = new RegExp(name, "i");
expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));
}
}
return eval(expn);
}
///////////////////////////////////////////////////////////////////////////////////
/**
* 格式化数字显示方式
* 用法
* formatNumber(12345.999,'#,##0.00');
* formatNumber(12345.999,'#,##0.##');
* formatNumber(123,'000000');
* @param num
* @param pattern
*/
/* 以下是范例
formatNumber('','')=0
formatNumber(123456789012.129,null)=123456789012
formatNumber(null,null)=0
formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12
formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12
formatNumber(123456789012.129,'#0.00')=123,456,789,012.12
formatNumber(123456789012.129,'#0.##')=123,456,789,012.12
formatNumber(12.129,'0.00')=12.12
formatNumber(12.129,'0.##')=12.12
formatNumber(12,'00000')=00012
formatNumber(12,'#.##')=12
formatNumber(12,'#.00')=12.00
formatNumber(0,'#.##')=0
*/
function formatNumber(num,pattern){
var strarr = num?num.toString().split('.'):['0'];
var fmtarr = pattern?pattern.split('.'):[''];
var retstr='';
// 整数部分
var str = strarr[0];
var fmt = fmtarr[0];
var i = str.length-1;
var comma = false;
for(var f=fmt.length-1;f>=0;f--){
switch(fmt.substr(f,1)){
case '#':
if(i>=0 ) retstr = str.substr(i--,1) + retstr;
break;
case '0':
if(i>=0) retstr = str.substr(i--,1) + retstr;
else retstr = '0' + retstr;
break;
case ',':
comma = true;
retstr=','+retstr;
break;
}
}
if(i>=0){
if(comma){
var l = str.length;
for(;i>=0;i--){
retstr = str.substr(i,1) + retstr;
if(i>0 && ((l-i)%3)==0) retstr = ',' + retstr;
}
}
else retstr = str.substr(0,i+1) + retstr;
}
retstr = retstr+'.';
// 处理小数部分
str=strarr.length>1?strarr[1]:'';
fmt=fmtarr.length>1?fmtarr[1]:'';
i=0;
for(var f=0;f<fmt.length;f++){
switch(fmt.substr(f,1)){
case '#':
if(i<str.length) retstr+=str.substr(i++,1);
break;
case '0':
if(i<str.length) retstr+= str.substr(i++,1);
else retstr+='0';
break;
}
}
return retstr.replace(/^,+/,'').replace(/\.$/,'');
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<h3>可编辑的表格</h3>
<table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">
<tr>
<td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序号</td>
<td width="152" bgcolor="#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">商品名称</td>
<td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">数量</td>
<td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">单价</td>
<td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,###.00">合计</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td>
<td bgcolor="#FFFFFF">1</td>
<td bgcolor="#FFFFFF" Value="c">C</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td>
<td bgcolor="#FFFFFF">2</td>
<td bgcolor="#FFFFFF" Value="d">D</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
<td bgcolor="#FFFFFF">0</td>
</tr>
</table>
<br />
<input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" />
<input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" />
<input type="button" name="Submit22" value="重置" onclick="window.location.reload()" />
<input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />
</form>
<script language="javascript" src="GridEdit.js"></script>
<script language="javascript">
var tabProduct = document.getElementById("tabProduct");
// 设置表格可编辑
// 可一次设置多个，例如：EditTables(tb1,tb2,tb2,......)
EditTables(tabProduct);
</script>
</body>
</html>

0 0