用.Net實現基於CSS的AJAX開發(2)

來源:互聯網
上載者:User

       好了,完成刪除,,那麼所有對應這個業務的刪除都可以由命名為dgBigclassmanage的某一元素通過綁定delbtn樣式來執行刪

  除(當然,這樣不科學,不過是DEMO嘛,如果是實際你可以在QueryString裡多傳一個參數,在到AjaxDelRow派發後再用進行二次派發,然後以這個參數做標識就完美了)由於麻煩,,有興趣的自己做吧。。 呵呵。
  
  這個樣式只依賴TABLE元素,所以DATAGRID、DATALIST、自己做的TABLE,自訂控制項只要最後產生TABLE元素的控制項都可以用。
   主要提供一個思想,跟代碼製作的好壞無關。在.NET裡輕量地使用樣式綁定,在有AJAX應用的開發中效果很棒。你也可以自己去實現一個更優秀的輕量架構了。
  
  增刪改、上下移動記錄樣式綁定的JS:
  
   /**//**
   * Written by Wangzhongyuan
   *
   * 這是一個樣式驅動的功能按鈕控制指令碼,樣式用法如下:
   *
   * 修改按鈕樣式: editgtn 應用樣式後即可把目標元素變為修改按鈕,目標行變為修改行並出現確定、取消按鈕。
   * 刪除按鈕樣式: delbtn 應用樣式後即可把目標元素變為刪除按鈕,點擊刪除則目標刪除。
   * 上移下移按鈕樣式: updownbtn 應用樣式後即可把目標元素變為上移、下移元素,目標行變為可上移和下移。
   *
   * 其他需要樣式正在製作中........
   **/
  var crudbtn = ...{
   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() ...{
   var tables = document.getElementsByTagName("table");
  
   for (var i=0; i < tables.length; i++) ...{
   var thisTable = tables[i];
  
   if (css.elementHasClass(thisTable, 'crudtable')) ...{
   this.makecrudTable(thisTable);
   }
   }
   },
   /**//**
   * 構建控制按鈕
   **/
   makecrudTable : function(table) ...{
  
   // 首先, 檢測table是否有id,如果沒有則建立
   if (!table.id) ...{
   table.id = 'crudTable'+this.lastAssignedId++;
   }
   // 遍曆表格的資料行
   var newRows = new Array();
   // 遍曆表格所有資料行
   for (var j = 0; j < table.tBodies[0].rows.length-1; j++) ...{
   // 遍曆資料行所有列
   for(var k = 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 ++;
   var linkEl = createElement('a');
   linkEl.href = '#';
   linkEl.onclick = this.delRow;
   linkEl.setAttribute('columnId', k);
  
   var innerEls = 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 ++;
   var linkEl = createElement('a');
   linkEl.href = '#';
   linkEl.onclick = this.editRow;
   linkEl.setAttribute('columnId', k);
  
   var innerEls = 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 ++;



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。