欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

EasyUI实战经验总结,给有需要的人 easyui计算机毕设管理系统 

程序员文章站 2022-05-27 15:05:36
...

 

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实战经验总结,给有需要的人
            
    
    
        easyui计算机毕设管理系统 

感觉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属性,运行的效果如:

EasyUI实战经验总结,给有需要的人
            
    
    
        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);
        }
    }
});

EasyUI实战经验总结,给有需要的人
            
    
    
        easyui计算机毕设管理系统 

 

数的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

上一篇: maven之基础和私服

下一篇: File