将静态HTML渲染为datagrid样式:
<!-- 方式一:将静态HTML渲染为datagrid样式 -->
<table class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>小明</td>
<td>90</td>
</tr>
<tr>
<td>002</td>
<td>老王</td>
<td>3</td>
</tr>
</tbody>
</table>
发送ajax请求获取json数据创建datagrid
<!-- 方式二:发送ajax请求获取json数据创建datagrid -->
<table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'"
class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">编号</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年龄</th>
</tr>
</thead>
</table>
使用easyUI提供的API创建datagrid:
<div>
<table id="mytable"></table>
</div>
<!-- 方式三:使用easyUI提供的API创建datagrid -->
<script type="text/javascript">
$(function(){
//页面加载完成后,创建数据表格datagrid
$("#mytable").datagrid({
//定义标题行所有的列
columns:[[
{title:'编号',field:'id',checkbox:true},
{title:'姓名',field:'name'},
{title:'年龄',field:'age'},
{title:'地址',field:'address'}
]],
//指定数据表格发送ajax请求的地址
url:'${pageContext.request.contextPath }/json/datagrid_data.json',
rownumbers:true,
singleSelect:true,
//定义工具栏
toolbar:[
{text:'添加',iconCls:'icon-add',
//为按钮绑定单击事件
handler:function(){
alert('add...');
}
},
{text:'删除',iconCls:'icon-remove'},
{text:'修改',iconCls:'icon-edit'},
{text:'查询',iconCls:'icon-search'}
],
//显示分页条
pagination:true
});
});
</script>
如果数据表格中使用了分页条,要求服务端响应的json变为:
请求参数:page:1 当前第几页 rows:10 每页多少条。
响应:为上面的json数据,total 共多少条信息,rows当前页的信息集合。
介绍完毕,下面是扩展,会实际举例说明:
举例:扩展工具栏,点击事件,数据回显,带查询条件分页等;
先创建table:
<div region="center" border="false">
<table id="grid"></table>
</div>
页面加载完成后,根据id绑定成为datagrid:
$('#grid').datagrid( {
fit : true,
border : true,
rownumbers : true,
striped : false,
pageList: [10],
pagination : true,
toolbar : toolbar,
url : "demoAction_pageQuery.action",
idField : 'id',
columns : columns,
//为数据表格绑定双击事件
onDblClickRow : doDblClickRow
});
定义列:
// 定义列
var columns = [ [ {
field : 'id',
checkbox : true,
},{
field : 'name',
title : '姓名',
width : 120,
align : 'center'
}, {
field : 'telephone',
title : '手机号',
width : 120,
align : 'center'
}, {
field : 'deltag',
title : '是否删除',
width : 120,
align : 'center',
formatter : function(data,row, index){
if(data=="0"){
return "正常使用"
}else{
return "已删除";
}
}
} ] ];
工具栏:
//工具栏
var toolbar = [ {
id : 'button-view',
text : '查询',
iconCls : 'icon-search',
handler : doView
}, {
id : 'button-add',
text : '增加',
iconCls : 'icon-add',
handler : doAdd
}, {
id : 'button-delete',
text : '删除',
iconCls : 'icon-cancel',
handler : doDelete
},{
id : 'button-save',
text : '还原',
iconCls : 'icon-save',
handler : doRestore
}];
绑定工具栏事件:
function doAdd(){
//alert("增加...");
$('#addStaffWindow').window("open");
}
删除按钮点击事件,判断是否选中了数据, 获取当前选中的数据信息:批量获取id属性
function doDelete(){
//获取数据表格中所有选中的行,返回数组对象
var rows = $("#grid").datagrid("getSelections");
if(rows.length == 0){
//没有选中记录,弹出提示
$.messager.alert("提示信息","请选择需要删除的信息!","warning");
}else{
//选中,弹出确认框
$.messager.confirm("删除确认","你确定要删除选中的信息吗?",function(r){
if(r){
var array = new Array();
//确定,发送请求
//获取所有选中信息的id
for(var i=0;i<rows.length;i++){
var data= rows[i];//json对象
var id = data.id;
array.push(id);
}
var ids = array.join(",");//1,2,3,4,5
location.href = "demoAction_deleteBatch.action?ids="+ids;
/**
$.post("demoAction_deleteBatch.action",{"ids":ids},function(data){
alert(data);
});
**/
}
});
}
}
上面还定义了一个双击事件:这里扩展一下回显
//数据表格绑定的双击行事件对应的函数
function doDblClickRow(rowIndex, rowData){
//打开修改窗口
$('#editdemoWindow').window("open");
//使用form表单对象的load方法回显数据
$("#editdemoForm").form("load",rowData);
}
扩展:分页查询(带有过滤条件)
datagrid提供的方法:用于重新发送ajax请求,并且可以提交参数
使用:、
第一步:提供一个工具方法,可以将指定的form表单中所有的输入项转为json数据,用于参数提交
//定义一个工具方法,用于将指定的form表单中所有的输入项转为json数据{key:value,key:value}
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
$(array).each(function(){
if(serializeObj[this.name]){
if($.isArray(serializeObj[this.name])){
serializeObj[this.name].push(this.value);
}else{
serializeObj[this.name]=[serializeObj[this.name],this.value];
}
}else{
serializeObj[this.name]=this.value;
}
});
return serializeObj;
};
第二步:为查询窗口中查询按钮绑定事件
注意这里调用的是数据表格的方法,页面并没有刷新。
$("#btn").click(function(){
//将指定的form表单中所有的输入项转为json数据{key:value,key:value}
var p = $("#searchForm").serializeJson();
console.info(p);
//调用数据表格的load方法,重新发送一次ajax请求,并且提交参数
$("#grid").datagrid("load",p);
//关闭查询窗口
$("#searchWindow").window("close");
});
服务端实现:
1.包装PageBean工具类:封装分页相关的属性,生成get,set方法,在SSH项目底层代码构建文章中,分页查询方法扩展里已实现,参考文章。
2.在BaseDao中扩展通用分页查询方法:在SSH项目底层代码构建文章中,分页查询方法扩展里已实现,参考文章。
第三步后端:修改Action中分页查询方法,这里是多条件的。
public String pageQuery(){
DetachedCriteria dc = pageBean.getDetachedCriteria();
//动态添加过滤条件
String addresskey = model.getAddresskey();
if(StringUtils.isNotBlank(addresskey)){
//添加过滤条件,根据地址关键字模糊查询
dc.add(Restrictions.like("addresskey", "%"+addresskey+"%"));
}
Region region = model.getRegion();
if(region != null){
String province = region.getProvince();
String city = region.getCity();
String district = region.getDistrict();
dc.createAlias("region", "r");
if(StringUtils.isNotBlank(province)){
//添加过滤条件,根据省份模糊查询-----多表关联查询,使用别名方式实现
//参数一:分区对象中关联的区域对象属性名称
//参数二:别名,可以任意
dc.add(Restrictions.like("r.province", "%"+province+"%"));
}
if(StringUtils.isNotBlank(city)){
//添加过滤条件,根据市模糊查询-----多表关联查询,使用别名方式实现
//参数一:分区对象中关联的区域对象属性名称
//参数二:别名,可以任意
dc.add(Restrictions.like("r.city", "%"+city+"%"));
}
if(StringUtils.isNotBlank(district)){
//添加过滤条件,根据区模糊查询-----多表关联查询,使用别名方式实现
//参数一:分区对象中关联的区域对象属性名称
//参数二:别名,可以任意
dc.add(Restrictions.like("r.district", "%"+district+"%"));
}
}
subareaService.pageQuery(pageBean);
this.java2Json(pageBean, new String[]{"currentPage","detachedCriteria","pageSize",
"decidedzone","subareas"});
return NONE;
}
扩展:鼠标离焦事件,根据手机号查询数据库回显数据
<td>来电号码:</td>
<td><input type="text" class="easyui-validatebox" name="telephone" required="true" />
<script type="text/javascript">
$(function(){
//页面加载完成后,为手机号输入框绑定离焦事件
$("input[name=telephone]").blur(function(){
//获取页面输入的手机号
var telephone = this.value;
//发送ajax请求,请求Action,在Action中远程掉调用crm服务,获取客户信息,用于页面回显
$.post('noticebillAction_findCustomerByTelephone.action',{"telephone":telephone},function(data){
if(data != null){
//查询到了客户信息,可以进行页面回显
var customerId = data.id;
var customerName = data.name;
var address = data.address;
$("input[name=customerId]").val(customerId);
$("input[name=customerName]").val(customerName);
}else{
//没有查询到客户信息,不能进行页面回显
$("input[name=customerId]").val("");
$("input[name=customerName]").val("");
}
});
});
});
</script>
</td>
扩展方法:datagrid编辑功能使用方式
注意:数据表格编辑功能是以列为单位,通过数据表格中的列属性定区具体那一列具有编辑功能:
开始编辑:
结束编辑:
插入一行数据:
删除一行:
获得指定行对象的索引:
数据表格提供的用于监听结束编辑事件:
实际例子:增删改查,发送ajax请求。
<table id="mytable"></table>
<!--使用easyUI提供的API创建datagrid -->
<script type="text/javascript">
$(function(){
var myIndex = -1;//全局变量,值为正在编辑行的索引
//页面加载完成后,创建数据表格datagrid
$("#mytable").datagrid({
//定义标题行所有的列
columns:[[
{title:'编号',field:'id',checkbox:true},
{width:150,title:'姓名',field:'name',editor:{
type:'validatebox',
options:{}
}},
{width:150,title:'年龄',field:'age',editor:{
type:'numberbox',
options:{}
}},
{width:150,title:'日期',field:'address',editor:{
type:'datebox',
options:{}
}}
]],
//指定数据表格发送ajax请求的地址
url:'${pageContext.request.contextPath }/json/datagrid_data.json',
rownumbers:true,
singleSelect:true,
//定义工具栏
toolbar:[
{text:'添加',iconCls:'icon-add',
//为按钮绑定单击事件
handler:function(){
$("#mytable").datagrid("insertRow",{
index:0,//在第一行插入数据
row:{}//空行
});
$("#mytable").datagrid("beginEdit",0);
myIndex = 0;
}
},
{text:'删除',iconCls:'icon-remove',handler:function(){
//获得选中的行对象
var rows = $("#mytable").datagrid("getSelections");
if(rows.length == 1){
var row = rows[0];
//获得指定行对象的索引
myIndex = $("#mytable").datagrid("getRowIndex",row);
}
$("#mytable").datagrid("deleteRow",myIndex);
//$.post();
}},
{text:'修改',iconCls:'icon-edit',handler:function(){
//获得选中的行对象
var rows = $("#mytable").datagrid("getSelections");
if(rows.length == 1){
var row = rows[0];
//获得指定行对象的索引
myIndex = $("#mytable").datagrid("getRowIndex",row);
}
$("#mytable").datagrid("beginEdit",myIndex);
}},
{text:'保存',iconCls:'icon-save',handler:function(){
$("#mytable").datagrid("endEdit",myIndex);
}}
],
//显示分页条
pagination:true,
pageList:[3,5,7,10],
//数据表格提供的用于监听结束编辑事件
onAfterEdit:function(index,data,changes){
console.info(data);
$.post();
}
});
});
</script>