具体解释都写在文字描述里面了，先看示意图：
先上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>
随时随地看视频
