• Java框架之Struts2(四)


    一、ComboGrid

    扩展自$.fn.combo.defaults和$.fn.datagrid.defaults。使用$.fn.combogrid.defaults重写默认值对象。数据表格下拉框结合了可编辑文本框控件和下拉数据表格面板控件,该控件允许用户快速查找和选择,并且该控件提供了键盘导航支持,对行进行筛选。 

    这东西其实就是下拉框中出现一个datagrid

    依赖关系

    combo

    datagrid

    所谓的键盘导航支持。

    //例一 html 方式直接配置
           <select id="cc" class="easyui-combogrid" name="dept" style="250px;"   
            data-options="    
                panelWidth:450,    
                value:'006',    
                idField:'id',    
                textField:'userName',    
            
                url:'UserServlet6',    
                columns:[[    
                    {field:'userName',title:'用户名',60},    
                    {field:'password',title:'密码',100},    
                    {field:'note',title:'备注',120},    
                    {field:'userId',title:'用户账号',100}    
                ]]    
            ">
            </select> 
    //例二  使用Javascript通过已经定义的<select>或<input>标签来创建数据表格下拉框。
           <input id="cc" name="dept" value="01" />  
           
                $(function(){
                            $('#cc').combogrid({    
                                panelWidth:450,    
                                value:'006',         
                                idField:'userId',    
                                textField:'userName',    
                                url:'UserServlet6',    
                                columns:[[    
                                     {field:'userName',title:'用户名',60},    
                                    {field:'password',title:'密码',100},    
                                    {field:'note',title:'备注',120},    
                                    {field:'userId',title:'用户账号',100}    
                                ]]    
                            });  
                    
                    });
    //例三 自动完成功能
           <input id="cc" name="dept" value="01" />  
           
                 $(function(){
                            $('#cc').combogrid({    
                                delay: 500,    
                                mode: 'remote',    
                                url: 'UserServlet6',      //注意,在服务端,要接收q这个参数,再根据q进行模糊查询
                                idField: 'id',    
                                textField: 'userName',    
                                columns: [[    
                                  {field:'userName',title:'用户名',60},    
                                  {field:'password',title:'密码',100},    
                                  {field:'note',title:'备注',120},    
                                  {field:'userId',title:'用户账号',100}    
                                ]]    
                            }); 
                        });

    二、 Tree

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

    依赖关系

    draggable

    droppable

    树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。

    以下显示的元素将被用作树节点嵌套在<ul>元素中。

    在给tree加图标的时候,遇到了加不上的问题,实测发现,这两句的顺序必须按下面这样, 反了不行。

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/jquery-easyui-1.4/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/jquery-easyui-1.4/themes/icon.css">
    //例一 
              <ul id="tt" class="easyui-tree">   
                <li>   
                    <span>Folder</span>   
                    <ul>   
                        <li>   
                            <span>Sub Folder 1</span>   
                            <ul>   
                                <li>   
                                    <span><a href="#">File 11</a></span>   
                                </li>   
                                <li>   
                                    <span>File 12</span>   
                                </li>   
                                <li>   
                                    <span>File 13</span>   
                                </li>   
                            </ul>   
                        </li>   
                        <li>   
                            <span>File 2</span>   
                        </li>   
                        <li>   
                            <span>File 3</span>   
                        </li>   
                    </ul>   
                </li>   
                <li>   
                    <span>File21</span>   
                </li>   
            </ul>  
    //例二 
              <ul id="tt" class="easyui-tree">   
               <li>
                       <span>用户管理</span>
                       <ul>
                           <li><span>用户添加</span></li>
                           <li><span>用户维护</span></li>
                       </ul>
               </li>
               <li>
                       <span>商品管理</span>
                       <ul>
                           <li><span>商品添加</span></li>
                           <li><span>商品维护</span></li>
                       </ul>
               </li>
               <li>
                       <span>订单管理</span>
               </li>
            </ul>  
    //例三 使用javascript方式加载
             <ul id="tt"></ul>  
        
              $('#tt').tree({    
                    animate:true, 
                    checkbox:true,
                    cascadeCheck:false,
                    onlyLeafCheck:true,
                    lines:true,
                    dnd:true,
                    url:'tree_data1.json'   
                });
                
                
            [
                {
                    "id":1,
                    "text":"用户管理",
                    "children":
                    [
                        {"id":"11","text":"用户添加"},{"id":"12","text":"用户维护"},{"id":"13","text":"用户删除"}
                    ]
                },
                
                {
                    "id":2,
                    "text":"商品管理",
                    "children":
                    [
                        {"id":"21","text":"商品添加"},{"id":"22","text":"商品维护"},{"id":"23","text":"商品删除"}
                    ]    
                }
        ]
    //例四 使用javascript方式加载  
            <ul id="tt"></ul>  
    
    
                $('#tt').tree({    
                    animate:true, //加一个上渐渐收起或滑出的效果
                    checkbox:true,
                    //cascadeCheck:false,  //级联选择
                    onlyLeafCheck:true,  //只在叶子结点显示勾选框
                    lines:true,
                    dnd:true,   //可移动
                    url:'tree_data1.json'   
                });
            
                    [
                            {
                                "id":0,
                                "text":"全部功能",
                                "children":
                                [
                                        {
                                            "id":1,
                                            "text":"用户管理",
                                            "iconCls":"icon-save",   //图标
                                            "state":"closed",        //关闭
                                          "attributes":{           //给它加一些附加属性
                                                "url":"/demo/book/abc",    
                                                "price":100    
                                        },   
                                            "children":
                                            [
                                                {"id":"11","text":"用户添加"},{"id":"12","text":"用户维护"},{"id":"13","text":"用户删除"}
                                            ]
                                        },
                                        
                                        {
                                            "id":2,
                                            "text":"商品管理",
                                            "iconCls":"icon-remove",   
                                            "state":"closed",    
                                             
                                            "children":
                                            [                                                                //勾选
                                                {"id":"21","text":"商品添加","checked":true},{"id":"22","text":"商品维护"},{"id":"23","text":"商品删除"}
                                            ]    
                                        }
                                ]
                            }    
                        ]

    三、Tree 的常用方法

    == getRoot

    $("button").click(function(){
      var rootNode=$("#tt").tree("getRoot");
      alert(rootNode.text); //得到"全部功能" 四个字
      console.info(rootNode);    
    });

    == getChecked (state) //获取所有选中的节点。'state'可用值:'checked','unchecked','indeterminate'。如果'state'未指定,将返回'checked'节点

    var nodes = $('#tt').tree('getChecked');    // get checked nodes
    var nodes = $('#tt').tree('getChecked', 'unchecked');    // 获取未选择节点
    var nodes = $('#tt').tree('getChecked', 'indeterminate');    // 获取不确定的节点
    //例子 取出所有选中节点的 id 和 text
                    $("button").click(function(){
                            var nodes = $('#tt').tree('getChecked');  //只取选中节点
                            $.each(nodes,function(){
                                alert(this.text);
                                alert(this.id);
                                if(this.attributes){
                                    alert(this.attributes.url); //demo/book/abc   //注意,对于没有这些属性的结果,将报错
                                    alert(this.attributes.price); //100
                                    alert(this.attributes.jiangyou);
                                }
                            })
                        })

    四、异步树控件

    树控件内建异步加载模式的支持,用户先创建一个空的树,然后指定一个服务器端,执行检索后动态返回JSON数据来填充树并完成异步请求。

    <ul class="easyui-tree" data-options="url:'get_data.php'"></ul> 

    树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点,如果节点没有加载子节点,它将会把节点id的值作为http请求参数并命名为'id',通过URL发送到服务器上面检索子节点。

    下面是从服务器端返回的数据。

    [{    
      "id": 1,    
      "text": "Node 1",    
      "state": "closed",    
      "children": [{    
                 "id": 11,    
                 "text": "Node 11"   
                 },{    
                 "id": 12,    
                 "text": "Node 12"   
                 }]    
    },{    
                 "id": 2,    
                 "text": "Node 2",    
                 "state": "closed"   
    }] 

    重点:

    每个节点都有如下属性

    id:  //节点ID,对加载远程数据很重要

    text:显示的节点文本。

    iconCls:显示的节点图标CSS类ID。

    checked:该节点是否被选中。

    state:节点状态,'open' 或 'closed'。

    attributes:绑定该节点的自定义属性。

    target:目标DOM对象

    ===对应的 MenuInfo 类

    class MenuInfo{
                id
                menuName
                url
                target
                pic
                parentId
                ...
                }
    class MenuInfo {
                id,
                text, //menuName
                iconCls //pic
                checked 
                state,
                Map<String,Object>attributes 
                parentId 
                }

    easyui 的 tree + struts 见视频

    1) 页面

    $(function(){
                    $("#menuTree").tree({
                          //animate:true, //加一个上渐渐收起或滑出的效果
                        //checkbox:true,
                        //cascadeCheck:false,  //级联选择
                        //onlyLeafCheck:true,  //只在叶子结点显示勾选框
                        lines:true,
                        //dnd:true,   //可移动
                        url:"menuAction_getMenuTree.action",
                        onLoadSuccess:function(){
                            //$("#menuTree").tree("expandAll");  展开全部结点
                            //指定展开第二个节点
                            var nodeList=$("#menuTree").tree("getRoots");
                            $("#menuTree").tree("expand",nodeList[1].target);    
                            
                            //处理点击以后,显示选项卡
                            $("#menuTree a").click(function() {
                                var href=$(this).attr("href");
                                var tabTitle =$(this).text(); //超链上的文本
                                var iconCls= $(this).attr("iconCls"); 
                                
                                if($("#centerDiv").tabs("exists",tabTitle)){
                                    $("#centerDiv").tabs("select",tabTitle);
                                }
                                else{
                                    $("#centerDiv").tabs("add",{
                                        title:tabTitle,
                                        closable:true,
                                        iconCls:iconCls,
                                        content:"<iframe style='border:0;100%;height:100%' src='"+href+"'> </iframe>"
                                    });
                                }
                                
                                return false;  //防止超链接提交
                                
                            });
                        }
                    });
                
            });

    2) MenuAction

    public class MenuAction extends BaseAction {  //继承自  BaseAction (对request 进行了封装)
                    private MenuDao _menuDao=new MenuDao();
                    private List<MenuInfo> menuList;   //它是以json方式返回的(需要在strtus.xml中进行配置)
                    
                    //查询树菜单
                    public String getMenuTree(){
                        String menuId =request.getParameter("id");  //这个id是 树控件自动传过来的
                        if(StrUtil.isNullOrEmpty(menuId)){
                            menuId="0";
                        }
                        
                        int parentId=Integer.parseInt(menuId);
                        menuList= _menuDao.getMenuTree(parentId);
                        
                        System.out.println("menuList"+menuList.size());
                        
                        return "menutree_success";
                    }

     3) MenuDao

    public class MenuDao {
           //根据菜单id查询子菜单
           public List<MenuInfo> getMenuTree(int parentId) {
                  List<MenuInfo> menuList=new ArrayList<MenuInfo>();
                  Connection  conn =null;
                  PreparedStatement stm=null;
                  ResultSet rs=null;
                  try {
                      conn=DBUtil.getConn();
                      String sql="select * from menuInfo where parentid =?";
                      stm=conn.prepareStatement(sql);
                      stm.setInt(1, parentId);
                      rs=stm.executeQuery();
                      while(rs.next()){
                          MenuInfo m=new MenuInfo();
                          m.setId(rs.getInt("id"));
                          m.setIconCls(rs.getString("iconCls"));
                          m.setParentId(rs.getInt("parentId"));
                            
                          //做重点处理
                          if(getSubMenuCount(m.getId())>0){
                            m.setText(rs.getString("menuName"));
                            m.setState("closed");  //重要
                          }
                          else{
                               m.setState("open");  //重要
                               String menuContent=
    "<a iconCls='"+m.getIconCls()+"' href='"+rs.getString("url")+"' >"+rs.getString("menuName")+"</a>"; m.setText(menuContent); } Map<String ,Object> arrtibutes =new HashMap<String, Object>(); arrtibutes.put("url", rs.getString("url")); arrtibutes.put("jiangyou", "aaabbbbcccc"); arrtibutes.put("wushu", "无数"); m.setAttributes(arrtibutes); menuList.add(m); } } catch (Exception e) { e.printStackTrace(); }finally{ DBUtil.close(rs, stm, conn); } return menuList; } //查询子菜单的个数 private int getSubMenuCount(int parentId) { int result=0; Connection conn=null; PreparedStatement stm=null; ResultSet rs=null; try { conn=DBUtil.getConn(); String sql="select count(*) from menuInfo where parentId=?"; stm=conn.prepareStatement(sql); stm.setInt(1, parentId); rs=stm.executeQuery(); if(rs.next()){ result=rs.getInt(1); } } catch (Exception e) { e.printStackTrace(); }finally{ DBUtil.close(rs, stm, conn); } return result; } }

    4) 配置文件 tree_conf.xml

    <package name="p_tree" namespace="" extends="json-default">  //关键,要继承  json-default ,要引  struts2-json-plugin-2.3.16.1.jar
                   <action name="menuAction_*" class="cat.action.MenuAction" method="{1}">
                       <result name="menutree_success" type="json" > 
                           <param name="root">menuList</param>  //root 是固定写法 ,menuList 是要返回的数据.它会自动的转成json类型(不用我们手工处理)
                       </result>
                   </action>
    </package>

    五、datagrid 在struts 中的应用 (ajax)

    导入 struts2-json-plugin-2.3.16.1.jar

     //1) user_manage.jsp
    $(function(){
    $('#table1').datagrid({    
    url:'userAction_manage',    
         columns:[[    
           {field:'userName',title:'用户名',100},    
           {field:'password',title:'密码',100},    
           {field:'note',title:'备注',100,align:'right'}    
           ]] 
           ,
           pagination:true,
           pageSize:5,
           pageList:[5,10,15]   
           });      
       });
                 
    <table id="table1">  </table>
    //2) UserAction
    public class UserAction  extends BaseAction{
    private UserDao _userDao=new UserDao();
    private Map<String,Object> jsonMap;  //这个map ,是要返回的数据(会被自动转成json格式)
                
    //..对生应的 get set 方法
                 
    //分页查询用户列表
    public String manage(){
           int pageSize= Integer.parseInt(request.getParameter("rows"));
           int pageIndex=Integer.parseInt(request.getParameter("page"));
           int rowCount=_userDao.getUserCount();
                
           PageInfo pageInfo =PageUtil.getPageInfo(pageSize, rowCount, pageIndex);
                    
           List<UserInfo> userList=_userDao.getUserList(pageInfo);
                    
           jsonMap=new HashMap<String,Object>();
                    
           jsonMap.put("total", rowCount);  //要这样处理
           jsonMap.put("rows", userList);  //要这样处理
                    
                    return "manage_success";
                }
                ...
    }
    //3) 配置文件 user-conf.xml
    <package name="p_user" namespace="" extends="json-default">
       <action name="userAction_*" class="cat.action.UserAction" method="{1}">
        <result name="manage_success" type="json" > 
         <param name="root">jsonMap</param>  //注意,这里返回的是 map,不是那个userList
        </result>
       </action>
    </package>
  • 相关阅读:
    spring security使用数据库管理用户权限
    ubuntu安装配置jdk tomcat mysql ...
    64位虚拟机安装64位ubuntu出现问题
    maven pom文件结构详解
    Maven3下的java web项目
    数据库分页和使用jstl标签替换分页的jsp代码
    servlet生命周期
    图片校验码的生成
    HttpSessionListener和HttpSessionBindingListener监听session的销毁
    perl 处理特殊字符
  • 原文地址:https://www.cnblogs.com/1693977889zz/p/8109037.html
Copyright © 2020-2023  润新知