文档章节

一、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
青岛
WPF 4 DataGrid 控件(进阶篇二)

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

junwong
2012/03/09
938
0
关于DataGrid等控件中的自动编号

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

晨曦之光
2012/03/09
44
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
08/19
0
0
easyui datagrid deleteRow(删除行)的BUG!

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

铂金小鸟
2012/09/06
0
17
如何讓 easyui datagrid 第一次在加載之後修改寬度與高度?

你好,我的頁面上有一個 easyui 的 datagrid , 頁面代碼大致如下 在頁面載入的時候執行以下程式碼: $("tt").datagrid({width:"100%"}); 也就是讓 datagrid 一開始就和 div 的尺寸相同。 但是...

Arthur1977
2014/04/26
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
12
1
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部