EasyUI–表格datagrid详解

具体解释都写在文字描述里面了,先看示意图:
这里写图片描述

先上json数据源文件代码:

json/users_data.json

[
	{
	    "userId":"1",
		"userName":"test",
		"userEmail":"maoge@maoge.com",
		"userSex":"1"
	},
	{
	    "userId":"2",
		"userName":"haha",
		"userEmail":"haha@maoge.com",
		"userSex":"0"
	}
]

网页源码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>数据网格datagird</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
	<script type="text/javascript" src="easyui/jquery.min.js"></script>
	<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  </head>
  <body>
 	<h3>datagrid使用详解</h3>
 	<div>1,请跟随文字描述的足迹,走进web应用中最重要的控件-数据网格(表格)</div>
 	<div>2,为什么最重要?计算机程序的主要意义是抽取现实工作中相似逻辑,让计算机去解决重复劳动。而现实中的一个一个的对象,在网页上最好的表现方式就是表格的一行一行</div>
	<hr/>
	<div>3,第一个例子,注意:a,easyui-datagrid应用于table标签上;b,users_data.json为数据源,代码在最后有;注意列绑定是通过field值对应json中的键完成的</div>
	<div>另外还需要注意,align和halign分别表示列单元格内容和列标题位置</div>
	<table class="easyui-datagrid" title="数据绑定及列位置演示" style="width:500px;height:120px" 
		data-options="singleSelect:true,collapsible:true,url:'json/users_data.json'">
		<thead>
			<tr>
				<th data-options="field:'userId',width:100,halign:'right'">用户编号</th>
				<th data-options="field:'userName',width:100,halign:'left'">用户名</th>
				<th data-options="field:'userEmail',width:200,align:'right',halign:'left'">邮箱</th>
				<th data-options="field:'userSex',align:'left'">性别</th>
			</tr>
		</thead>
	</table>
	<hr/>
	<div>4,第二个例子,根据不同列的需求,对列内容的显示进行调整,比如性别,可将0/1转换为男/女</div>
	<div>注意是通过列data-options的formatter指定一个列内容对应的格式化函数</div>
	<div>然后是效率问题,其实不大,因为表格最后肯定要分页,每页最多也就100多条数据,调用100多次格式化函数的事情</div>
	<table class="easyui-datagrid" title="列内容格式化示例" style="width:500px;height:120px" 
		data-options="singleSelect:true,collapsible:true,url:'json/users_data.json'">
		<thead>
			<tr>
				<th data-options="field:'userId',width:100">用户编号</th>
				<th data-options="field:'userName',width:100">用户名</th>
				<th data-options="field:'userEmail',width:200">邮箱</th>
				<th data-options="field:'userSex',formatter:formatUserSex">性别</th>
			</tr>
		</thead>
	</table>
	<hr/>
	<div>5,第三个例子,工具栏的使用</div>
	<div>注意是通过datagrid的data-options的toolbar指定的工具栏,而工具栏具体内容完全可以自定义</div>
	<table class="easyui-datagrid" title="工具栏示例" style="width:500px;height:180px" 
		data-options="singleSelect:true,url:'json/users_data.json',toolbar:'#toolbar'">
		<thead>
			<tr>
				<th data-options="field:'userId',width:100">用户编号</th>
				<th data-options="field:'userName',width:100">用户名</th>
				<th data-options="field:'userEmail',width:200">邮箱</th>
				<th data-options="field:'userSex',formatter:formatUserSex">性别</th>
			</tr>
		</thead>
	</table>
	<!-- 工具栏 -->
	<div id="toolbar" style="padding:2px 5px;">
		统计日期: <input id="datebox" class="easyui-datebox" style="width:100px">
		统计类别: 
		<select id="combobox" class="easyui-combobox" panelHeight="auto" style="width:100px">
			<option value="0">存款</option>
			<option value="1">理财</option>
			<option value="2">保险</option>
			<option value="3">基金</option>
		</select>
		<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="calculate();">开始统计</a>
	</div>
	<hr/>
	<div>6,第四个例子,获取选中项</div>
	<div>注意:a,点击按钮将选择模式改为多选模式</div>
	<div>b,getSelected方法只能获取一个被选择项(哪怕有多个被选中项),getSelections可以获取所有被选择项(单选模式下也可以获取一个被选中项)</div>
	<table id="grid_select" class="easyui-datagrid" title="获取选中项" style="width:500px;height:180px" 
		data-options="singleSelect:true,collapsible:true,url:'json/users_data.json',toolbar:'#toolbar_select'">
		<thead>
			<tr>
				<th data-options="field:'userId',width:100">用户编号</th>
				<th data-options="field:'userName',width:100">用户名</th>
				<th data-options="field:'userEmail',width:200">邮箱</th>
				<th data-options="field:'userSex',formatter:formatUserSex">性别</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar_select" style="padding:2px 5px;">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="changeMode(true);">单选模式</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="changeMode(false);">多选模式</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="getSelected();">getSelected</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="getSelections();">getSelections</a>
	</div>
	<hr/>
	<div>7,第五个例子,演示常用的,带checkbox复选框的datagrid</div>
	<div>很简单,加一个复选框列即可,如下面的userCheck列</div>
	<div>注意有复选框情况下,一般都是多选,所以singleSelect:false,而selectOnCheck:false,checkOnSelect:false表示复选框的选中和行的选中互不干涉</div>
	<table id="grid_check" class="easyui-datagrid" title="带复选框" style="width:500px;height:120px" 
		data-options="singleSelect:false,collapsible:true,url:'json/users_data.json',selectOnCheck:false,checkOnSelect:false">
		<thead>
			<tr>
				<th data-options="field:'userCheck',checkbox:true"></th>
				<th data-options="field:'userId',width:100">用户编号</th>
				<th data-options="field:'userName',width:100">用户名</th>
				<th data-options="field:'userEmail',width:200">邮箱</th>
				<th data-options="field:'userSex',formatter:formatUserSex">性别</th>
			</tr>
		</thead>
	</table>
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="getChecked();">获取check项</a>
	<hr/>
	<script type="text/javascript">
		//注意val表示单元格值,row表示对应实体,返回值表示格式化之后的单元格内容
		function formatUserSex(val,row){
			if(val=="0")//男
				return '<span style="color:blue;">男</span>';
			else//女
				return '<span style="color:red;">女</span>';
		}
		function calculate(){
			var date=$("#datebox").datebox("getValue");
			var type=$("#combobox").combobox("getValue");
			var text=$("#combobox").combobox("getText");
			alert(date+type+text);
		}
		function changeMode(flag){
			$("#grid_select").datagrid({singleSelect:flag});
		}
		function getSelected(){
			var row = $("#grid_select").datagrid("getSelected");
			if (row){
				alert(row.userName);
			}
		}
		function getSelections(){
			var result = [];
			var rows = $("#grid_select").datagrid("getSelections");
			for(var i=0; i<rows.length; i++){
				var row = rows[i];
				result.push(row.userName);
			}
			alert(result.join(','));
		}
		function getChecked(){
			var result = [];
			var rows = $("#grid_check").datagrid("getChecked");
			for(var i=0; i<rows.length; i++){
				var row = rows[i];
				result.push(row.userName);
			}
			alert(result.join(','));
		}
	</script>
  </body>
</html>


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页