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

jQuery EasyUI学习04:布局控件整理
2021年08月12日14:30:05 0 525

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

 

jQuery EasyUI的布局:

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

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

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

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

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

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

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

东南西北布局

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

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


<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)
weinxin
投诉建议
文章名+链接地址,发送到此微信:tourism52
一网打尽,harmonyos,分布式,应用开发 菜鸟教程

一网打尽HarmonyOS分布式应用开发

在 HarmonyOS分布式开发中,应用程序框架是基础设施。随着越来越多设备的智能化,在多设备场景下,应用开发面临以下挑战。来自 Pexels01多设备的形态差异多样化的屏幕适配:...
php,onfig 菜鸟教程

php-config

php-configphp-config 是一个简单的命令行脚本用于获取所安装的 PHP 配置的信息。 在编译扩展时,如果安装有多个 PHP 版本,可以在配置时用 --w...
深入,理解,领域,驱动,设计,中的,聚合 菜鸟教程

深入理解领域驱动设计中的聚合

聚合模式是 DDD 的模式结构中较为难于理解的一个,也是 DDD 学习曲线中的一个关键障碍。合理地设计聚合,能清晰地表述业务一致性,也更容易带来清晰的实现,设计不合理的聚合,甚至在...
java,单元,测试,技巧,之powermo 菜鸟教程

Java单元测试技巧之PowerMock

前言高德的技术大佬向老师在谈论方法论时说到:“复杂的问题要简单化,简单的问题要深入化。”这句话让我感触颇深,这何尝不是一套编写代码的方法——把一个复杂逻辑拆分为许多简单逻辑,然后把...
怎样,修改,配置,设定 菜鸟教程

怎样修改配置设定

怎样修改配置设定PHP 运行于 Apache 模块方式当使用 PHP 作为 Apache 模块时,也可以用 Apache 的配置文件(例如 httpd.conf)和 .htacce...

评论列表 共有 0 条评论

暂无评论