EasyUi之datagrid常见使用

最新推荐文章于 2022-05-07 22:45:57 发布

转载最新推荐文章于 2022-05-07 22:45:57 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/1f09d0454f64

本文详细介绍EasyUI Datagrid组件的使用方法，包括初始化配置、数据加载及选择、新增、删除和清空数据等关键操作。通过具体代码示例，帮助开发者快速掌握Datagrid的运用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要点：

1、初始化
2、加载数据
3、处理数据（选择、新增、删除、清空）

一、初始化

$('#DatagridDemo').datagrid({
      width : 750,
      height : 200,
      method : 'post',
      rownumbers : true, // 显示行号列
      pagination : true, // 显示分页工具栏
      singleSelect : false,// 只能单选行
      checkOnSelect : false,
      loadMsg : '请稍候，数据加载中...',// 自定义等待消息
      emptyMsg : '查询数据为空...',
      columns : [ [{field : 'Id',title : '字段1',hidden : 'true'
                   },{field : 'fieldName2',width : 100,title : '字段2',
                            formatter : function(value, row,index) {
                             //可对待展现的数据进行处理
                            }
                   },{field : 'fieldName3',width : 130,title : '字段3',
                              align : 'right' //center、left、right
                   },] ],
                   onLoadSuccess : function(){
                      //当鼠标移动到单元格上面时，会提示内容信息
                       $('#DatagridDemo').datagrid('datagridCellTips',{field:"all"});
                    }
                });

二、加载数据

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

三、处理数据（选择、新增、删除、清空）

1.选择数据：getData、getRows、getChecked、getSelected、getSelections

//获取表格中所有表格数据
var getAllDatas = $('#DatagridDemo').datagrid('getData');
if(getAllDatas.rows.length >= 0 ){
    for(var i=0;i<getAllDatas.rows.length;i++){
        data = getAllDatas.rows[i];
    }
}
//获取当前页面数据
var getCurPageRows = $('#DatagridDemo').datagrid('getRows');
if(getCurPageRows.length >= 0){
    for(var i = 0;i<getCurPageRows.length;i++){
        data = getCurPageRows[i];
    }
}
//获取选中的表格数据
var getCheckedData = $('#DatagridDemo').datagrid('getChecked');
if(getCheckedData.length >= 0){
    for(var i = 0;i < getCheckedData.length;i++){
        data = getCheckedData[i];
    }
}
//获取选中的表格数据,一般是一条或null
var getSelectedData = $('#DatagridDemo').datagrid('getSelected');
data = getSelectedData; 
 
//获取选中的表格数据,一般是一条或多条或null
var getSelectedDatas = $('#DatagridDemo').datagrid('getSelections');
if(getSelectedDatas.length >= 0){
    for(var i = 0;i <getSelectedDatas.length;i++){
        data =getSelectedDatas[i];
    }
}

2.新增数据

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

3.删除数据

//获取要删除数据的行号
var delRow = $('#DatagridDemo').datagrid('getRowIndex', data);
$('#DatagridDemo').datagrid('deleteRow',delRow);

4.清空数据

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