前端框架easy-ui的使用总结

一、表格

• 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.$);
			}
		} ]
	});