文档章节

EasyUI学习笔记6:MIS开发利器_ datagrid插件(上)

ooad
 ooad
发布于 2015/03/25 23:52
字数 1652
阅读 411
收藏 1

一、引言

终于来到easyui系列笔记的重点部分——数据网格datagrid插件。在MIS开发中,需要展示数据大量数据并且频繁地进行CRUD操作,datagrid强大功能可以帮助我们简单快速实现各种功能,是必须要掌握开发MIS的利器。

为了将datagrid讲解清楚,我们打算分上、中、下三篇来进行介绍。

上篇介绍datagrid数据网格创建,读取json数据并进行分页;

中篇介绍配合dialog插件实现CRUD操作;

下篇介绍datagrid如何与struts的action交换数据;

这次换个思路,首先给出最终实现的效果图,(分页栏没截出来):

二、创建数据网格

查看http://www.jeasyui.net/我们发现datagrid提供三种创建数据网格的方式,偷个懒,直接从官网截图给出例子:

(1) 从已有的表格元素创建数据网格(datagrid),在 html 中定义列、行及数据。

<table class="easyui-datagrid">
    <thead>
		<tr>
			<th data-options="field:'code'">Code</th>
			<th data-options="field:'name'">Name</th>
			<th data-options="field:'price'">Price</th>
		</tr>
    </thead>
    <tbody>
		<tr>
			<td>001</td><td>name1</td><td>2323</td>
		</tr>
		<tr>
			<td>002</td><td>name2</td><td>4612</td>
		</tr>
	</tbody>
</table>

(2) 通过 <table> 标记创建数据网格(datagrid)。嵌套的 <th> 标签定义表格中的列。

<table class="easyui-datagrid" style="width:400px;height:250px"
    data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    <thead>
		<tr>
			<th data-options="field:'code',width:100">Code</th>
			<th data-options="field:'name',width:100">Name</th>
			<th data-options="field:'price',width:100,align:'right'">Price</th>
		</tr>
    </thead>
</table>

(3) 使用 javascript 创建数据网格(datagrid)。

<table id="dg"></table>
$('#dg').datagrid({
    url:'datagrid_data.json',
    columns:[[
		{field:'code',title:'Code',width:100},
		{field:'name',title:'Name',width:100},
		{field:'price',title:'Price',width:100,align:'right'}
    ]]
});

这里我们采用第3种方式来创建datagrid。

首先在customer.html网页中编写div,如下所示:

<div style="width:100%;height:100%;padding:0px;overflow:hidden">
	<table id="grid"></table>
</div>

接下来编写如下js代码,代码几乎每一行都进行了注释,应该很清楚了。

<script type="text/javascript">
/* jquery入口*/
$(function() {
    loadgrid(); //加载datagrid
});
/* 加载datagrid列表*/
    function loadgrid(){
        $('#grid').datagrid({
	    title : '客户',
	    url : 'datagridData.json',
	    loadMsg : '正在加载…',  //当从远程站点载入数据时,显示的一条快捷信息。
	    fit : true,  //窗口自适应
	    nowrap: false, //设置为true,当数据长度超出列宽时将会自动截取
	    fitColumns : true, // 自动适应列宽
	    singleSelect : true, // 每次只选中一行
	    sortName : 'customerNo', //默认排序字段
	    sortOrder : 'asc', // 升序asc/降序desc
	    striped : true,  // 隔行变色  
	    pagination : true,  // 在底部显示分页工具栏
	    pageNumber : 1, //初始化页码 
	    pageSize : 20,  // 指定每页的大小,服务器要加上page属性和total属性
	    pageList : [ 20, 30, 50 ], // 可以设置每页记录条数的列表,服务器要加上rows属性
	    //rownumbers : true, // 在最前面显示行号 
	    idField : 'id', // 主键属性
	    // 冻结列,当很多咧出现滚动条时该列不会动
	    frozenColumns : [ [
		{title : '序号', width : '100', field : 'id', sortable : true}, 
		{title : '客户编号', width : '100', field : 'customerNo', sortable : true}, 
		{title : '客户姓名', width : '100',	field : 'customerName',sortable : true}
	    ] ],
	    columns : [ [ 
		{title : '联系电话', width : '100', field : 'telephone', sortable : false}, 
		{title : '联系地址', width : '200',	field : 'address', sortable : false}
	    ] ],		
	    // 工具栏按钮
	    toolbar: [
"-", {id: 'add', text: '添加',	iconCls: 'icon-add', handler: function () { add()} },
"-", {id: 'edit', text: '修改',	iconCls: 'icon-edit',	 handler: function () { edit()} }, 
"-", {id: 'remove', text: '删除',iconCls: 'icon-remove', handler: function () {remove()} }, 
"-", {id: 'remove',  text: '刷新',iconCls: 'icon-reload', handler: function () {reload()} } 
	    ]
	});
}
</script>

接下来进行必要的补充解释:

(1) url属性指定从远程站点请求数据的 URL。这里可以指定一个struts的action访问地址,此处暂时读取本地json,具体内容稍后给出。

(2) sortOrder、pageSize、pageList这几个属性非常重要。后面与struts的action传递数据时需要传递几个属性值:order、page、total、rows。需要依靠这些属性实现分页和排序。

(3) 列使用了json格式进行定义,需要指定title/width/field/sortable等值。如果列数很多,可以固定某些列(frozenColumns),横向滚动条滚动时可固定不动。

(4) 工具栏里的add、edit、remove等方法为增删改操作。具体实现将在下一篇的给出。

三、datagrid的json数据

要让datagrid显示数据,远程传递或本地读取的json数据格式如下:

{"total": ,"rows":[
{……},
{…}
]}

total为总记录数,rows为数据集合。为什么要这样写呢,依然龟腚!

这里我们给出测试的数据datagridData.json供参考:

{"total":25,"rows":[
	{"id":"1","customerNo":"A001","customerName":"张三1","telephone":"13888888888","address":"广州天河区"},
	{"id":"2","customerNo":"A002","customerName":"张三2","telephone":"13888888888","address":"广州天河区"},
	{"id":"3","customerNo":"A003","customerName":"张三3","telephone":"13888888888","address":"广州天河区"},
	{"id":"4","customerNo":"A004","customerName":"张三4","telephone":"13888888888","address":"广州天河区"},
	{"id":"5","customerNo":"A005","customerName":"张三5","telephone":"13888888888","address":"广州天河区"},
	{"id":"6","customerNo":"A006","customerName":"张三6","telephone":"13888888888","address":"广州天河区"},
	{"id":"7","customerNo":"A007","customerName":"张三7","telephone":"13888888888","address":"广州天河区"},
	{"id":"8","customerNo":"A008","customerName":"张三8","telephone":"13888888888","address":"广州天河区"},
	{"id":"9","customerNo":"A009","customerName":"张三9","telephone":"13888888888","address":"广州天河区"},
	{"id":"10","customerNo":"A010","customerName":"张三10","telephone":"13888888888","address":"广州天河区"},
	{"id":"11","customerNo":"B001","customerName":"李四1","telephone":"13888888888","address":"广州天河区"},
	{"id":"12","customerNo":"B002","customerName":"李四2","telephone":"13888888888","address":"广州天河区"},
	{"id":"13","customerNo":"B003","customerName":"李四3","telephone":"13888888888","address":"广州天河区"},
	{"id":"14","customerNo":"B004","customerName":"李四4","telephone":"13888888888","address":"广州天河区"},
	{"id":"15","customerNo":"B005","customerName":"李四5","telephone":"13888888888","address":"广州天河区"},
	{"id":"16","customerNo":"B006","customerName":"李四6","telephone":"13888888888","address":"广州天河区"},
	{"id":"17","customerNo":"B007","customerName":"李四7","telephone":"13888888888","address":"广州天河区"},
	{"id":"18","customerNo":"B008","customerName":"李四8","telephone":"13888888888","address":"广州天河区"},
	{"id":"19","customerNo":"B009","customerName":"李四9","telephone":"13888888888","address":"广州天河区"},
	{"id":"20","customerNo":"B010","customerName":"李四10","telephone":"13888888888","address":"广州天河区"},
	{"id":"21","customerNo":"C001","customerName":"王五1","telephone":"13888888888","address":"广州天河区"},
	{"id":"22","customerNo":"C002","customerName":"王五2","telephone":"13888888888","address":"广州天河区"},
	{"id":"23","customerNo":"C003","customerName":"王五3","telephone":"13888888888","address":"广州天河区"},
	{"id":"24","customerNo":"C004","customerName":"王五4","telephone":"13888888888","address":"广州天河区"},
	{"id":"25","customerNo":"C005","customerName":"王五5","telephone":"13888888888","address":"广州天河区"}
]}

哎,写这么多就是想超过20条能分页,请原谅我刷屏。

运行tomcat,在浏览器中输入localhost:8080/easyui/index.html,点击左侧菜单“客户”,就可以看到本笔记开篇的界面了。

需要提醒的是,由于工具栏按钮方法都没写,当然也不能增删改,中篇就可以了。由于读取本地json,分页排序暂时都是失效的,从action动态获取数据时就能起作用,下篇就可以了,喝点茶耐心等等

© 著作权归作者所有

ooad
粉丝 93
博文 24
码字总数 17510
作品 0
广州
私信 提问
加载中

评论(1)

xiaoxia_L虾
xiaoxia_L虾
老师,运行这个网页是不是要先下载JQuery?
Easyui的datagrid结合hibernate实现数据分页

最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,二话不说,上图直观! 2、easyui的datagrid的...

岁月无痕
2013/04/17
0
3
jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.1K
3
Easyui的datagrid结合hibernate实现数据分页

Easyui的datagrid结合hibernate实现数据分页 最近在学习easyui的使用,在学到datagrid的时候遇到了一些问题,终于抽点时间整理了一下,分享出来,请各位前辈高手多多指教! 1、先来看看效果,...

岁月无痕
2015/06/01
0
0
EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的) EasyUI体系结构 ...

LCore
2014/07/11
0
9
qury-easyui DataGrid 整合struts2增删查该入门实例(三)

主界面 添加 修改 删除 查询暂时按照单字段id查询 页面主要代码easyDemo1.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getConte......

一念三千
2012/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
4
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
5
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0
聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部