用.Net实现基于CSS的AJAX开发(2)

来源：互联网发布：钢琴自动弹奏软件编辑：程序博客网时间：2024/06/05 10:22

.Lpw171{display:none;}

      好了，完成删除，，那么所有对应这个业务的删除都可以由命名为dgBigclassmanage的某一元素通过绑定delbtn样式来执行删

  除（当然，这样不科学，不过是DEMO嘛，如果是实际你可以在QueryString里多传一个参数，在到AJAXDelRow派发后再用进行二次派发,然后以这个参数做标识就完美了）由于麻烦，，有兴趣的自己做吧。。呵呵。

  这个样式只依赖TABLE元素，所以DATAGRID、DATALIST、自己做的TABLE，自定义控件只要最后生成TABLE元素的控件都可以用。
  主要提供一个思想，跟代码制作的好坏无关。在.Net里轻量地使用样式绑定,在有AJAX应用的开发中效果很棒。你也可以自己去实现一个更优秀的轻量框架了。

  增删改、上下移动记录样式绑定的JS：

  /**//**
  *WrittenbyWangzhongyuan
  *
  *这是一个样式驱动的功能按钮控制脚本，样式用法如下：
  *
  *修改按钮样式：editgtn应用样式后即可把目标元素变为修改按钮，目标行变为修改行并出现确定、取消按钮。
  *删除按钮样式：delbtn应用样式后即可把目标元素变为删除按钮，点击删除则目标删除。
  *上移下移按钮样式：updownbtn应用样式后即可把目标元素变为上移、下移元素，目标行变为可上移和下移。
  *
  *其他需要样式正在制作中........
  **/
  varcrudbtn=...{
  that:false,
  isOdd:false,
  lastAssignedId:0,
  addbtnid:0,
  newRows:-1,
  init:function()...{
  //首先,查看浏览器是否能执行此脚本(有些浏览器不能用getElementsByTagName)
  if(!document.getElementsByTagName)...{
  return;
  }

  this.that=this;

  this.run();

  },
  /**//**
  *遍历document中的所有table,如果有样式crudtable,则应用此脚本
  *
  **/
  run:function()...{
  vartables=document.getElementsByTagName("table");

  for(vari=0;i<tables.length;i++)...{
  varthisTable=tables[i];

  if(CSS.elementHasClass(thisTable,'crudtable'))...{
  this.makecrudTable(thisTable);
  }
  }
  },
  /**//**
  *构建控制按钮
  **/
  makecrudTable:function(table)...{

  //首先,检测table是否有id,如果没有则创建
  if(!table.id)...{
  table.id='crudTable'+this.lastAssignedId++;
  }
  //遍历表格的数据行
  varnewRows=newArray();
  //遍历表格所有数据行

  for(varj=0;j<table.tBodies[0].rows.length-1;j++)...{
  //遍历数据行所有列
  for(vark=0;k<table.tBodies[0].rows[j+1].cells.length;k++)...{
  //判断是否存在删除样式，如果存在则把该单元个转化为删除按钮
  if(CSS.elementHasClass(table.tBodies[0].rows[j+1].cells[k],'delbtn'))...{
  table.tBodies[0].rows[j+1].cells[k].id='delbtn'+this.addbtnid++;
  varlinkEl=createElement('a');
  linkEl.href='#';
  linkEl.onclick=this.delRow;
  linkEl.setAttribute('columnId',k);

  varinnerEls=table.tBodies[0].rows[j+1].cells[k].childNodes;

  linkEl.innerText="删除";
  table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl);
  }
  //判断是否存在修改样式，如果存在则把该单元个转化为修改按钮
  if(CSS.elementHasClass(table.tBodies[0].rows[j+1].cells[k],'editbtn'))...{
  table.tBodies[0].rows[j+1].cells[k].id='delbtn'+this.addbtnid++;
  varlinkEl=createElement('a');
  linkEl.href='#';
  linkEl.onclick=this.editRow;
  linkEl.setAttribute('columnId',k);

  varinnerEls=table.tBodies[0].rows[j+1].cells[k].childNodes;

  linkEl.innerText="修改";
  table.tBodies[0].rows[j+1].cells[k].appendChild(linkEl);
  }
  //判断是否存在上移、下移样式，如果存在则把该单元个转化为上移、下移按钮
  if(CSS.elementHasClass(table.tBodies[0].rows[j+1].cells[k],'updownbtn'))...{
  table.tBodies[0].rows[j+1].cells[k].id='updownbtn'+this.addbtnid++;