資料網格的編輯

前面我們通過資料網格顯示了資料庫中的資料資訊，現在講解資料網格的編輯功能。資料網格允許使用者增加新行，更新行資料。

下面教程展示如何建立編輯功能的資料網格。

效果圖：

演示效果可參看：

http://www.jeasyui.com/tutorial/datagrid/datagrid12_demo.html

我們按照：

http://blog.csdn.net/gdhyyanglang/article/details/8293662

中的程式碼來完善資料網格功能。

<table id="tt" class="easyui-datagrid" style="width:550px;height:250px"
	url="datagrid_getdata.jsp"
    title="Load Data" 
    iconCls="icon-save"
    rownumbers="true" 
    pagination="true"
    toolbar="#tb"
    singleSelect="true"> 
    <thead>
        <tr>
            <th field="id" width="80">id</th>  
            <th field="name" width="80" editor="text">name</th>  
            <th field="password" width="80" formatter="formatPsw" editor="text">pasword</th>  
            <th field="mail" width="180" editor="text">mail</th>
            <th field="action" width="80" formatter="formatAction">action</th>  
        </tr> 
    </thead>  
</table>

觀察上面修改的表格，可見我們新增加了三個知識點：1）表格的singleSelecte屬性，表示只能選擇一行記錄；2）formatter表示th標籤中文字的格式化；3）editor表示當編輯某一行時，本欄位的樣式。

最後我們增加一列action，用來存放兩個按鈕。其中存放按鈕的程式碼在格式化方法formatAction中。

現在我們需要將2個格式化的方法編寫出來，程式碼如下：

//格式化密碼的顯示樣式，格式化方法有三個引數
//第一個表示格式化的值，第二個表示行記錄，第三個表示行索引
//返回欄位值
function formatPsw(value, row){  
    if (value.length < 8){ //如果欄位值長度小於8，讓值顯示紅色樣式
        return "<span style='color:red;'>" + value + "</span>";  
    } else {  
        return value;  
    }  
} 
function formatAction(value, row, index){
	if (row.editing){//如果行被編輯中，顯示儲存和取消 
    	var s = "<a href='#' onclick='saverow(this)'>Save</a> ";  
      	var c = "<a href='#' onclick='cancelrow(this)'>Cancel</a>";  
       	return s + c;  
	} else {  //如果行沒有被剪輯中，顯示編輯和刪除
     	var e = "<a href='#' onclick='editrow(this)'>Edit</a> ";  
        var d = "<a href='#' onclick='deleterow(this)'>Delete</a>";  
        return e + d;  
    }    
}

運用了格式化方法後，可見密碼長度小於8的密碼都被顯示紅色了。同時，由於行預設情況下沒有被編輯，所以顯示編輯和刪除。

7.1 編輯事件

在formatAction中我們顯示了四個按鈕（a標籤），同時給每個按鈕新增了單擊事件，先來看看editrow方法：

function getRowIndex(target){
	//closest從當前開始搜尋'tr.datagrid-row'，即當前行
    var tr = $(target).closest('tr.datagrid-row');
	//獲取行數
    return parseInt(tr.attr('datagrid-row-index'));  
}
function editrow(target){  
	//開始編輯第getRowIndex(target)行
    $('#tt').datagrid('beginEdit', getRowIndex(target)); 
}

現在單擊Edit按鈕，可見具有editor屬性的td標籤應用了其值text文字。但是在編輯狀態的時候並沒有將編輯和刪除按鈕轉換為儲存和取消按鈕。如何解決這個問題呢？回顧前面的格式化顯示條件是依據row.editing，我們只需要在點選編輯按鈕的時候將row.editing設定為true即可。

設定row.editing可在系統設定的資料網格事件中設定。

$(function(){
    $('#tt').datagrid({ 
		//編輯開始時被觸發
		onBeforeEdit:function(index, row){  
            row.editing = true;
			updateActions(index);//改變行狀態後更新行
        },
		//編輯之後被觸發
        onAfterEdit:function(index, row){  
            row.editing = false;  
			updateActions(index);  
        },
		//取消編輯後觸發
        onCancelEdit:function(index, row){  
            row.editing = false;    
			updateActions(index);  
        }  
	});
});
function updateActions(index){  
    $('#tt').datagrid('updateRow',{  
        index: index, //更新的行數 
        row:{}  
    }); 
}

7.2 刪除事件

function deleterow(target){ 
    $.messager.confirm('Confirm','Are you sure?',function(ok){  
        if (ok){  
            $('#tt').datagrid('deleteRow', getRowIndex(target));  
        }  
    });  
}

7.3 儲存事件

function saverow(target){  
    $('#tt').datagrid('endEdit', getRowIndex(target));  
}

7.4 取消事件

function cancelrow(target){  
    $('#tt').datagrid('cancelEdit', getRowIndex(target));  
}

上面四個事件僅僅在介面上修改資訊，並不會進行資料庫中資料的修改。若想修改資料庫，可在相應方法中進行資料庫操作。