前端框架jQuery EasyUI_02

最新推荐文章于 2024-06-19 21:34:23 发布

public_sbw

最新推荐文章于 2024-06-19 21:34:23 发布

阅读量234

点赞数

分类专栏： jQuery EasyUi 文章标签： jQuery EasyUI

本文链接：https://blog.csdn.net/public_sbw/article/details/79697669

版权

jQuery EasyUi 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

选项卡右键菜单menu显示：

//对选项卡添加右键事件
$("#tabs1").tabs({
    onContextMenu : function(e, title,index) {
        //阻止浏览器默认右键菜单显示
        e.preventDefault();
				
        //显示自定义右键菜单
        $("#menu").menu("show",{
            left: e.pageX,
            top: e.pageY
        })
    }
})

具体步骤：

设置EasyUI右键菜单

calss="easyui-menu" -->初始化默认隐藏

在选项卡右键显示菜单：

//对选项卡添加右键事件

$("#tabs").tabs({

onContentMenu : function(e, title, index){

//阻止浏览器默认右键菜单

e.preventDefault();

//显示自定义右键菜单

$("#menu").menu("show",{

left : e.pageX,

top : e.pageY

})

}

})

对菜单添加图标：

data-options="iconCls:'icon-cancel'"

下拉菜单menubutton

<a href="#" class="easyui-menubutton" data-options="iconCls:'icon-remove',menu:'#menu'">
		菜单
</a>

<!-- 菜单,默认初始化隐藏 -->
<div id="menu" class="easyui-menu" style="width:120px">
	<div>关闭当前窗口</div>
	<div>关闭其他窗口</div>
	<div class="menu-sep"></div>
	<div data-options="iconCls:'icon-cancel'">关闭所有窗口</div>
</div>

具体步骤：

设置下拉菜单：

class="easyui-menubutton"

设置菜单显示：

data-options="menu:'#menu'"

消息窗口的使用：

$(function(){
		//显示警告窗口
		//$.messager.alert("标题", "警告内容", "warning");
		
		//确认窗口
		$.messager.confirm("标题", "确认删除吗？", function(result){
			if(result) {
				alert("删除中...");
			}else{
				alert("取消删除...")
			}
		});
		
		//输入窗口
		 $.messager.prompt("标题", "你的名字？", function(val){
			alert("你好！" + val);
		}); 
		
		//右下角窗口
		 $.messager.show({  	
		  title:'标题',  	
		  msg:'惊喜！！！<a href="#">点击</a>',  	
		  timeout:5000,  	
		  showType:'slide'  
		}); 
		
		//进度条
		$.messager.progress({
			interval:1000  //每秒10%
		});
		//定时器
		window.setTimeout("$.messager.progress('close');",5000);
		
	});

jQuery EasyUI 窗口window 的使用：

<script type="text/javascript">
	$(function(){
		$("#but").click(function(){
			$("#mywindow").window('open');
		})
	});
</script>
</head>
<body>
	<div id="mywindow" class="easyui-window"
		data-options="title:'窗口标题',collapsible:false,modal:true,closed:true"
		style="width:200px;height:200px">
		窗口内容
	</div>

	<input type="button" value="打开" id="but"/>
	
	<input type="text"/>
</body>

具体步骤：

设置窗口：

class="easyui-window"

窗口属性:

data-options="

title:'窗口标题',

collapsible:折叠按钮,默认true,

minimizable:最小化按钮,默认true,

maximizable:最大化按钮,默认true,

closable:关闭按钮,默认true,

modal:是否是窗口模式,默认false,

closed:初始化是否关闭,默认false"；

触发显示窗口：

$("#but").click(function(){

$("#mywindow").window('show');

});

jQuery EasyUI的表单form组件：

检验框：
class="easyui-validatebox"-->设置required属性为true
数字检验：
class="easyui-numberbox"
日期检验框：
class="easyui-datebox"
下拉输入框：
class="easyui-combobox"

jQuery EasyUI的分页功能：

在页面显示表格的位置：
		<table id="grid"></table>
	在js代码中：
		$("#grid").datagrid({
			//设置表格
			columns:[[ //二维数组可做多级表头
				{
					field:"", //与返回的json字段一一对应
					title:"", //页面显示列名
					width: //宽度
				},
				{}
			]],
			//显示json数据
			url : "",
			pagination : true, //分页工具条
			toolbar : [ //顶部工具栏
				id : "",
				text : "",
				iconCls : "",
				handler : function(){
					...
				}
			]
		});
	响应josn数据格式：
		{
			"total":"",
			"rows":[
				{},
				{}
			]
		}
	
	-->请求数据：
		page页码,rows每页记录数
		total总记录数,rows当前页数据记录
	分页web层：
		Pageable pageable = new PageRequest(page-1,rows);
		Page<> pagedata = service.findPageData(pageable);
	分页service层：
		dao.findAll(pageable);
	获取datagrid选中的数据：
		var rows = $("#gird").datagrid("getSelections");
	表单回显操作：
		$("#formId").form("load",row); -->datagrid选中的一行数据
	清空表单数据：
		$("#formId").from("clear");
		$("#fromId").form("reset");

jQuery EasyUi的下拉列表框：

设置：
	class="easyui-combobox"
下拉列表框三个重要属性：
	dataoptions="
		valueField:'', //生成选项value属性依据的字段名
		textField:'', //显示内容字段名
		url:'' //回去列表数据
	"

jQuery EasyUI的绑定表格条件查询：

条件查询：
	将查询条件转换为json对象绑定到datagrid上
		$("#drig").datagrid("load",json);

jQuery EasyUI表格显示批量数据

使用datagrid的列属性formatter：
	$("#drig").datagrid({
		formatter : function(value,row,index){
			value-->字段值
			row-->行记录数据
			index-->行索引
				
			if(value) {
				return ..;
			}else{
				return ..;
			}
		}
	})
获取所有选择数据：
	$("#grid").datagrid("getSelections");