Java版通用JS級聯
Java版通用JS級聯
2007-09-25 08:15 作者:Jerome Kwok 來源:csdn
[摘要] 在開發中,經常遇到諸如省、市,大類、小類的級聯select 下拉框。常常,這些類別或地區的內容,又存在資料庫中。這裡建議,透過IO,將類別生成js檔案,然後在頁面中引入這個js檔案,這樣即提高的程式的運用速度,又精簡了的程式碼書寫量。
[關鍵字] Java JS
[關鍵字] Java JS
在開發中,經常遇到諸如省、市,大類、小類的級聯select 下拉框。常常,這些類別或地區的內容,又存在資料庫中。因為使用者希望,一切都是可控制的。那麼,如果涉及到這種級聯的地方,每次都人從庫中讀取,在JSP中要寫很多程式碼去讀表。另外,這種級聯在修改資料的時候,應設定的選中項為庫中所載,這也是需要寫一些程式碼的。
這裡本人建議,透過IO,將類別生成js檔案,然後在頁面中引入這個js檔案,這樣即提高的程式的運用速度,又精簡了的程式碼書寫量。
一、表結構如下:
create table news_class200
(
id int primary key,
parent_id int,
class_name varchar(20),
orderby int default 0
)
id 為自動增長
parent_id 用來標識父類的id
class_name 類別名稱
orderby 排序,用來控制select中元素的前後順序
二、成生js的java程式碼:
public static void news_class(String str,String tab) throws IOException
{
//大類名稱
String big="big_class";
String small="small_class";
String big_array="";
String[] small_array;
Jdata data = new Jdata(); //dao物件
List list = data.jlist("select * from "+tab+" where parent_id=0");
FileWriter fw = new FileWriter(str);
PrintWriter out = new PrintWriter(fw);
List ll = new ArrayList();
small_array=new String[list.size()];
for(int i=0; i<list.size(); i++)
{
//讀取大類資訊
Map map=(Map)list.get(i);
big_array+="'"+map.get("class_name")+"',";
ll=data.jlist("select * from "+tab+" where parent_id="+map.get("id"));
small_array[i]="";
for(int j=0; j<ll.size(); j++)
{
Map m =(Map)ll.get(j);
small_array[i]+="'"+m.get("class_name")+"',";
}
small_array[i]=noEnd(small_array[i]);
// System.out.println(big_array);
}
big_array=noEnd(big_array);
// out.println("<script language=javascript>");
out.println("document.writeln('<select name="+big+" onchange=""+small+"MM(this.selectedIndex)">'); ");
out.println("document.writeln('<option value="">請選擇</option>'); ");
out.println("document.writeln('</select>'); ");
out.println("document.writeln('<select name="+small+">'); ");
out.println("document.writeln('<option value="">請選擇</option>'); ");
out.println("document.writeln('</select>'); ");
out.println("var "+big+"Name = ["+big_array+"]; ");
out.println(" var "+big+"Value=["+big_array+"]; ");
for(int m=0; m<small_array.length; m++)
out.println(" var "+small+(m+1)+" = ["+small_array[m]+"]; ");
out.println("function "+big+"() {");
out.println(" var e = document.getElementById('"+big+"'); "); //000
out.println(" for (var i=0; i<"+big+"Name.length; i++)");
out.println(" e.options.add(new Option("+big+"Name[i], "+big+"Value[i])); ");
out.println(" }");
out.println(" function "+small+"MM(n){");
out.println(" var e = document.getElementById('"+small+"'); ");
out.println("e.options.length = 1; ");
out.println("if (n == 0) return; ");
out.println(" var a = eval('"+small+"'+ n); ");
out.println(" for (var i=0; i<a.length; i++) e.options.add(new Option(a[i], a[i])); ");
out.println("}");
out.println(big+"(); ");
//out.println(" window.attachEvent('onload', "+big+"); ");
//out.println(" </script>");
out.flush();
out.close();
fw.close();
}
三、生成的js如下:
document.writeln('<select name=big_class onchange="small_classMM(this.selectedIndex)">');
document.writeln('<option value="">請選擇</option>');
document.writeln('</select>');
document.writeln('<select name=small_class>');
document.writeln('<option value="">請選擇</option>');
document.writeln('</select>');
var big_className = ['縣域動態','省域見聞','國外新聞'];
var big_classValue=['縣域動態','省域見聞','國外新聞'];
var small_class1 = ['A類',''B類,'C類'];
var small_class2 = ['無小類'];
var small_class3 = ['無'];
function big_class() {
var e = document.getElementById('big_class');
for (var i=0; i<big_className.length; i++)
e.options.add(new Option(big_className[i], big_classValue[i]));
}
function small_classMM(n){
var e = document.getElementById('small_class');
e.options.length = 1;
if (n == 0) return;
var a = eval('small_class'+ n);
for (var i=0; i<a.length; i++) e.options.add(new Option(a[i], a[i]));
}
big_class();
[@more@]
這裡本人建議,透過IO,將類別生成js檔案,然後在頁面中引入這個js檔案,這樣即提高的程式的運用速度,又精簡了的程式碼書寫量。
一、表結構如下:
create table news_class200
(
id int primary key,
parent_id int,
class_name varchar(20),
orderby int default 0
)
id 為自動增長
parent_id 用來標識父類的id
class_name 類別名稱
orderby 排序,用來控制select中元素的前後順序
二、成生js的java程式碼:
public static void news_class(String str,String tab) throws IOException
{
//大類名稱
String big="big_class";
String small="small_class";
String big_array="";
String[] small_array;
Jdata data = new Jdata(); //dao物件
List list = data.jlist("select * from "+tab+" where parent_id=0");
FileWriter fw = new FileWriter(str);
PrintWriter out = new PrintWriter(fw);
List ll = new ArrayList();
small_array=new String[list.size()];
for(int i=0; i<list.size(); i++)
{
//讀取大類資訊
Map map=(Map)list.get(i);
big_array+="'"+map.get("class_name")+"',";
ll=data.jlist("select * from "+tab+" where parent_id="+map.get("id"));
small_array[i]="";
for(int j=0; j<ll.size(); j++)
{
Map m =(Map)ll.get(j);
small_array[i]+="'"+m.get("class_name")+"',";
}
small_array[i]=noEnd(small_array[i]);
// System.out.println(big_array);
}
big_array=noEnd(big_array);
// out.println("<script language=javascript>");
out.println("document.writeln('<select name="+big+" onchange=""+small+"MM(this.selectedIndex)">'); ");
out.println("document.writeln('<option value="">請選擇</option>'); ");
out.println("document.writeln('</select>'); ");
out.println("document.writeln('<select name="+small+">'); ");
out.println("document.writeln('<option value="">請選擇</option>'); ");
out.println("document.writeln('</select>'); ");
out.println("var "+big+"Name = ["+big_array+"]; ");
out.println(" var "+big+"Value=["+big_array+"]; ");
for(int m=0; m<small_array.length; m++)
out.println(" var "+small+(m+1)+" = ["+small_array[m]+"]; ");
out.println("function "+big+"() {");
out.println(" var e = document.getElementById('"+big+"'); "); //000
out.println(" for (var i=0; i<"+big+"Name.length; i++)");
out.println(" e.options.add(new Option("+big+"Name[i], "+big+"Value[i])); ");
out.println(" }");
out.println(" function "+small+"MM(n){");
out.println(" var e = document.getElementById('"+small+"'); ");
out.println("e.options.length = 1; ");
out.println("if (n == 0) return; ");
out.println(" var a = eval('"+small+"'+ n); ");
out.println(" for (var i=0; i<a.length; i++) e.options.add(new Option(a[i], a[i])); ");
out.println("}");
out.println(big+"(); ");
//out.println(" window.attachEvent('onload', "+big+"); ");
//out.println(" </script>");
out.flush();
out.close();
fw.close();
}
三、生成的js如下:
document.writeln('<select name=big_class onchange="small_classMM(this.selectedIndex)">');
document.writeln('<option value="">請選擇</option>');
document.writeln('</select>');
document.writeln('<select name=small_class>');
document.writeln('<option value="">請選擇</option>');
document.writeln('</select>');
var big_className = ['縣域動態','省域見聞','國外新聞'];
var big_classValue=['縣域動態','省域見聞','國外新聞'];
var small_class1 = ['A類',''B類,'C類'];
var small_class2 = ['無小類'];
var small_class3 = ['無'];
function big_class() {
var e = document.getElementById('big_class');
for (var i=0; i<big_className.length; i++)
e.options.add(new Option(big_className[i], big_classValue[i]));
}
function small_classMM(n){
var e = document.getElementById('small_class');
e.options.length = 1;
if (n == 0) return;
var a = eval('small_class'+ n);
for (var i=0; i<a.length; i++) e.options.add(new Option(a[i], a[i]));
}
big_class();
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/7558084/viewspace-1002905/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- js二級聯動JS
- js例子-二級聯動JS
- js 實現二級聯動JS
- Js 實現五級聯動JS
- extjs Combobox級聯JS
- 原生JS實現二級聯動JS
- JS實現級聯下拉選單JS
- 使用json和jquery級聯選擇JSONjQuery
- JAVA 實現《超級瑪麗升級版》遊戲Java遊戲
- 輕量級配置中心Nodejs版NodeJS
- knockout.js 省、市、區三級聯動JS
- js省市級聯選單程式碼例項JS
- JS日期級聯元件程式碼分析及demoJS元件
- Excel轉Json升級版-PythonExcelJSONPython
- Java通用DBHelper類Java
- 實現基於json的級聯選單JSON
- js物件導向封裝級聯下拉選單列表JS物件封裝
- jQuery解析json格式資料生成級聯選單jQueryJSON
- 二級選單究極版之自學js系列JS
- OPCUA+MQTT構建物聯網通用框架MQQT框架
- Oracle 級聯表更新和SQLServer 級聯表更新OracleSQLServer
- JSONP 通用函式封裝JSON函式封裝
- 《深入淺出Ext JS(第2版)》一書升級版的大綱JS
- JAVA版微信支付V3—JSAPI支付JavaJSAPI
- Java工程師【2020升級版】Java工程師
- javascript讀取以json形式儲存的省市級聯效果JavaScriptJSON
- 級聯刪除
- elemenet 級聯
- Java8 新語法習慣 (級聯 lambda 表示式)Java
- js 建立一條通用連結串列JS
- java 遇到NoSuchMethodError通用解決思路JavaError
- 【Java基礎】通用程式設計Java程式設計
- java project打包生成jar包(通用)JavaProjectJAR
- Java反序列化利用鏈篇 | CC6鏈分析(通用版CC鏈)Java
- 通用無線測試儀MT8870A為物聯網/M2M進行功能升級
- js實現的國家、省、市級聯效果程式碼例項JS
- JavaScript 省市級聯效果JavaScript
- 2.12 級聯mockMock