easyui的初步使用

最新推荐文章于 2020-06-20 20:54:27 发布

hhh一只小可爱

最新推荐文章于 2020-06-20 20:54:27 发布

阅读量161

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/sunshinedark/article/details/82832966

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基本上用来做后台管理界面

第一步：导入easyui的包

第二步：在项目中引入几个文件

第三步：去根据easyui dome去实现效果

:比如一个布局

<body class="easyui-layout">

<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
   <div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">west content</div>
   <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
   <div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
   <div data-options="region:'center',title:'Center'"></div>
</body>

我们需要写一个树形菜单

1.普通方法

<script type="text/javascript" src="jquery-easyui-1.5.1/div/tree.js"></script>

<ul id="tt"></ul> //在页面加入这么一串代码就好

$(function(){
   //去掉用那个json文件
   $('#tt').tree({
   url:'tree.json'
   });
})

json文件：是一个混合对象类型与map的键值对
[{
   "id":1,
   "text":"My Documents",
   "children":[{
       "id":11,
       "text":"Photos",
       "state":"closed",
       "children":[{
           "id":111,
           "text":"Friend"
       },{
           "id":112,
           "text":"Wife"
       },{
           "id":113,
           "text":"Company"
       }]
   },{
       "id":12,
       "text":"Program Files",
       "state":"closed",
       "children":[{
           "id":121,
           "text":"Intel"
       },{
           "id":122,
           "text":"Java"
       },{
           "id":123,
           "text":"Microsoft Office"
       },{
           "id":124,
           "text":"Games"
       }]
   },{
       "id":16,
       "text":"Actions",
       "children":[{
           "text":"Add",
           "iconCls":"icon-add"
       },{
           "text":"Remove",
           "iconCls":"icon-remove"
       },{
           "text":"Save",
           "iconCls":"icon-save"
       },{
           "text":"Search",
           "iconCls":"icon-search"
       }]
   },{
       "id":13,
       "text":"index.html"
   },{
       "id":14,
       "text":"about.html"
   },{
       "id":15,
       "text":"welcome.html"
   }]
}]

2.实现树形菜单的下拉列表链接数据库

这个不同的是json文件的列必须不能改变就比如说id 就必须是id

但是我们数据库的列是不一致的

所以我们在拿到值之后需要进行转换

最后在servlet中调用这个方法就好了

hhh一只小可爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui的初步使用

基本上用来做后台管理界面第一步：导入easyui的包第二步：在项目中引入几个文件 &lt;link rel="stylesheet" type="text/css" href="/easyui_01/jquery-easyui-1.5.1/themes/default/easyui.css"&gt; &lt;link rel="stylesheet" type="te
复制链接

扫一扫