初次体验完美easy ui 1.4.4

          几年前使用的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>

     

               

      

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本次更新内容主要是BUG修复和功能改进,相隔4个月又发布了新版本,这次更新更像是例行公事,不过好在修复了很多BUG,另外需要说一下,EasyUI框架当中其实官方还隐藏了不少API没有开放出来,有些朋友建议我把整理一下,将一些好用的API及其用法也更新到中文API中,这里我想说的是,有些API或许是因为不稳定、尚有BUG、未完全实现或者是未经过完整测试的,所以官方并未公布出来,因此我也不建议大家大面积的去使用,这样会带来很多不稳定因素,甚至是致命的BUG,这也是我没有将这些API写入中文API文档的原因,所以有能力并且需要的人就自行去源代码中挖掘吧,我这里只同步官网的API(外加少许的变动或者不影响稳定性和安全性的新增内容)。 jQuery EasyUI 1.4.4版本更新内容: Bug(修复) filebox:修复“clear”和“reset”方法在IE9下无法正常工作的问题; messager:修复调用无参的$.messager.progress()方法之后,再调用$.messager.progress('close')方法时无法正常工作的问题; timespinner:修复在IE8中点击微调按钮时无法正确显示值的问题; window:修复在“onMove”事件中调用“options”方法时无法正常显示的问题; treegrid:修复“getLevel”方法无法接受为0的参数值的问题。 Improvement(改进) layout:改进后的“collapsedContent”、“expandMode”和“hideExpandTool”属性可以支持区域面板; layout:改进后的“hideCollapsedContent”属性可以在折叠面板上设置显示垂直标题栏; layout:新增“onCollapse”、“onExpand”、“onAdd”、“onRemove”事件; datagrid:在排序列的标题上显示↑↓图标; datagrid:新增“gotoPage”方法; propertygrid:新增“groups”方法,以允许获取所有数据租; messager:在显示长消息的的时候支持对消息进行自动滚动; tabs:“disabled”属性支持定义一个被禁用的选项卡面板; tabs:支持百分比大小。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值