EasyUi之datagrid常见使用

要点:

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 : []});



 

JEECG官方博客 CSDN认证博客专家 机器学习 深度学习 开源达人
专注技术开源,打造开源的JAVA快速开发平台—JEECG(获得CSDN专家访谈,ITEYE访谈、连续五年中国最火TOP5、十大优秀开源项目等)、免费微信管家平台—JeeWx 捷微(获得2014年微信开发商大会第一名)
已标记关键词 清除标记
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值