image.png

1. 插件安装


补充:在页面的开头,需要加上项目路径的设置代码:

var ctx = "${pageContext.request.contextPath}"; //设置项目的根路径

使用该框架非常简单,首先,准备一下easyUI的资源和框架js

image.png

随便创建一个test.html,引入必要的资源。

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>

然后,在页面的末尾引入:

<script src="very-easyui-1.0.0.js"></script>


2. data-grid 列表

首先,在body中声明一个grid0,(grid0代表第一个grid)

<div id="grid0" style="height:500px;width:100%;"></div>

然后在js中设置grid0的详细:

	var grid0 = {
		title : '学生列表' ,
		url : '/queryStudents.do',
		singleSelect : true ,
		hasSelect : true ,
		paging : true ,
		fields : [
		          '50|id|学生编号',
		          '100|username|学生姓名',
		          '100|classname|学生班级'
		         ],
		buttons : [
					{name:'新增学生',actionName:'addStudent'},
		          ]	,
		search : {
			fields : [
						's_username|学生姓名'
			         ],
			     
		}          
	}

效果:

image.png


属性:

title: 列表名称

url: 列表加载数据的接口地址

singleSelect : 是否是单选

hasSelect : 是否有选择列

paging: 是否要分页

fields : 字段详情,是一个数组,每一个数组项是一个这样的字符串:  '100|username|学生姓名' , 分别代表 长度|字段名|字段中文

注意: 可以在字段中文后面加一项,代表字段的特殊化,目前支持的有:

view  字段会变成超链接,点击会弹出页面,展示该条数据的详情
download 字段会变成下载链接,能够下载该字段指向的具体内容









buttons: 设置该列表拥有的按钮,每一个按钮对应的点击事件就是actionName


search: 设置列表的查询条件。


3. 灵活表单

你可以通过以下代码迅速打开一个新的表单:

var option = {
			title : '创建新的分组',
			fields : [
			          {id:'id',name:'分组编号(新增不填)',type:'text'},
			          {id:'groupName',name:'分组名称',type:'text'},
			         ],
			url : '/t002.do'         
		}
openWin(400,300,option);

以上代码可以快速打一个新的窗口,窗口里面是一个表单,每一项通过fields来配置。

需要注意的是,fieldtype属性支持这样几个值:text,textarea,file

file是文件上传框,如果需要使用这个配置,你还需要在页面上加这一段:

<div class="easyui-dialog"  id="UploadWin" style="width: 670px;height: 450px;padding: 10px 20px" closed="true">
	<iframe scrolling="no" src="${pageContext.request.contextPath}/upload.jsp"></iframe>
</div>

这是文件上传所需要的iframe,upload.jsp在示例项目中有。


你也可以实现勾选列表的一条数据,然后打开表单,表单会自动填充勾选的数据。参考代码如下:

	var selectedRows=$("#dg0").datagrid('getSelections');
	var row=selectedRows[0];
	if(!row){
		M("请选择一个联系人!");
		return;
	}
	var option = {
		title : '发邮件',
		fields : [
		          {id:'userName',name:'联系人邮箱',type:'text'},
		          {id:'userDescription',name:'联系人名称',type:'text'},
		          {id:'content',name:'邮件内容',type:'textarea'},
		          {id:'fj',name:'附件上传',type:'file'},
		         ],
		url : '/t001.do'         
	}
	openWin(500,400,option,row);


open方法最后一个参数row是可选项,这种需求row不能为空。


4. 大M方法

你可以通过大M方法,快速产生一个弹出框。例如:

M("请选择一个群组!");

其实就是用了easyui弹出层:

	function M(msg){
		$.messager.alert('系统提示',msg);
	}





附录:

easyUI常用代码


获取选中行

var selectedRows=$("#dg1").datagrid('getSelections');
var row=selectedRows[0];


手动刷新Grid

$('#dg0').datagrid('load',{
	fieldXXX:xxx
});


grid行点击

$('#dg1').datagrid({
	onClickRow:function(rowIndex,rowData){
		console.log(rowData);
		$('#dg0').datagrid('load',{
			userCode6:rowData.id
		});
	}
});


手动打开dialog

$("#dlg").dialog("open").dialog("setTitle","添加信息");


通用批量删除逻辑:

	function deleteObj(){
		var selectedRows=$("#dg").datagrid('getSelections');
		if(selectedRows.length==0){
			$.messager.alert('系统提示','请选择要删除的数据!');
			return;
		}
		var strIds=[];
		for(var i=0;i<selectedRows.length;i++){
			strIds.push(selectedRows[i].id);
		}
		var ids=strIds.join(",");
		$.messager.confirm("系统提示","您确认要删除这<font color=red>"+selectedRows.length+"</font>条数据吗?",function(r){
			if(r){
				$.post("types/delete.do",{ids:ids},function(result){
					if(result.code == 0){
						$.messager.alert('系统提示',"您已成功删除数据!");
						$("#dg").datagrid("reload");W
					}else{
						$.messager.alert('系统提示',result.errorMsg);
					}
				},"json");
			}
		});
	}


打开tab页(iframe版本)

	function openTab(text,url,iconCls){
		if($("#tabs").tabs("exists",text)){
			$("#tabs").tabs("select",text);
		}else{
			var content="<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='${pageContext.request.contextPath}/"+url+"'></iframe>";
			$("#tabs").tabs("add",{
				title:text,
				iconCls:iconCls,
				closable:true,
				content:content
			});
		}
	}


下载地址:

very-easyui-1.0.0.zip

(本文档正在全力更新中... ... )