easyui

最近公司培训EasyUI，就做下总结吧，给有需要的人。

1、最常用的表格

1
2
3
<div class="easyui-panel" data-options="region:'center'" style="padding: 20px">
     <table id="dg"></table>
 </div>

注意<table>标签，我们将利用这个标签进行表格加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
$("#dg").datagrid({
    //---------------------------- 属性 Properties ----------------------------
    //请求类型 默认post
    method: "get",
    //请求url地址 默认null
    url: "../../../json/grid.json",
    toolbar: [{
        iconCls: 'icon-add',
        handler: function () {
            alert("add");
        }
    }, {
        iconCls: 'icon-edit',
        handler: function () {
            //alert("edit");
            console.log($("#dg").datagrid("getChecked"), $("#dg").datagrid("getSelected"));
        }
    }, {
        iconCls: 'icon-remove',
        handler: function () {
            alert("remove");
        }
    }],
    //是否分页  默认false
    pagination: true,
    //分页的位置 默认bottom ['top','bottom','both']
    pagePosition: "bottom",
    //每页数量  默认10
    pageSize: 50,
    //每页页数控制 默认[10,20,30,40,50]
    pageList: [50, 100, 200, 500],
    //当前页 默认1
    pageNumber: 1,
    //列配置
    columns: [
    [{ field: 'DHOrderNo', title: "订货单编号", width: 100, halign: "center", align: "left", resizable: false },
        { field: 'TotalQty', title: "订单总数", width: 100, sortable: true, editor: "text" },
        {
            field: 'SupplierName', title: "供应商", width: 100, sortable: true,
            //格式化对象
            formatter: function (value, row, index) {
                if (value) {
                    return value.Name;
                }
            },
            //注意：如果该列数据源是Object需按以下方式排序
            //不一定要用显示的属性，也可以使用其他属性，看情况而定。
            sorter: function (a, b) {
                return a.Name == b.Name ? 0 : a.Name > b.Name ? 1 : -1;
            }
        },
        { field: 'CreateDate', title: "创建日期", width: 100, editor: "datebox" },
        {
            field: 'action', title: '操作', width: 70, align: 'center',
            formatter: function (value, row, index) {
                if (row.editing) {//编辑中
                    var s = '<a href="#" onclick="saverow(this)">保存</a> ';
                    var c = '<a href="#" onclick="cancelrow(this)">取消</a>';
                    return s + c;
                } else {
                    var e = '<a href="#" onclick="editrow(this)">修改</a> ';
                    var d = '<a href="#" onclick="deleterow(this)">删除</a>';
                    return e + d;
                }
            }
        }
    ]]
});

那么页面的效果是：

感觉easyui的界面还是蛮清爽的
这边的nav.json是一个json格式文件内容是
1
2
3
4
5
6
7
8
9
10
11
12
{
    "total":360,
    "rows":[
        { "DHOrderNo":1, "Funding": "资金方1","Number":2,"Unit":50,"TotalQty":100,"SupplierName":{ "Id":1, "Name":"供应商1" },"CreateDate":"2015-05-21","Flag":1 },
        { "DHOrderNo":2, "Funding": "资金方2","Number":5,"Unit":50.01,"TotalQty":250.05,"SupplierName":{ "Id":2, "Name":"供应商2" },"CreateDate":"2015-05-21","Flag":0 },
        { "DHOrderNo":3, "Funding": "资金方3","Number":10,"Unit":60, "TotalQty":600,"SupplierName":{ "Id":3, "Name":"供应商3" },"CreateDate":"2015-05-21","Flag":1 }
    ],
    "footer":[
        { "Funding":"平均","TotalQty": 316.68 },
        { "Funding":"总和","TotalQty": 950.05 }
    ]
}
 
2、表格扩展，下面是扩展的写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    $.fn.ProductGrid = function(options, param) {
    var me = this;
    //判断options是否是string类型
    if (typeof options == 'string') {
        //根据options从datagrid的配置中查找
        var method = $(this).datagrid('options')[options];
        //如果没找到，从$.fn.ProductGrid的methods中查找
        if (!method)
            method = $.fn.ProductGrid.methods[options];
        //如果存在，调用方法
        if (method)
            return method(this, param);
        else
            alert(options + 'can not support');
    }
    var defaults = {
        url : options.url,
        method : 'get',
        border : false,
        singleSelect : true,
        fit : true,
        fitColumns : true,
        //附加的公共方法
        searchByPage : function(jq, id) {
            alert('this is public function!');
            $(me).datagrid('load', {});
        },
        columns : [ [
            {field:'DHOrderNo',title:"ID",width:80},
            {field:'Funding',title:"资金方",width:100},
            { field: 'TotalQty', title: "数量", width: 80 }
        ]]
    };
    options = $.extend(defaults, options);
    $(me).datagrid(options);
};

2、表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<form id="form" method="get">
    <table>
        <tr>
            <td>姓名:</td>
            <td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td><input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'"></input></td>
        </tr>
        <tr>
            <td>备注:</td>
            <td> <textarea name="message" style="height:60px;"></textarea></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><select name="age" class="easyui-combobox" >
                <option value="1">20~30</option>
                <option value="2">30~40</option>
                <option value="3">40以上</option>
            </select></td>
        </tr>
        <tr>
            <td>日期:</td>
            <td><input class="easyui-datebox" name="date" /></td>
        </tr>
        <tr>
            <td>数字:</td>
            <td><input class="easyui-numberbox" name="number" /></td>
        </tr>
    </table>
    <div>
        <a id="load" class="easyui-linkbutton" href="javascript:">加载本地数据</a>
        <a id="load2" class="easyui-linkbutton" href="javascript:">加载ajax数据</a>           
        <a id="submit" class="easyui-linkbutton" href="javascript:">提交</a>
        <a id="clear" class="easyui-linkbutton" href="javascript:">清空</a>
    </div>
</form>

对应的js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#submit").on("click",function(){
     $('#form').form("submit",{
         url:"../../json/submit.json",
         onSubmit:function(pParam){
             //附加表单以外的一些验证
             //通过pParam附加一些提交参数
             pParam.index = 1;
             return $('#form').form("validate");
         },
         success:function(data){
             alert(data);
         }              
     });
 });
 $("#clear").on("click",function(){
     $('#form').form("reset");
 });

注意表单中的easyui属性，运行的效果如：

 

3、树，直接看代码吧，代码有注释

1
2
3
4
5
6
7
8
9
10
     $("#tree").tree({
    url:"json/nav.json",
    method:"get",
    lines:true,
    onClick:function(node){
        if(node.url && node.url.length > 0){
            _this.add(node.text,node.url,node.id,node.icon);
        }
    }
});

 

数的json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[
    {
        "id":101,"text":"2、表单",
        "children":[
            { "id":2, "text": "2.1、简单示例", "url":"views/form/form.html" },
            { "id":3, "text": "2.2、常用示例", "url":"views/form/forms.html" }
        ]
    },{
        "id":102,"text":"3、表格",
        "children":[
            { "id":4, "text": "3.1、简单示例", "url":"views/grid/grid.html" },
            { "id":5, "text": "3.2、明细示例", "url":"views/grid/gridDetail.html" },
            { "id":6, "text": "3.2、行编辑示例", "url":"views/grid/edit.html" },
            { "id":6, "text": "3.2、表格编辑示例", "url":"views/grid/edit2.html" }
        ]
    },{
        "id":103,"text":"4、树",
        "children":[
            { "id":4, "text": "4.1、简单示例", "url":"views/tree/tree.html" },
            { "id":5, "text": "4.2、示例", "url":"views/tree/treeGird.html" }
        ]
    }
]

如果把这个文件放在vs中，运行index.html时候回报错，请在web.config中配置，才能识别.json文件

1
2
3
4
5
<system.webServer>
   <staticContent>
     <mimeMap fileExtension=".json" mimeType="application/json" />
   </staticContent>
 </system.webServer>

EasyUI的中午文档 和学习网站

http://www.zi-han.net/case/easyui/index.html

http://www.jeasyui.net/demo/380.html

posted @ 2015-09-10 17:41  ihanliu  阅读(203)  评论(0)  编辑  收藏  举报