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