jQueryEasyUI2

一：Message（消息窗口）

1、定义：消息对话框,本质就是一个window(dialog),只是我们使用他的时候不需要手动创建
2、常用语法：

	$.messager.confirm
		title：在头部面板显示的标题文本。
		msg：显示的消息文本。
		fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值

二、综合案例

1、页面整体布局：（常用）

(1)头部：头部信息(主要放的是logo,用户名等…)
（2）左侧：树型菜单
（3）主体内容：(展示欢迎页面) -> layout中主体必需有

2、左侧树菜单布局

（1）准备树菜单

$("#menuTree"),tree({
//属性：
url:"menuTree.json",
method:’get’,
})

3、选中节点添加选项卡

onClick:function(node){
					//选中节点不行有url才添加选项卡
					if(node.url){
						//如果当前选项卡已存在就不添加了
						if(!$("#tabsId").tabs('exists',node.text)){
							$('#tabsId').tabs('add',{
						title:node.text,
						closable:true,
						content:"<iframe frameborder=0 style='width:100%;height:100%' src='"+node.url+"'></iframe>"
							})
						}else{
							//选择当前页面
		$('#tabsId').table('select',node.text);
						}
					}	
				}

4、员工管理：数据列表

（1）部门数据显示：
1>标签添加formatter=‘deptFormatter’

function deptFormatter(obj){
	if(obj){
					return obj.name;
				}else{
					return "没有部门"
				}
}

(2)头像数据显示
1>标签添加formatter=‘deptFormatter

if(value){
		return "<img src="+value+" style='height:70px;width:70px'></img>";
	}

5、添加按钮与事件

1、准备按钮：
2、给按钮添加事件：

$("a").on('click',function(){
			//获取点击的按钮
			var methodName = $(this).data("method");
			if(methodName){
				//根据点击的方法名获取itsource属性，然后调用方法
				itsource[methodName]();
			}
});

3、将所有方法设置为属性，封装成一个对象

var method={
	add：function(){},
	edit：function(){},
	remove：function(){},
	....
}

6、高级查询

1、得到所有查询条件：
（1）引入jquery.jdirk.js，一键获取所有数据
//获取表单输入的内容(查询条件)

var params = searchForm.serializeObject();

（2）//发送请求，表格加载数据

employeeDatagrid.datagrid('load', params);

7、删除功能

1、获得需要删除的行

var rowData = employeeDatagrid.datagrid("getSelected");

2、判断是否删除

$.messager.confirm('确定', '真的要狠心删除嘛?', function(r){
                    if (r){
                        //确定后进行删除
                        $.get("success.json?id=" + rowData.id, function(data) {
                            if (data.success) {//删除成功
                                $.messager.alert('消息提示', '删除成功!', 'info',
                                    function() {
                                        //3.调用重新加载数据的方法
                                        employeeDatagrid.datagrid("reload");
                                    });
                            } else {
                                $.messager.alert('错误提示', data.msg, 'error');
                            }
                        }, 'json');
                    }
                });
            }else{
                //给出提示
                $.messager.alert("提示","请选择后再进行删除！","info");
            }

8、添加功能

（1）引入css、密码验证js：

<link rel="stylesheet" type="text/css" href="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.css">
<script src="/easyui/plugin/jquery.jdirk.js"></script>

2）准备弹出列表

9、修改功能

（1）准备表单
（2）js支持：
1>隐藏、禁用密码框

$("tr[pwd=true]").hide();
$("tr[pwd=true] input").validatebox('disableValidation');

2>数据回显：

$('#operateForm').form('load',row);