文章出處
文章列表
一、easy UI是類似于jQuery UI的插件庫，它提供了豐富的各種常用插件：tree、datagrid...
tree插件：
語法：$(selector).tree([settings]);
常用屬性：
常用方法、事件：
使用tree插件實現樹形菜單：
客戶端頁面關鍵代碼：
① 引入easy UI插件及樣式文件
② 定義用來配置樹形菜單的區域
③ 使用tree方法加載遠程樹形菜單數據
<script type="text/javascript"> $(function() { $("#easyui-tree").tree({ checkbox : true, url : 'basic_tree_date.json', onBeforeLoad : function(node, param) { //alert('開始請求數據') }, onLoadSuccess : function(node, data) { //alert('數據請求成功') }, onLoadError : function() { //alert('加載失敗') }, onClick : function(node) { //獲取指定的節點對象 $('#easyui-tree').tree('getNode',node.target) //alert($('#easyui-tree').tree('getNode',node.target).id) //獲取指定的節點數據，包括子節點 console.log($('#easyui-tree').tree('getData',node.target)) //獲取根節點，返回節點對象 console.log($('#easyui-tree').tree('getRoot',node.target)) console.log($('#easyui-tree').tree('getParent',node.target)) //獲取子節點 console.log($('#easyui-tree').tree('getChildren',node.target)) //指定節點進行添加操作 /* if( $('#easyui-tree').tree('getChildren',node.target).length==0){ $('#easyui-tree').tree('append',{ parent:node.target, data:[{text:'呵呵'}] }) } */ }, onlyLeafCheck : false, //隨意拖動 dnd : true, }); }); function bs() { //加載tree數據 $('#easyui-tree').tree('loadData',[{text:'number11'}]) //重新加載樹的數據 $("#easyui-tree").tree('reload') //獲取所有勾選選中的節點 console.log($('#easyui-tree').tree('getChecked')) //獲取所有選中的節點 console.log($('#easyui-tree').tree('getSelected')) //根據id屬性值找到該節點 console.log($('#easyui-tree').tree('find',12)) //選中一個節點 var node= $('#easyui-tree').tree('find',12); $('#easyui-tree').tree('select',node.target); //選中 var node= $('#easyui-tree').tree('find',12); $('#easyui-tree').tree('check',node.target); //指定節點不選中 var node= $('#easyui-tree').tree('find',12); $('#easyui-tree').tree('uncheck',node.target); //指定節點折疊 var node= $('#easyui-tree').tree('find',1); $('#easyui-tree').tree('collapse',node.target); //展開所有節點 $('#easyui-tree').tree('expandAll') } </script>
④ 創建服務器端basic_tree_date.json--待加載的遠程樹形菜單數據
Node對象參數：
tree數據節點：
basic_tree_date.json：
實現效果：
datagrid插件：
語法：$(selector).datagrid([settings]);
參數settings:用于配置datagrid的鍵值對集合
常用屬性：
常用方法：
常用事件：
Column對象常用屬性：是一個數組對象，它的每個元素也是一個數組。它定義了每個列的字段。
① 客戶端頁面代碼：datagrid2.jsp
引入easy UI插件及樣式文件
② 定義用來放置數據列表的區域
③ 使用datagrid方法創建列表組件展示遠程數據
<script type="text/javascript"> $(function(){ $('#dg').datagrid({ //遠程請求數據的url路徑 url:'<%=path%>/datagrid/datagrid_server.jsp', width:800, height:300, //表頭的小頭標 iconCls:'icon-search', //顯示行號 rowNumbers:true, //顯示底部分頁欄 pagination:true, //默認顯示每頁記錄數 pageSize:5, pageList:[5,10,15], //指定列 columns:[[ {field:'ck',checkbox:true}, {field:'title',title:'投票標題',width:408}, {field:'options',title:'備選項數',width:60,align:'center'}, {field:'participants',title:'參與人數',width:60,align:'center'} ]], loadMsg:"正努力為您加載中......", //只允許選中一行 singleSelect:true, //隔行變色 striped:true, rownumbers:true, }); }); </script>
④ 創建列表數據工具類CridNode：封裝屬性，并定義無參和帶參構造
public class CridNode { private Long id;// 投票id private String title;// 投票標題 private String options;// 備選項數 private String participants;// 參選人數 public CridNode() { } public CridNode(Long id, String title, String options, String participants) { super(); this.id = id; this.title = title; this.options = options; this.participants = participants; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getOptions() { return options; } public void setOptions(String options) { this.options = options; } public String getParticipants() { return participants; } public void setParticipants(String participants) { this.participants = participants; }
⑤服務器端代碼：datagrid_server.jsp 根據分頁參數獲取待加載的列表數據
<%
//構造測試數據
List<CridNode> list = new ArrayList<CridNode>();
list.add(new CridNode(1L, "選出你心目中最好的下載工具", "2", "6"));
list.add(new CridNode(2L, "選出你心目中最好的輸入法", "5", "4"));
list.add(new CridNode(3L, "選出你心目中最好的瀏覽器", "5", "11"));
list.add(new CridNode(4L, "選出你心目中最好的殺毒軟件", "6", "4"));
list.add(new CridNode(5L, "選出你心目中最好的社交軟件", "3", "14"));
list.add(new CridNode(6L, "選出你心目中最好的聊天工具", "3", "2"));
list.add(new CridNode(7L, "選出你心目中最好的翻譯軟件", "5", "0"));
list.add(new CridNode(8L, "選出你心目中最好的播放器", "2", "23"));
list.add(new CridNode(9L, "選出你心目中最好的免費軟件", "4", "7"));
list.add(new CridNode(10L, "選出你心目中最好的錄音軟件", "4", "18"));
list.add(new CridNode(11L, "選出你心目中最好的刷機軟件", "5", "6"));
//獲取客戶端傳遞的分頁參數
// 默認參數rows表示每頁顯示記錄條數， 默認參數page表示當前頁數
Integer pageSize=Integer.parseInt(request.getParameter("rows"));
Integer pageNumber=Integer.parseInt(request.getParameter("page"));
//默認參數page表示當前頁數
StringBuilder builder = new StringBuilder("{\"total\":"+ list.size() + ",\"rows\":[");
//計算開始記錄數
int start = (pageNumber - 1) * pageSize;
//計算結束記錄數
int end = start + pageSize;
//根據分頁起始參數構建當前頁的列表數據
for (int i = start; i < end && i < list.size(); i++) {
CridNode gn = list.get(i);
builder.append("{\"id\":\"" + gn.getId() + "\",\"title\":\""+ gn.getTitle()
+ "\",\"options\":" + gn.getOptions()
+ ",\"participants\":" + gn.getParticipants() + "},");
}
String gridJSON = builder.toString();
if (gridJSON.endsWith(",")) {
gridJSON = gridJSON.substring(0, gridJSON.lastIndexOf(","));
}
out.print(gridJSON + "]}");
%>
實現效果：
文章列表
全站熱搜
留言列表
