文档章节

一、DataGrid

Winnie007
 Winnie007
发布于 2015/11/27 21:53
字数 2888
阅读 107
收藏 10

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

 

 

© 著作权归作者所有

共有 人打赏支持
Winnie007
粉丝 5
博文 36
码字总数 62847
作品 0
青岛
关于DataGrid等控件中的自动编号

作者:未知 请作者速与本人联系 原文链接:http://blog.csdn.net/21aspnet/article/details/149762

晨曦之光
2012/03/09
44
0
WPF 4 DataGrid 控件(进阶篇二)

上一篇《WPF 4 DataGrid 控件(进阶篇一)》中我们通过DataGridTemplateColumn 类自定义编辑了日期列的样式,当然也可以根据个人需要设置任何样式模板。上例中Pass Exam 列显示学生是否通过考...

junwong
2012/03/09
938
0
Windows Community Toolkit 4.0 - DataGrid - Overview

概述 Windows Community Toolkit 4.0 于 2018 月 8 月初发布:Windows Community Toolkit 4.0 Release Note. 4.0 版本相较于 3.0,增加了 DataGrid 等控件,Sample App 支持了 Fluent Desig......

shaomeng
前天
0
0
easyui datagrid deleteRow(删除行)的BUG!

项目中又用到easyui 的datagrid做数据展示。功能很强大,很实用,但bug也很多。今天这个就够让人头疼。 如图,现在有个删除功能,选中一行,点击就可以删除。 easyui datagrid 提供了deleteR...

铂金小鸟
2012/09/06
0
17
關於 iframe 裡的 easyui datagrid 控制

你好,我在 a.html 中放置一個iframe,名稱是 myIframe。 iframe的連結網頁 b.html 裡放置一個 easyui datagrid 元件,名稱是 tt 我在 b.html 中可以透過 $("tt").datagrid("resize",{width...

Arthur1977
2014/04/27
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

es6

在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组 传入对象,返回属性名 var obj = {'a':'123','b':'345'};console.l...

不负好时光
9分钟前
0
0
叮!您收到一份超值Java基础入门资料!

摘要:Java语言有什么特点?如何最大效率的学习?深浅拷贝到底有何区别?阿里巴巴高级开发工程师为大家带来Java系统解读,带你掌握Java技术要领,突破重点难点,入门面向对象编程,以详细示例...

全部原谅
11分钟前
0
0
web.xml容器加载顺序

容器对于web.xml的加载过程是context-param >> listener >> fileter >> servlet

Aeroever
13分钟前
1
0
Docker容器日志查看与清理

1. 问题 docker容器日志导致主机磁盘空间满了。docker logs -f container_name噼里啪啦一大堆,很占用空间,不用的日志可以清理掉了。 2. 解决方法 2.1 找出Docker容器日志 在linux上,容器日...

muzi1994
14分钟前
0
0
J2Cache 和普通缓存框架有何不同,它解决了什么问题?

不少人看到 J2Cache 第一眼时,会认为这就是一个普普通通的缓存框架,和例如 Ehcache、Caffeine 、Spring Cache 之类的项目没什么区别,无非是造了一个新的轮子而已。事实上完全不是一回事!...

红薯
17分钟前
414
10

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部