|
|
功能模塊樹(shù)是幾乎在每個(gè)項(xiàng)目里都要用到的東西，利用Dojo的好處就是可以實(shí)現(xiàn)樹(shù)的子節(jié)點(diǎn)的動(dòng)態(tài)加載，這在樹(shù)節(jié)點(diǎn)很多的情況下是很有用的。
下載附件二dojotree.rar，解壓后將dist/dojotree.war部署到應(yīng)用服務(wù)器即可瀏覽DEMO，DEMO中內(nèi)置HSQLDB數(shù)據(jù)庫(kù)，啟動(dòng)時(shí)自動(dòng)加載。DEMO運(yùn)行截圖見(jiàn)附件一。
一、tree.jsp主要代碼
1、首先在head中導(dǎo)入Dojo庫(kù)(dojo.js)和TreeWidget
<script>"text/Javascript" src="ajax/dojo/dojo.js">
<script>"text/Javascript">
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeSelector");
dojo.require("dojo.widget.TreeRPCController");
dojo.require("dojo.widget.TreeLoadingController");
dojo.require("dojo.widget.TreeContextMenu");
</script>
2、在body中放置TreeWidget，TreeLoadingController中的RPCUrl="treeServlet"為從后臺(tái)獲取數(shù)據(jù)的servlet名稱，TreeNode中的expandLevel表示樹(shù)初始張開(kāi)級(jí)別
<div dojoType="TreeLoadingController" RPCUrl="treeServlet" widgetId="treeController" DNDController="create"><!--</span-->div>
<div dojoType="TreeSelector" widgetId="treeSelector"><!--</span-->div>
<div dojoType="Tree" DNDMode="between" selector="treeSelector" widgetId="bandTree" controller="treeController">
<div dojoType="TreeNode" title="root" widgetId="root" objectId="root" isFolder="true" childIconSrc="images/comm.gif" expandLevel="1"/>
3、建立TreeSelector事件處理函數(shù)
function treeSelectFired() {
// get a reference to the treeSelector and get the selected node
var treeSelector = dojo.widget.manager.getWidgetById('treeSelector');
var treeNode = treeSelector.selectedNode;
// get a reference to the songDisplay div
var hostDiv = document.getElementById("songDisplay");
var isFolder = treeNode['isFolder'];
//alert(isFolder);
if ( !isFolder) {
var song = treeNode['title'];
var url = treeNode['url'];
link(url);
} else {
}
}
4、將select事件處理函數(shù)關(guān)聯(lián)到treeSelector
function init() {
//get a reference to the treeSelector
var treeSelector = dojo.widget.manager.getWidgetById('treeSelector');
//connect the select event to the function treeSelectFired()
dojo.event.connect(treeSelector,'select','treeSelectFired');
}
dojo.addOnLoad(init);
二、主要Java代碼及數(shù)據(jù)結(jié)構(gòu)
1、Gnmk.Java中tree的屬性
private String id;
private String gnmkdm; //功能模塊代碼
private String gnmksm; //功能模塊說(shuō)明
private String gnmktb; //功能模塊圖標(biāo)
private String gnmklj; //功能模塊路徑
private String gnmkmc; //功能模塊名稱
private String gnmksj; //功能模塊上級(jí)代碼
private String gnmkbz; //功能模塊標(biāo)志（‘N'為葉節(jié)點(diǎn)）
2、HSQLDB內(nèi)存數(shù)據(jù)庫(kù)加載SQL(db.sql)
CREATE TABLE GNMK (ID VARCHAR, GNMKDM VARCHAR, GNMKMC VARCHAR, GNMKLJ VARCHAR, GNMKTB VARCHAR, GNMKBZ VARCHAR, GNMKSJ VARCHAR);
INSERT INTO GNMK VALUES ('d098a59f0b765c30010b765d6b780001', '01', '一級(jí)目錄1', null, 'system.gif', 'Y', '');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830001', '0101', '二級(jí)目錄1', 'cxtjAction.do', 'system.gif', 'N', '01');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830001', '0102', '二級(jí)目錄2', 'cxtjAction.do', 'system.gif', 'N', '01');
INSERT INTO GNMK VALUES ('d098a59f0b765c30010b765d6b780002', '02', '一級(jí)目錄2', null, 'system.gif', 'Y', '');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '0201', '二級(jí)目錄1', 'cxtjAction.do', 'system.gif', 'N', '02');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '0202', '二級(jí)目錄2', 'cxtjAction.do', 'system.gif', 'Y', '02');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '020201', '三級(jí)目錄1', 'cxtjAction.do', 'system.gif', 'N', '0202');
INSERT INTO GNMK VALUES ('d098a59f0b765e68010b765fda830002', '020202', '三級(jí)目錄2', 'cxtjAction.do', 'system.gif', 'N', '0202');
3、TreeServlet .Java主要代碼，在getGnmkByParent(String gnmksj)方法中可以實(shí)現(xiàn)自己的業(yè)務(wù)，DEMO中使用GnmkDAO
public class TreeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String action = request.getParameter("action");
System.out.println("action b=>" + action);
System.out.println("action b=>" + action);
String data = request.getParameter("data");
if (action.equalsIgnoreCase("getChildren")) {
JSONTokener jsonTokener = new JSONTokener(data);
JSONObject jsonObject = (JSONObject) jsonTokener.nextValue();
JSONObject parentNodeObject = (JSONObject) jsonObject.get("node");
response.setContentType("text/json; charset=gb2312");
PrintWriter out = response.getWriter();
out.write(getChildren(parentNodeObject));
} else {
}
}
private String getChildren(JSONObject parentNodeObject) {
JSONArray result = new JSONArray();
String parentObjectId = parentNodeObject.getString("objectId");// id 唯一
// String parentWidgetId = parentNodeObject.getString("widgetId");// dm
parentObjectId = parentObjectId.equalsIgnoreCase("root") ? ""
: parentObjectId;
System.out.println("parentObjectId=>" + parentObjectId);
// 獲取子功能模塊
List listGnmk = this.getGnmkByParent(parentObjectId);
System.out.println("listGnmk=>" + listGnmk.size());
if (listGnmk != null) {
Iterator itGnmk = listGnmk.iterator();
while (itGnmk.hasNext()) {
Gnmk qxgnmk = (Gnmk) itGnmk.next();
try {
JSONObject jsonGnmkObject = new JSONObject();
String gnmkbz = qxgnmk.getGnmkbz();
boolean isFolder = gnmkbz.equalsIgnoreCase("Y") ? true
: false;
jsonGnmkObject.put("title", qxgnmk.getGnmkmc());
jsonGnmkObject.put("isFolder", isFolder);
jsonGnmkObject.put("widgetId", qxgnmk.getGnmkdm());
jsonGnmkObject.put("objectId", qxgnmk.getGnmkdm());
jsonGnmkObject.put("childIconSrc", "images/"
+ qxgnmk.getGnmktb());
jsonGnmkObject.put("url", qxgnmk.getGnmklj());
result.put(jsonGnmkObject);
} catch (JSONException e) {
e.printStackTrace();
}
}
}
return result.toString();
}
private List getGnmkByParent(String gnmksj) {
GnmkDAO gnmkDao = new GnmkDAO();
return gnmkDao.getGnmkByParent(gnmksj);
}
}
三、關(guān)于DEMO的其它配置說(shuō)明
1、實(shí)現(xiàn)Javax.servlet.ServletContextListener接口的contextInitialized方法來(lái)加載HSQLDB及其數(shù)據(jù)，ContextListener.Java主要代碼
public void contextInitialized(ServletContextEvent event) {
try {
// load the driver
Class.forName("org.hsqldb.jdbcDriver");
// create the table and add sample data
InputStreamReader in = new InputStreamReader(getClass().getClassLoader().getResourceAsStream("db.sql"));
BufferedReader reader = new BufferedReader(in);
DBUtils.setupDatabase(reader);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
2、web.xml相關(guān)配置
<listener>
<listener-class>
dojo.sample.ContextListener
<!--<span class="tag"--><!--</span-->listener-class>
<!--</span-->>
下載
JavaScript技術(shù)：利用Dojo和JSON建立無(wú)限級(jí)AJAX動(dòng)態(tài)加載的功能模塊樹(shù)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
