先上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>
