一、DataGrid

最新推荐文章于 2024-07-28 23:42:08 发布

转载最新推荐文章于 2024-07-28 23:42:08 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wangning0535/blog/536660

文章标签：

#java #javascript #ViewUI

一、使用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>

转载于:https://my.oschina.net/wangning0535/blog/536660