EasyUI实战经验总结，给有需要的人

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

1、最常用的表格

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

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

        $("#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格式文件内容是

{
	"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、表格扩展，下面是扩展的写法

    $.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、表单

     <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

       $("#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、树，直接看代码吧，代码有注释

                 $("#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文件

[
	{
		"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文件

 <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