将静态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 -->
<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>
请求参数：page:1 当前第几页 rows:10 每页多少条。
响应：为上面的json数据，total 共多少条信息，rows当前页的信息集合。
介绍完毕，下面是扩展，会实际举例说明：
举例：扩展工具栏，点击事件，数据回显，带查询条件分页等；
先创建table:
<div region="center" border="false">
<table id="grid"></table>
</div> $('#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>
。
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
