jQuery EasyUI学习04:布局控件整理

 

jQuery EasyUI的布局:

1.tabs选项卡布局 class="easyui-tabs"

2.panel面板布局 class="easyui-panel"

3.accordion分类布局 class="easyui-accordion"

4.layout布局 class="easyui-layout"

东南西北布局

针对布局:附上一个简单的开发实例,以供大家学习


<script type="text/javascript">

$(function(){

test.init.pageUI();

//初始化页面按钮上面的事件...

test.init.bindEvent();

})

/**

面向对象的编程思想处理:

1.init对象

pageUI方法:

1.初始化tree

2.关联tab,没有目标tab,则创建目标tab。如果有,则切换(选中:tabs("getTab",node.text))

3.添加面板时候, 重新载入一个界面 用href:通过ajax调用,当成文本处理,并不会走浏览器内核。不能触发js,css等

4.所以使用onLoad:在ajax选项卡面板加载完远程数据的时候触发

bindEvent

绑定初始控件方法

*/

var test={

init:{

pageUI:function(){

$("#jeasyUItree").tree({

url:"treedata.json",

dnd:true,

animate:true,

checkbox:true,

lines:true,

onClick:function(node){

/**

判断,如果没有目标tab,则添加。如果有,则切换。

node.text是标题

*/

var tabs=$("#center_tab").tabs("getTab",node.text);

if(tabs){

$("#center_tab").tabs("select",node.text)

}else{

//添加面板...

$("#center_tab").tabs('add',{

title:node.text,

//content:'Tab Body',

closable:true,

//通过ajax调用,当成文本处理,并不会走浏览器内核

href:"../../easyui/href/employee.html",//重新载入一个界面...

//在ajax选项卡面板加载完远程数据的时候触发

onLoad:function(){

//alert($("#employeeId").length);

$("#employeeId").datagrid({

columns:[[

{"checkbox":true},

{title:"车次",width:100,field:'ceci'},

{title:"出发站<br>终点站",width:100,field:'startstate'},

{title:"出发时间<br>到达时间",width:100,field:'starttime'},

{title:"历时",width:100,field:'totaltime'},

{title:"商务座",width:100,field:'swz'},

{title:"备注",width:100,field:'bz'}

]

],

fitColumns:true,

url:"datagrid.json",

toolbar:

[{

text:"修改",

iconCls: 'icon-edit',

handler: function(){

alert('编辑按钮')

}

},'-',{

text:"删除",

iconCls: 'icon-help',

handler: function(){

alert('帮助按钮')

}

}]

,

onLoadSuccess:function(){

//创建页面的组件有两种方式 一种是通过标签创建,通过js +页面标签创建...

// alert($("#btn").size());

$("#btn").linkbutton({

iconCls:"icon-add"

})

},

loadMsg:"数据正在加载中....",

method:"POST",

pagination:true,

rownumbers:true,

singleSelect:true,

striped:true

})

}

});

}

}

})

},

//拿到第一个按钮,点击绑定

bindEvent:function(){

$("#btn_1").bind("click",function(){

$("#txl_tree").tree({

url:"treedata.json",

dnd:true,

animate:true,

checkbox:true,

lines:true,

onClick:function(node){

//alert(node.text);

//控制台打印

//console.info(node);

//$("#easyUITree").tree("getChildren",node)

var children=node.children;

alert(children.length)

}

})

//设置通讯录窗口大小,位置

$("#txl_window").window({

height:500,

width:200,

title:"通讯录"

})

})

$("#btn_2").bind("click",function(){

$.messager.confirm('确认','您确认想要推出系统?',function(r){

if (r){

alert('确认删除');

}

});

})

}

}

}

</script>

 

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

php编程基础教程.pptx|php编程培训,php,编程,基础,教程,pptx
php编程基础教程.pptx

历史上的今天:02月29日

热门专题

大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
云南巨榕教育投资集团有限公司|云南巨榕教育投资集团有限公司,巨榕教育集团,巨榕教育
云南巨榕教育投资集团有限公司
国家开放大学|国家开放大学报名,国家开放大学报考,国家开放大学,什么是国家开放大学,国家开放大学学历,国家开放大学学费,国家开放大学报名条件,国家开放大学报名时间,国家开放大学学历,国家开放大学专业
国家开放大学
开放大学|开放大学报名,开放大学报考,开放大学,什么是开放大学,开放大学学历,开放大学学费,开放大学报名条件,开放大学报名时间,开放大学学历,开放大学专业
开放大学
卓越综合高中|卓越综合高中
卓越综合高中
外贸网站建设|外贸网站建设,英文网站制作,英文网站设计,美国主机空间,外贸建站平台,多语言网站制作
外贸网站建设
综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中
云南开放大学|云南开放大学报名,云南开放大学报考,云南开放大学,什么是云南开放大学,云南开放大学学历,云南开放大学学费,云南开放大学报名条件,云南开放大学报名时间,云南开放大学学历,云南开放大学专业
云南开放大学

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部