Java框架之Struts2（四）
阿新 • • 發佈：2017-12-25
abc eth java框架 context pre false 重要 get lec
一、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); //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;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>
Java框架之Struts2（四）