要點(diǎn)：

1、初始化
2、加載數(shù)據(jù)
3、處理數(shù)據(jù)（選擇、新增、刪除、清空）

一、初始化

?

$('#DatagridDemo').datagrid({width : 750,height : 200,method : 'post',rownumbers : true, // 顯示行號列pagination : true, // 顯示分頁工具欄singleSelect : false,// 只能單選行checkOnSelect : false,loadMsg : '請稍候，數(shù)據(jù)加載中...',// 自定義等待消息emptyMsg : '查詢數(shù)據(jù)為空...',columns : [ [{field : 'Id',title : '字段1',hidden : 'true'},{field : 'fieldName2',width : 100,title : '字段2',formatter : function(value, row,index) {//可對待展現(xiàn)的數(shù)據(jù)進(jìn)行處理}},{field : 'fieldName3',width : 130,title : '字段3',align : 'right' //center、left、right},] ],onLoadSuccess : function(){//當(dāng)鼠標(biāo)移動到單元格上面時(shí)，會提示內(nèi)容信息$('#DatagridDemo').datagrid('datagridCellTips',{field:"all"});}});

二、加載數(shù)據(jù)

?

$("#DatagridDemo").datagrid('loadData',json.rows);

三、處理數(shù)據(jù)（選擇、新增、刪除、清空）

1.選擇數(shù)據(jù)：getData、getRows、getChecked、getSelected、getSelections

?

//獲取表格中所有表格數(shù)據(jù) var getAllDatas = $('#DatagridDemo').datagrid('getData'); if(getAllDatas.rows.length >= 0 ){for(var i=0;i<getAllDatas.rows.length;i++){data = getAllDatas.rows[i];} } //獲取當(dāng)前頁面數(shù)據(jù) var getCurPageRows = $('#DatagridDemo').datagrid('getRows'); if(getCurPageRows.length >= 0){for(var i = 0;i<getCurPageRows.length;i++){data = getCurPageRows[i];} } //獲取選中的表格數(shù)據(jù) var getCheckedData = $('#DatagridDemo').datagrid('getChecked'); if(getCheckedData.length >= 0){for(var i = 0;i < getCheckedData.length;i++){data = getCheckedData[i];} } //獲取選中的表格數(shù)據(jù),一般是一條或null var getSelectedData = $('#DatagridDemo').datagrid('getSelected'); data = getSelectedData; //獲取選中的表格數(shù)據(jù),一般是一條或多條或null var getSelectedDatas = $('#DatagridDemo').datagrid('getSelections'); if(getSelectedDatas.length >= 0){for(var i = 0;i <getSelectedDatas.length;i++){data =getSelectedDatas[i];} }

2.新增數(shù)據(jù)

?

$('#DatagridDemo').datagrid('appendRow',{Id: result.Id,fieldName2: result.FieldName2,fieldName3: result.FieldName3}

3.刪除數(shù)據(jù)

?

//獲取要刪除數(shù)據(jù)的行號 var delRow = $('#DatagridDemo').datagrid('getRowIndex', data); $('#DatagridDemo').datagrid('deleteRow',delRow);

4.清空數(shù)據(jù)

?

$("#DatagridDemo").datagrid('loadData', {total : 0,rows : []});

?

總結(jié)

以上是生活随笔為你收集整理的EasyUi之datagrid常见使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。