一、DataGrid
一、DataGrid
Winnie007 发表于2年前
一、DataGrid
  • 发表于 2年前
  • 阅读 107
  • 收藏 10
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

摘要: EasyUI DataGrid使用方法。记录学习。

一、使用DataGrid完成目标

Easyui1.4.2 (下载地址:http://pan.baidu.com/s/1kTrT0ZP)  离线API(下载地址:http://pan.baidu.com/s/1jGvtu1S

1、使用DtaGrid,完成基本的数据填充操作。

2、完成检索。

3、完成行编辑(增删改)

4、弹出对话框实现编辑数据。(增删改)

 

二、DataGrid的使用:

1、使用DataGrid,完成基本数据填充操作:

首先:引入所需的js css文件:

<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="<%=path %>/js/jquery-easyui-1.4.2/themes/default/easyui.css" />
<link rel="stylesheet" href="<%=path %>/js/jquery-easyui-1.4.2/themes/icon.css" />
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>

首先,查询EasyUI dataGrid API创建DataGrid,(EasyUI创建方式有两种:纯html和js)。这里采用js创建方式:

<table id="dg"></table>

 

<script type="text/javascript">
 $(function(){
  $("#dg").datagrid({
   url:'<%=path%>/easyui/data.do',//向后台请求数据
   title:'DataGrid Demo',//官方datagrid property是没有这个属性,但是我们可以从Dependencies,可以继承panel中的title属性。
   striped:true,//隔行变色,默认为false
   nowrap:false,//默认为为true,在一行中显示数据。(是否换行)
   idField:'id',//标示字段,
   loadMsg:'loading data.....',//当加载数据时,提示的信息
   pagination:true,//在datagrid下方显示一个分页条
   rownumbers:true,//是否显示行数
   singleSelect:true,//单选
   ctrlSelect:true,//当为true的时候,只有当按ctrl+click的时候,允许多选。
   pageSize:10,
   fitColumns:true,
   pageList:[10,20,30,40,50],
   sortName:'name',//按照某个字段排序
   sortOrder:'asc',
   columns:[[
             {title:'Id',field:'id',width:100,checkbox:true},
             {title:'组织名称',field:'name',width:100},
             {title:'联系电话',field:'tel',width:100},
             {title:'组织描述',field:'memo',width:100}
             ]]
  });
  
 });
</script>

 后台省略.....

效果截图:

2、使用DataGrid进行检索:

设置思路:①可以在datagrid的toolbar引入div设置检索。②在datagrid上方新建<div>设置检索。

①、在datagrid的toolbar上引入div。在toolbar上加入检索框。

效果图:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%
  String path=request.getContextPath();
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="<%=path %>/js/jquery-easyui-1.4.2/themes/default/easyui.css" />
<link rel="stylesheet" href="<%=path %>/js/jquery-easyui-1.4.2/themes/icon.css" />
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
<title>easyUI demo</title>
<script type="text/javascript">
 $(function(){
  $("#dg").datagrid({
   url:'<%=path%>/easyui/data.do',//向后台请求数据
   title:'DataGrid Demo',//官方datagrid property是没有这个属性,但是我们可以从Dependencies,可以继承panel中的title属性。
   striped:true,//隔行变色,默认为false
   nowrap:false,//默认为为true,在一行中显示数据。(是否换行)
   idField:'id',//标示字段,
   loadMsg:'loading data.....',//当加载数据时,提示的信息
   pagination:true,//在datagrid下方显示一个分页条
   rownumbers:true,//是否显示行数
   singleSelect:true,//单选
   ctrlSelect:true,//当为true的时候,只有当按ctrl+click的时候,允许多选。
   pageSize:10,
   fitColumns:true,
   pageList:[10,20,30,40,50],
   sortName:'name',//按照某个字段排序
   sortOrder:'asc',
   columns:[[
             {title:'Id',field:'id',width:100,checkbox:true},
             {title:'组织名称',field:'name',width:100},
             {title:'联系电话',field:'tel',width:100},
             {title:'组织描述',field:'memo',width:100}
             ]],
   toolbar:'#datagrid_search'
  });
  
 });
</script>
</head>
<body>
 <table id="dg"></table>
 <div id="datagrid_search">
  <form id="">
   <table>
    <tr>
     <th>姓名</th>
     <td><input type="text" /></td>
    </tr>
    <tr>
     <th>电话</th>
     <td><input type="text" /><a class="easyui-linkbutton">查询</a><a class="easyui-linkbutton">清空</a></td>
    </tr>
   </table>
  </form>
 </div>
</body>
</html>

②、在datagrid上方加入检索框,并加入datagrid-toolbar 样式

效果图:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%
  String path=request.getContextPath();
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="<%=path %>/js/jquery-easyui-1.4.2/themes/default/easyui.css" />
<link rel="stylesheet" href="<%=path %>/js/jquery-easyui-1.4.2/themes/icon.css" />
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
<title>easyUI demo</title>
<script type="text/javascript">
 $(function(){
  $("#dg").datagrid({
   url:'<%=path%>/easyui/data.do',//向后台请求数据
   title:'DataGrid Demo',//官方datagrid property是没有这个属性,但是我们可以从Dependencies,可以继承panel中的title属性。
   striped:true,//隔行变色,默认为false
   nowrap:false,//默认为为true,在一行中显示数据。(是否换行)
   idField:'id',//标示字段,
   loadMsg:'loading data.....',//当加载数据时,提示的信息
   pagination:true,//在datagrid下方显示一个分页条
   rownumbers:true,//是否显示行数
   singleSelect:true,//单选
   ctrlSelect:true,//当为true的时候,只有当按ctrl+click的时候,允许多选。
   pageSize:10,
   fitColumns:true,
   pageList:[10,20,30,40,50],
   sortName:'name',//按照某个字段排序
   sortOrder:'asc',
   columns:[[
             {title:'Id',field:'id',width:100,checkbox:true},
             {title:'组织名称',field:'name',width:100},
             {title:'联系电话',field:'tel',width:100},
             {title:'组织描述',field:'memo',width:100}
             ]],
   //toolbar:'#datagrid_search'
   toolbar:[{
    text:'添加',
    iconCls:'icon-add',
    handler:function(){
     
    }
   }]
  });
  
 });
</script>
</head>
<body>
 <div id="datagrid_search" class="datagrid-toolbar">
  <form id="">
   <table>
    <tr>
     <th>姓名</th>
     <td><input type="text" /></td>
    </tr>
    <tr>
     <th>电话</th>
     <td><input type="text" /><a class="easyui-linkbutton">查询</a><a class="easyui-linkbutton">清空</a></td>
    </tr>
   </table>
  </form>
 </div>
 <table id="dg"></table>
</body>
</html>

(1)、检索的实现:

通过datagrid的load方法,进行实现:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%
  String path=request.getContextPath();
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="<%=path %>/js/jquery-easyui-1.4.2/themes/default/easyui.css" />
<link rel="stylesheet" href="<%=path %>/js/jquery-easyui-1.4.2/themes/icon.css" />
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
<title>easyUI demo</title>
<script type="text/javascript">
 $(function(){
  $("#dg").datagrid({
   url:'<%=path%>/easyui/data.do',//向后台请求数据
   title:'DataGrid Demo',//官方datagrid property是没有这个属性,但是我们可以从Dependencies,可以继承panel中的title属性。
   striped:true,//隔行变色,默认为false
   nowrap:false,//默认为为true,在一行中显示数据。(是否换行)
   idField:'id',//标示字段,
   loadMsg:'loading data.....',//当加载数据时,提示的信息
   pagination:true,//在datagrid下方显示一个分页条
   rownumbers:true,//是否显示行数
   singleSelect:true,//单选
   ctrlSelect:true,//当为true的时候,只有当按ctrl+click的时候,允许多选。
   pageSize:10,
   fitColumns:true,
   pageList:[10,20,30,40,50],
   sortName:'name',//按照某个字段排序
   sortOrder:'asc',
   columns:[[
             {title:'Id',field:'id',width:100,checkbox:true},
             {title:'组织名称',field:'name',width:100},
             {title:'联系电话',field:'tel',width:100},
             {title:'组织描述',field:'memo',width:100}
             ]],
   //toolbar:'#datagrid_search'
   toolbar:[{
    text:'添加',
    iconCls:'icon-add',
    handler:function(){
     
    }
   }]
  });
  //检索
      btn_search=function(){
   $("#dg").datagrid('load',{
    name:$('#name').val(),
    tel:$('#tel').val()
   });
  },
  //清空
   btn_clear=function(){
   $("#dg").datagrid('load',{});
   $("#search_form").find(":input").val("");
  }
  
 });
</script>
</head>
<body>
 <div id="datagrid_search" class="datagrid-toolbar">
  <form id="search_form">
   <table>
    <tr>
     <th>姓名</th>
     <td><input id="name" type="text" /></td>
    </tr>
    <tr>
     <th>电话</th>
     <td><input id="tel" type="text" /><a class="easyui-linkbutton">查询</a><a href="javascript:void(0);" class="easyui-linkbutton" onclick="btn_clear();">清空</a></td>
    </tr>
   </table>
  </form>
 </div>
 <table id="dg"></table>
</body>
</html>

3、行编辑

①、点击一行,面板里添加一条记录。

使用appendRow或insertRow

appendRow:在最后的位置插入一行。

insertRow:在指定的索引位置插入一行。

思路:当点击“添加”按钮,添加一行数据,并开启编辑模式,每次只能编辑一行。

效果图:

添加方法js代码:

columns:要加上editor属性,才能开启编辑模式。

columns:[[
             {title:'Id',field:'id',width:100,editor:{
              type:'text'
             }},
             {title:'组织名称',field:'name',width:100,editor:{
              type:'validatebox',
              options:{
               required:true
              }
             }},
             {title:'联系电话',field:'tel',width:100,editor:{
              type:'validatebox',
              options:{
               required:true
              }
             }},
             {title:'组织描述',field:'memo',width:100,editor:{
              type:'text'
             }}
             ]],
   //toolbar:'#datagrid_search'
   toolbar:[{
    text:'添加',
    iconCls:'icon-add',
    handler:function(){
     
     var rows=$("#dg").datagrid('getRows');
     console.info(rows.length);
     if(editRow_index == undefined){
      //添加一行
      $("#dg").datagrid('appendRow',{});
      //开启编辑模式
      $("#dg").datagrid('beginEdit',rows.length-1);
      editRow_index=rows.length-1;
     }
    }
   }]

②、保存一行数据。

思路:编辑完一行数据后,点击“保存”,结束行的编辑,将数据通过ajax传送到后台。

保存编辑数据:要加入onAfterEdit事件

{
    text:'保存数据',
    iconCls:'icon-edit',
    handler:function(){
     //结束正在编辑的行
     $("#dg").datagrid('endEdit',editRow_index);
    }
   }],
   onAfterEdit:function(index,row,changes){
    //这里应该将保存的数据通过ajax传到后台保存
    console.info(row);
    //结束编辑本行后,设置editRow_index=undefined
    editRow_index=undefined;
   }

③、点击“编辑”按钮,进行编辑

思路,选中一行,点击编辑,获取选中的行,开启编辑模式。

'-',{
    text:'编辑',
    iconCls:'icon-edit',
    handler:function(){
     //获取选中的行
     var rows=$("#dg").datagrid('getSelections');
     if(rows.length>1){
      $.message.alert('警告信息','您每次操作只能操作一条数据!','warning');
      //清空所有选中的行
      $("#dg").datagrid('clearChecked');
     }
     if(rows.length<1){
      $.messager.alert("警告信息",'请选择要编辑的行!','warning');
     }
     if(rows.length==1){
      //获取选择行的索引
      var index=$("#dg").datagrid('getRowIndex',rows[0]);
      //如果选中的行数是1,开启编辑
      $("#dg").datagrid('beginEdit',index);
      //设置editRow_index=当前选择行的索引
      editRow_index=index;
     }
    }
   },

 

④、双击行,进行编辑。

思路:添加双击事件,当双击一行时,开启该行的编辑模式。

onDblClickRow:function(index,row){
    //开启行的编辑模式
    $("#dg").datagrid("beginEdit",index);
    editRow_index=index;
   }

 

⑤、取消编辑,返回以前数据。

思路:利用rejectChanges返回

 {
    text:'取消编辑',
    iconCls:'icon-redo',
    handler:function(){
     //取消正在编辑的行
     $("#dg").datagrid('endEdit',editRow_index);
     //返还之前的数据
     $("#dg").datagrid('rejectChanges');
     //设置editRow_index=undefined;
     editRow_index=undefined;
    }
   }

 

 

最后完整js代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%
  String path=request.getContextPath();
 %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="<%=path %>/js/jquery-easyui-1.4.2/themes/default/easyui.css" />
<link rel="stylesheet" href="<%=path %>/js/jquery-easyui-1.4.2/themes/icon.css" />
<script type="text/javascript" src="<%=path %>/js/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
<title>easyUI demo</title>
<script type="text/javascript">
 $(function(){
  var editRow_index=undefined; //当前正在编辑行的索引。从0开始
  $("#dg").datagrid({
   url:'<%=path%>/easyui/data.do',//向后台请求数据
   title:'DataGrid Demo',//官方datagrid property是没有这个属性,但是我们可以从Dependencies,可以继承panel中的title属性。
   striped:true,//隔行变色,默认为false
   nowrap:false,//默认为为true,在一行中显示数据。(是否换行)
   idField:'id',//标示字段,
   loadMsg:'loading data.....',//当加载数据时,提示的信息
   pagination:true,//在datagrid下方显示一个分页条
   rownumbers:true,//是否显示行数
   singleSelect:true,//单选
   ctrlSelect:true,//当为true的时候,只有当按ctrl+click的时候,允许多选。
   pageSize:10,
   fitColumns:true,
   pageList:[10,20,30,40,50],
   sortName:'name',//按照某个字段排序
   sortOrder:'asc',
   columns:[[
             {title:'Id',field:'id',width:100,editor:{
              type:'text'
             }},
             {title:'组织名称',field:'name',width:100,editor:{
              type:'validatebox',
              options:{
               required:true
              }
             }},
             {title:'联系电话',field:'tel',width:100,editor:{
              type:'validatebox',
              options:{
               required:true
              }
             }},
             {title:'组织描述',field:'memo',width:100,editor:{
              type:'text'
             }}
             ]],
   //toolbar:'#datagrid_search'
   toolbar:[{
    text:'添加',
    iconCls:'icon-add',
    handler:function(){
     var rows=$("#dg").datagrid('getRows');
     if(editRow_index!=undefined){
      $.messager.show({
       title:'提示信息',
       msg:'每次只能编辑一行数据!'
      });
     }
     if(editRow_index == undefined){
      //添加一行
      $("#dg").datagrid('appendRow',{});
      //开启编辑模式
      $("#dg").datagrid('beginEdit',rows.length-1);
      editRow_index=rows.length-1;
     }
    }
   },'-',{
    text:'保存数据',
    iconCls:'icon-save',
    handler:function(){
     //结束正在编辑的行
     $("#dg").datagrid('endEdit',editRow_index);
    }
   },'-',{
    text:'编辑',
    iconCls:'icon-edit',
    handler:function(){
     //获取选中的行
     var rows=$("#dg").datagrid('getSelections');
     if(rows.length>1){
      $.message.alert('警告信息','您每次操作只能操作一条数据!','warning');
      //清空所有选中的行
      $("#dg").datagrid('clearChecked');
     }
     if(rows.length<1){
      $.messager.alert("警告信息",'请选择要编辑的行!','warning');
     }
     if(rows.length==1){
      //获取选择行的索引
      var index=$("#dg").datagrid('getRowIndex',rows[0]);
      //如果选中的行数是1,开启编辑
      $("#dg").datagrid('beginEdit',index);
      //设置editRow_index=当前选择行的索引
      editRow_index=index;
     }
    }
   },'-',{
    text:'取消编辑',
    iconCls:'icon-redo',
    handler:function(){
     //取消正在编辑的行
     $("#dg").datagrid('endEdit',editRow_index);
     //返还之前的数据
     $("#dg").datagrid('rejectChanges');
     //设置editRow_index=undefined;
     editRow_index=undefined;
    }
   },'-'],
   onAfterEdit:function(index,row,changes){
    //这里应该将保存的数据通过ajax传到后台保存
    console.info(row);
    //结束编辑本行后,设置editRow_index=undefined
    editRow_index=undefined;
   },
   onDblClickRow:function(index,row){
    //开启行的编辑模式
    $("#dg").datagrid("beginEdit",index);
    editRow_index=index;
   }
  });
  //检索
      btn_search=function(){
   $("#dg").datagrid('load',{
    name:$('#name').val(),
    tel:$('#tel').val()
   });
  },
  //清空
   btn_clear=function(){
   $("#dg").datagrid('load',{});
   $("#search_form").find(":input").val("");
  }
  
 });
</script>
</head>
<body>
 <div id="datagrid_search" class="datagrid-toolbar">
  <form id="search_form">
   <table>
    <tr>
     <th>姓名</th>
     <td><input id="name" type="text" /></td>
    </tr>
    <tr>
     <th>电话</th>
     <td><input id="tel" type="text" /><a class="easyui-linkbutton">查询</a><a href="javascript:void(0);" class="easyui-linkbutton" onclick="btn_clear();">清空</a></td>
    </tr>
   </table>
  </form>
 </div>
 <table id="dg"></table>
</body>
</html>

 

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 5
博文 36
码字总数 62847
×
Winnie007
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: