Easyui基本用法

Easyui基本用法

注意data-options属性定义easyui属性的

如果效果时静态（数据是不变的）的使用html

动态的使用html+js

如果该组件是abc，那么控制abc的语法

$("jquery选择器取到abc").abc({

属性名：值

事件：function(参数){}

})

方法：如果该组件是abc，那么控制abc方法的语法

$("jquery选择器取到abc").abc("方法名")；//调用方法

$("jquery选择器取到abc").abc("方法名","参数")；//调用方法

1. 导包引入文件

<linkrel="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>

2. ajxa请求（去做一个提交动作 ，让表单（form）成为 ajax 提交的表单（form））

$("#login_btn").click(function () {
    $('#login_form').form('submit', {
        url:"/toLogin",
        onSubmit: function(){
            // do some check
            // return false to prevent submit;
        },
        success:function(data){
            alert(data)
        }
    });
});

3. 菜单

使用设个动态加载
<ul id="tt"></ul>

$('#tt').tree({
    url:'tree_data.json'
});


后端要返回这个形式的json数据，easyUI会自动封装到菜单上
每个节点可以包括下列属性：
id：节点的 id，它对于加载远程数据很重要。
text：要显示的节点文本。
state：节点状态，'open' 或 'closed'，默认是 'open'。当设置为 'closed' 时，该节点有子节点，并且将从远程站点加载它们。
checked：指示节点是否被选中。
attributes：给一个节点添加的自定义属性。
children：定义了一些子节点的节点数组。

[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
		"text":"File1",
		"checked":true
    },{
		"text":"Books",
		"state":"open",
		"attributes":{
			"url":"/demo/book/abc",
			"price":100
		},
		"children":[{
			"text":"PhotoShop",
			"checked":true
		},{
			"id": 8,
			"text":"Sub Bookds",
			"state":"closed"
		}]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
		"text":"Java"
    },{
		"text":"C#"
    }]
}]

4. 选项卡

获取指定的标签页面板（tab panel）(判断选显卡是否存在不存在时null)

alert($("#main_tabs").tabs("getTab",node.text));

添加选项卡，如果不存在则添加，反之选中该选项卡

 $(function () {
        $('#main_menu').tree({
            url:'/user/menu',
            onClick: function(node){
                // alert($("#main_tabs").tabs("getTab",node.text));
                if ($("#main_tabs").tabs("getTab",node.text)==null){
                    $('#main_tabs').tabs('add',{
                        title: node.text,
                        selected: true,
                        closable:true，
                       
// 页面跳转
                        href:"http://localhost:8080/Html/"+node.attributes.filename
                    });
                } else {
                    $("#main_tabs").tabs("select",node.text)
                }

            }
        });
    })

菜单实体类

    private int id;
    private String text;
    private List<Menu> children;
    // 如果一个自定义属性可以这么些
    private String filename;
    // 如果多个
    private Attributes attributes;

5. easyui分页(controller只接受rows，total这两个参数)，
6. 后端把数据封装成这个样式发给前端

   // 当前页显示的数据
    private List<?> rows;
    // 表中总个数
    private int total;