美文网首页
easyUI之datagrid

easyUI之datagrid

作者: MsterKerrigan | 来源:发表于2018-07-27 16:55 被阅读0次

    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

          本文链接:https://www.haomeiwen.com/subject/exdimftx.html