Java版通用JS級聯

tonyscau發表於2008-04-23

Java版通用JS級聯

2007-09-25 08:15 作者:Jerome Kwok 來源:csdn
[摘要] 在開發中,經常遇到諸如省、市,大類、小類的級聯select 下拉框。常常,這些類別或地區的內容,又存在資料庫中。這裡建議,透過IO,將類別生成js檔案,然後在頁面中引入這個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(); Java版通用JS級聯

[@more@]

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/7558084/viewspace-1002905/,如需轉載,請註明出處,否則將追究法律責任。

相關文章