jQuery EasyUI基础教程之EasyUI常用组件(推荐)

2020-05-24 21:25:10易采站长站整理

});
}
if("显示框"==tip){
$.messager.show({
showType: "slide",
showSpeed: 600,
width:300,
height:300,
title:"显示框",
timeout:5000,
msg:'消息将在5秒后关闭。'
}
);
}
});
</script>

八、表格和树组件的使用

使用$.fn.tree.defaults重写默认值对象。

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。


<ul id="treeID" class="easyui-tree">
<li>
<span>第一章</span>
<ul>
<li>
<span>第一节</span>
<ul>
<li>
<span>第一条</span>
</li>
<li>
<span>第二条</span>
</li>
</ul>
</li>
<li>
<span>第二节</span>
</li>
</ul>
</li>
<li>
<span>第二章</span>
</li>
</ul>
<script type="text/javascript">
$(function(){
//收起所有的选项
$("#treeID").tree("collapseAll");
});
</script>

我们还可以引入外部文件,使用json格式的文件来添加到这个tree中。


<ul id="treeID"></ul>
<script type="text/javascript">
$("#treeID").tree({
url : "/EasyUi/json/pro.json"
});
</script>

json格式为:


[
{
"id":1,
"text":"广东",
"state":"closed",
"children":[
{
"id":11,
"text":"广州" ,
"state":"closed",
"children":[
{
"id":111,
"text":"天河"
},
{
"id":112,
"text":"越秀"
}
]},
{
"id":12,
"text":"深圳"
}
]},
{
"id":2,
"text":"湖南"
}
]

以上所述是小编给大家介绍的jQuery EasyUI基础教程之EasyUI常用组件(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!