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="width:250px;"
        data-options="
            panelWidth:450,
            value:'006',
            idField:'id',
            textField:'userName',    

            url:'UserServlet6',
            columns:[[
                {field:'userName',title:'用户名',width:60},
                {field:'password',title:'密码',width:100},
                {field:'note',title:'备注',width:120},
                {field:'userId',title:'用户账号',width: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:'用户名',width:60},
                                {field:'password',title:'密码',width:100},
                                {field:'note',title:'备注',width:120},
                                {field:'userId',title:'用户账号',width: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:'用户名',width:60},
                              {field:'password',title:'密码',width:100},
                              {field:'note',title:'备注',width:120},
                              {field:'userId',title:'用户账号',width: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); //
                                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;width: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:'用户名',width:100},
       {field:'password',title:'密码',width:100},
       {field:'note',title:'备注',width: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>