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>