初次体验完美easy ui 1.4.4

最新推荐文章于 2022-05-07 17:53:50 发布

abasen

最新推荐文章于 2022-05-07 17:53:50 发布

阅读量2k

点赞数

分类专栏： easyUI 文章标签： easyUI

本文链接：https://blog.csdn.net/abasen/article/details/50597084

版权

easyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

几年前使用的extjs，感觉javascript表现的UI界面风格好美，好喜欢。就是写起来比较麻烦点。纯javascript面向对象控件来表现UI；

今天使用jquery easy ui 1.4.4 感觉比extjs用起来更好用点，表现的界面风格类似，也一样的完美，而且不用写那么多js控件的代码了，只是感觉到了html的存在，好方便。

中文网：http://www.jeasyui.net/ 网站上 demo，教程，插件，扩展，easyUI下载都有，很全，demo是个快速入手的切入点。

今天使用demo里的layout的样例做了个上，中，下，左，右的布局，可以新增tab页；

主要引用的2个js文件是：jquery.easyui.min.js jquery.min.js。

themes：风格主题包，和extjs一样都可以切换主题风格，里面的default文件夹是默认的风格天蓝色，最喜欢这个；

plugins：插件js单独的文件。

locale：语言包。

今天遇到的问题：

1、layout里面的链接，怎么在中间内容区打开一个新的tab页？

答：2种方式，iframe和href；

iframe方式打开tab页，每个tab页面都必须加载easyUI库（tab才能引用easyUI库相关的函数），重复加载，用这种方式，最容易找到答案，但不属于我的风格；

href方式打开tab页（去请求URL），这种方式只会加载页面中<body>标签内的内容，所以了javascript脚本要放在body标签里面，不然无法引用，我选择放在</body>标签的前面；

        function tabTest(title, url){
	    var jq = top.jQuery;
            //判断当前页已经打开，就激活成为当前tab页；否则就新打开
           if (jq("#main").tabs('exists', title)){    
                jq("#main").tabs('select', title);    
            } else {  
                //iframe方式加载
            	//var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
            	// href方式加载
                var content = '<div data-options="href:\'index.jsp\'" style="padding:10px"></div>';
            	//alert(content);
                jq("#main").tabs('add',{title:title,href:url,closable:true});    
             }    
	}

jquery-easyUI不是完全通过js代码来控制页面的展示，可以html代码合javascript结合来控制；相对来说轻量级点；

2、分页控件的使用：实现了新增，编辑，删除，分页列表功能。

html部分：

        <table id="dg" title="接口数据有效期设置" style="width:900px;height:500px">
		<thead>
			<tr>
				<th field="id" width="80" hidden="true">主键</th>
				<th field="interfaceName" width="150">接口名称</th>
				<th field="validDay" width="80">有效期天数</th>
				<th field="addTime" width="140">新增时间</th>
				<th field="updateTime" width="140">更新时间</th>
				<th field="remark" width="300">备注</th>
			</tr>
		</thead>
	</table>
	<div id="dataWin" class="easyui-window" title="新增接口数据有效期" style="width:600px;height:400px" 
		data-options="minimizable:false,
					  maximizable:false,
					  collapsible:false,
					  closed:true,
					  modal:true">
            Window Content
        </div>

javascript部分：

        <script>
	$(function(){
	    //设置分页控件 
	    $("#dg").datagrid({
	        url:"dataSetting/ajax/getDataSetting.do",
		rownumbers:true,
		singleSelect:true,
		autoRowHeight:false,
		pagination:true,
		loadMsg:'正在载入....',
		toolbar:[{
            	iconCls:'icon-add',
            	handler:function(){
                        //window的使用，先打开，再载入要的内容，暂时只找到了这种方法
                       $('#dataWin').window('open');
            		$('#dataWin').window('refresh', 'dataSetting/addDataView.do');
            	}
            }, '-', {
            	iconCls:'icon-edit',
            	handler:function(){
            		var row = $("#dg").datagrid('getSelected');
            		if(row == null){
            			$.messager.alert("验证结果", "请选择一条记录！", "warning");
            			return false;
            		}
            		$('#dataWin').window('open');
            		$('#dataWin').window('refresh', 'dataSetting/editDataView.do?id=' + row.id);
            	}
            }, '-', {
            	iconCls:'icon-remove',
            	handler:function(){
            		var row = $("#dg").datagrid('getSelected');
            		if(row == null || row == undefined){
            			$.messager.alert("验证结果", "没有选中一条记录！", "warning");
            			return false;
            		}
            		//alert(row.id);
            		$.ajax({ 
        	 		type : 'POST',
        	 		data: {
        	 			id:row.id
        	 		},
        	 		url : '${ctx}/dataSetting/ajax/deleteData.do',
        	 		success : function(result) {
        	 			var o = eval("(" + result + ")");
        	 			if(o.success){
        	 				$.messager.alert("返回结果", "成功", "info");
        	 				$("#dg").datagrid("reload");
        	 			}else{
        	 				$.messager.alert("返回结果", o.msg, "error");
        	 			}
        	 		}
        		});
            	}
            }]
	});
    	var pager = $('#dg').datagrid('getPager');
    	pager.pagination({
			pageSize:10,
			pageList:[10,20,50],
			beforePageText:'第',
			afterPageText:'页       共{pages}页',
			displayMsg:'当前显示 {from} - {to} 条记录   共 {total} 条记录'
		});
	})
	</script>

abasen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初次体验完美easy ui 1.4.4

几年前使用的extjs，感觉javascript表现的UI界面风格好美，好喜欢。就是写起来比较麻烦点。纯javascript面向对象控件来表现UI；今天使用jquery easy ui 1.4.4 感觉比extjs用起来更好用点，表现的界面风格类似，也一样的完美，而且不用写那么多js控件的代码了，只是感觉到了html的存在，好方便。中文网：http://www.
复制链接

扫一扫