easyUI之datagrid

1、在使用easyUI的时候为了将类型为text的input框设置为跟easyUI的其他输入框相同的样式时，需要对其css进行设置，设置方式如下：

.class{
  height:20px;
  margin: 0;
  padding: 0 2px;
  box-sizing:content-box;
}

2、datagrid在调用

$("#id").datagrid('load',{
  //这里面写提交的参数
})

这个方法的时候会自动发送一次ajax请求
3、easyUI在设置日期框的时候默认是可以手动往日期框中输入值的，可以通过添加属性

editable="false"

设置为不可编辑
4、datagrid选中某一行进行编辑的时候，可以通过

onDblClickRow:function(rowIndex,rowData){
  console.log(rowIndex);
  console.log(rowData);
}

取到该行的值
5、使用datagrid进行表格的编辑的时候可以使用方法

$("#id").datagrid('beginEdit',rowIndex);
//rowIndex配合onDblClickRow使用，可以取到当前行的值

6、选中多个数据进行操作的时候，SQL语句使用in进行操作，前端可以将要操作的内容存到一个数组中，然后使用逗号将内容隔开，具体实现方法如下：

var ids = [];
for(var i =0; i < row.length;i++){
  //将要操作的内容存到数组中
  ids.push(row[i].id);
}
//使用逗号将内容隔开
ids.join(',');

7、datagrid删除时候的加载操作，删除前显示正在删除，删除后不再显示正在删除且刷新datagrid表格，同时取消选定行

beforeSend: function(){
  //显示正在加载中
  $("#id").datagrid('loading');
},
success: function(data){
  if(data){
    //不再显示加载中
    $("#id").datagrid('loaded');
    //刷新datagrid表格
    $("#id").datagrid('load');
    //取消所有行的选定
    $("#id").datagrid('unselectAll');
  }
}

8、页脚提示：

$.messager.show({
  //弹窗的标题
  title: '提示',
  //弹窗要提示的内容
  msg: data.meta.message,
});

9、datagrid设置右击不出现默认菜单

Event e
e.preventDefault();

10、datagrid设置右键菜单

$("#menu").menu('show',{
  left:e.pageX,
  top:e.pageY,
})

easyUI之datagrid

推荐阅读更多精彩内容