一、表格
- load方法,比如我已经定义一个datagrid的id为grid,那这个方法的使用方式为
$(“#grid”).datagrid(“load”,{ });
它的参数为一个json对象,里面写的是你要传输的参数的键值对,调用这个方法来加载数据的时候,它传给后台的分页信息是从第一页开始的。
- reload方法,使用方式也跟load的一样
$(“#grid”).datagrid(“reload”,{ });
看它的名字应该就可以知道它的做用了,没错,它跟load一样有加载数据功能,也一样的传参数,但它传给后台的分布信息是当前的页码,就是实现刷新当前页的功能。
- loadData方法,这个方法有比较大的不同,首先它加载的本地数据,就是不会跟后台什么的有交互,它的使用方式是
$(“#grid”).datagrid(“loadData”,{ “total”:”30″,rows:[] });
前端:
在html中定义table
<div class="content">
<table id="houseGrid" data-options="border:true"></table>
</div>
界面初始化时,大小自适应:
$(window).resize(function(){
$('#houseGrid').datagrid('resize');
var fitColumns=true;
if($(this).width()<1400){
fitColumns=false;
}
$('#houseGrid').datagrid('options').fitColumns=fitColumns;
$('#houseGrid').datagrid('resize');
});
控件初始化:
Var grid;
$(function() {
grid = $('#grid').datagrid({
url : sy.contextPath + '/pe/tenant/fee/getWxPayOrderList_noSecurity',
fit : true,
fitColumns : true,
pagination : true,
idField : 'optId',
pageSize : 20, // 指定分页显示数量
pageList : [20, 50, 100, 200 ], // 每页显示数量
rownumbers : true,
nowrap : false,
singleSelect:true,//单选
striped : true,//单双行效果
columns : [ [ // 自定义表格各个列
{
title : '状态',
align:'center',
field : 'pay_status',
width : 20,
formatter : function(value, row, index) {
if (row.pay_status == 0) {
return "<font color='grey'>未支付</font>"
} else if(row.pay_status == 1) {
return "<font color='green'>已支付</font>" ;
} else {
return "<font color='red'>关闭</font>" ;
}
}
},
] ],
toolbar : '#toolbar',
onBeforeLoad : function(param) {
parent.$.messager.progress({
text : '数据加载中....'
});
},
onLoadSuccess : function(data) {
parent.$.messager.progress('close');
}
});
});
系统启动后,会自动请求并加载数据。
刷新表格:点击刷新图标刷新的是当前页。
通过条件过滤搜索:
var doSearch=function(){
$('#grid').datagrid("load",{
queryField: $("#queryField").val(),
queryValue: $("#queryValue").val(),
feeType: $("#feeType").val(),
payStatus: $("#payStatus").val(),
startDate: $("#startDate").val(),
endDate: $("#endDate").val()
});
}
后端:
定义表格数据类EasyDataGrid
public class EasyDataGrid implements java.io.Serializable {
private Long total = 0L;
private List rows = new ArrayList();
private List footer=new ArrayList();
。。。}
List<ClassName> rows=this.getList(hql, dto.getPage(), dto.getRows()); //分页查询
grid.setTotal(total); // 总数
grid.setRows(rows); // 表格数据
return grid;
宽度自适应窗口改变:
在调整了窗口大小以后,设置easyui gridview也调整宽度
$(window).resize(function(){
$('#pay_detail_datagrid').datagrid('resize');
var fitColumns=true;
if($(this).width()<1024){
fitColumns=false;
}
$('#pay_detail_datagrid').datagrid('options').fitColumns=fitColumns;
$('#pay_detail_datagrid').datagrid('resize');
});
效果:缩小浏览器尺寸,表格pay_detail_datagrid宽度不变自适应。
二、树形view
前端:
<div class="container">
<input type="hidden" id="nodeType" name="nodeType" value=""/>
<input type="hidden" id="nodeId" name="nodeId" value=""/>
<div class="left-tree" style="overflow-y:auto" id="left-tree">
<ul id="navigation_tree" class="easyui-tree" data-options="
url:'<%=contextPath%>/pe/tree/getDstBuildTreeByUser_noSecurity',
parentField:'pid',
textFiled:'text',
idFiled:'id',
onLoadSuccess:nodeClose,
onClick:changeNode"></ul>
</div>
<div class="content">
<table id="houseGrid" data-options="border:true"></table>
</div>
</div>
三 、DIALOG
有确认按钮:
var dialog = parent.sy.modalDialog({
title : "添加表计信息",
height: 450,
width:1000,
id:'d1',
url : sy.contextPath + '/pe/files/meter-edit.jsp?houseId='+houseId, // 界面内容
buttons : [ {
text : '保存',
handler : function() {
dialog.find('iframe').get(0).contentWindow.submitForm(dialog,$("#houseList"), parent.$);
}
} ]
});