DHTMLX 前端框架 創建你的一個應用程序 教程(十一)--添加/刪除表格中的記錄

 

添加/刪除表格中的記錄

 

　　咱們的最終功能是在表格中添加刪除

　　咱們經過單機工具欄上的按鈕來實現添加刪除

 

　　當咱們單擊添加按鈕的時候, 表單中 第一行默認填寫New contact 光標自動聚焦

　　

 

　　當用戶點擊刪除按鈕的時候,當前選中行被刪除 並自動選中下一行, 當選中是最後一行 刪除後 默認選中上一行.

 

　　咱們提供添加/刪除事件來完成功能

 

提供一個能夠添加、刪除網格中的記錄

 

　　1.給添加按鈕添加一個onClick 事件

　　

toolbar.attachEvent("onclick",function(id){
    if(id=="newContact"){ //'newContact' is the id of the button in the toolbar
        var rowId=contactsGrid.uid();                  //generates an unique id
        var pos = contactsGrid.getRowsNum();  //gets the number of rows in grid
        contactsGrid.addRow(rowId,["New contact","",""],pos);  //adds a new row       };
});

　　添加方法接收三個參數：1.行的id 2.單元格的值 3.行的下標

 

　　2.添加onAfterUpdate 事件 這個事件是在成功添加一條到數據庫後觸發

 

　　

 "index.html"

var dpg = new dataProcessor("data/contacts.php");                          
dpg.init(contactsGrid);                                                   
 
dpg.attachEvent("onAfterUpdate", function(sid, action, tid, tag){  
  if (action == "inserted"){       
 contactsGrid.selectRowById(tid);        //selects the newly-created row        
 contactForm.setFocusOnFirstActive();//set focus to the 1st form's input      
   }
});

 

　　setFocusOnFirstActive方法使得光標在表單的一個輸入框中

　　3.給刪除添加一個點擊事件

　　

 "index.html"

toolbar.attachEvent("onclick",function(id){
    if(id=="newContact"){ 
        var rowId=contactsGrid.uid();
        var pos = contactsGrid.getRowsNum();
        contactsGrid.addRow(rowId,["New contact","",""],pos);
        contactsGrid.selectRowById(rowId);
        contactForm.setFocusOnFirstActive();
    };
    if(id=="delContact"){
        var rowId = contactsGrid.getSelectedRowId();  
      var rowIndex = contactsGrid.getRowIndex(rowId); 
       if(rowId!=null){     
       contactsGrid.deleteRow(rowId);     
           if(rowIndex!=(contactsGrid.getRowsNum()-1)){    
                contactsGrid.selectRow(rowIndex+1,true); 
               } else{            
        contactsGrid.selectRow(rowIndex-1,true) 
               }    
    }  
  }});

 

　　至此,相信你已經喜歡上了DHTMLX 這個web 前端框架。這一個簡單的web項目咱們就作完了 

 

　　參考這裏  還有不少的示例教程