久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

分享

jquery easy ui comboxtree應(yīng)用 樹狀下拉選擇框

 無(wú)不館 2015-04-20
 

 


隨著WEB2.0及ajax思想在互聯(lián)網(wǎng)上的快速發(fā)展傳播,,陸續(xù)出現(xiàn)了一些優(yōu)秀的Js框架,其中比較著名的有Prototype,、YUI,、jQuery,、mootools,、Bindows以及國(guó)內(nèi)的JSVM框架等,通過(guò)將這些JS框架應(yīng)用到我們的項(xiàng)目中能夠使程序員從設(shè)計(jì)和書寫繁雜的JS應(yīng)用中解脫出來(lái),,將關(guān)注點(diǎn)轉(zhuǎn)向功能需求而非實(shí)現(xiàn)細(xì)節(jié)上,,從而提高項(xiàng)目的開發(fā)速度。
jQuery 是繼prototype之后的又一個(gè)優(yōu)秀的javascript框架,。它是由 John Resig 于 2006 年初創(chuàng)建的,,它有助于簡(jiǎn)化 JavaScript? 以及Ajax 編程。有人使用這樣的一比喻來(lái)比較prototype和jQuery:prototype就像Java,,而jQuery就像ruby. 它是一個(gè)簡(jiǎn)潔快速靈活的JavaScript框架,,它能讓你在你的網(wǎng)頁(yè)上簡(jiǎn)單的操作文檔、處理事件,、實(shí)現(xiàn)特效并為Web頁(yè)面添加Ajax交互,。
它具有如下一些特點(diǎn):
1、代碼簡(jiǎn)練,、語(yǔ)義易懂,、學(xué)習(xí)快速、文檔豐富,。
2,、jQuery是一個(gè)輕量級(jí)的腳本,其代碼非常小巧,,最新版的JavaScript包只有20K左右,。
3、jQuery支持css1-CSS3,以及基本的xPath,。
4,、jQuery是跨瀏覽器的,它支持的瀏覽器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+,。
5,、可以很容易的為jQuery擴(kuò)展其他功能。
6,、能將JS代碼和html代碼完全分離,,便于代碼和維護(hù)和修改。
7,、插件豐富,,除了jQuery本身帶有的一些特效外,,可以通過(guò)插件實(shí)現(xiàn)更多功能,如表單驗(yàn)證,、tab導(dǎo)航,、拖放效果、表格排序,、DataGrid,,樹形菜單、圖像特效以及ajax上傳等,。
jQuery的設(shè)計(jì)會(huì)改變你寫JavaScript代碼的方式,,降低你學(xué)習(xí)使用JS操作網(wǎng)頁(yè)的復(fù)雜度,提高網(wǎng)頁(yè)JS開發(fā)效率,,無(wú)論對(duì)于js初學(xué)者還是資深專家,,jQuery都將是您的首選。
jQuery適合于設(shè)計(jì)師,、開發(fā)者以及那些還好者,,同樣適合用于商業(yè)開發(fā),可以說(shuō)jQuery適合任何JavaScript應(yīng)用的地方,,可用于不同的Web應(yīng)用程序中,。
官方站點(diǎn):http:///  中文站點(diǎn):http:///

 

今天我們所講的就是jquery-easy-ui,這是一個(gè)功能比較豐富的插件,,提供了許多通用布局,、顯示組件。如表單驗(yàn)證,、tab導(dǎo)航,、拖放效果、表格排序,、DataGrid,,樹形菜單、圖像特效等,。此插件的目標(biāo)就是Easy to build the ui of your web site by it!

我們通常有一些數(shù)據(jù)需要用戶進(jìn)行選擇,,比如部門或類別之類的,一般情況下我們提供了一個(gè)select元素即可,。如下:

jquery easy ui comboxtree應(yīng)用  樹狀下拉選擇框 - chenhaifeng_feng - 陳海峰--峰哥

 

 

這樣當(dāng)然可以,,但如果這些數(shù)據(jù)具有層次結(jié)構(gòu)特征,比如類別之間的關(guān)系,,組織機(jī)構(gòu)之間的關(guān)系,,我們更希望能在選擇時(shí)清楚我們選擇的數(shù)據(jù)在層次結(jié)構(gòu)上的信息。這時(shí)我們首先肯定是樹狀組件,,但如果能在下拉選擇框中嵌入樹狀組件,,用來(lái)代替相應(yīng)的選項(xiàng),,這是一個(gè)很好的結(jié)果。

Jquery-easy-ui提供了這樣的組件,,稱為comboxtree

效果如下:

jquery easy ui comboxtree應(yīng)用  樹狀下拉選擇框 - chenhaifeng_feng - 陳海峰--峰哥

 

 

 

   <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">

   <link rel="stylesheet" type="text/css" href="../themes/icon.css">

   <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

   <script type="text/javascript" src="../jquery.easyui.min.js"></script>

   <script>

      function reload(){

        $('#cc').combotree('reload');

      }

      function setValue(){

        $('#cc').combotree('setValue',{

           id:2,

           text:''

        });

      }

      function getValue(){

        var val = $('#cc').combotree('getValue');

        alert(val);

      }

   </script>

</head>

<body>

   <h1>ComboTree</h1>

   <div style="margin-bottom:10px;">

      <a href="#" onclick="reload()">reload</a>

      <a href="#" onclick="setValue()">setValue</a>

      <a href="#" onclick="getValue()">getValue</a>

   </div>

   <span>Select:</span>

   <select id="cc" class="easyui-combotree" url="depart.json" style="width:200px;">

  

   </select>

 

很簡(jiǎn)單,,組件的數(shù)據(jù)來(lái)源于一個(gè)depart.json文件,當(dāng)然也可以來(lái)源于服務(wù)器,,你可以用服務(wù)器組件(jsp,servlet之類)的返回一個(gè)相關(guān)的文件,。我們來(lái)看一個(gè)其結(jié)構(gòu)信息:

[{

                     "id" : 1,

                     "text" : "健坤集團(tuán)",

                     "children" : [{

                                          "id" : 2,

                                          "text" : "清華IT",

                                          "children" : []

                                   }, {

                                          "id" : 3,

                                          "text" : "北大bird",

                                          "children" : []

                                   }, {

                                          "id" : 4,

                                          "text" : "后勤部",

                                          "children" : []

                                   }, {

                                          "id" : 5,

                                          "text" : "科技公司",

                                          "children" : [{

                                                               "id" : 6,

                                                               "text" : "軟件實(shí)訓(xùn)部",

                                                               "children" : []

                                                        }]

                                   }]

              }]

所有,我們只要把數(shù)據(jù)從數(shù)據(jù)庫(kù)或其它數(shù)據(jù)來(lái)源中取出來(lái),,遞歸生成對(duì)應(yīng)格式的文件即可,。

以下是簡(jiǎn)單的示例:

package org.entites;

 

import java.util.ArrayList;

import java.util.List;

 

public class NodeBean {

  

   static List<NodeBean> list = new ArrayList<NodeBean>();

  

   static{

      //模擬從數(shù)據(jù)源中取出記錄封裝于java對(duì)象中

      NodeBean node = new NodeBean(1,"健坤集團(tuán)",0);

      NodeBean node2 = new NodeBean(2,"清華IT",1);

      NodeBean node3 = new NodeBean(3,"北大bird",1);

      NodeBean node4 = new NodeBean(4,"后勤部",1);

      NodeBean node5 = new NodeBean(5,"科技公司",1);

      NodeBean node6 = new NodeBean(6,"軟件實(shí)訓(xùn)部",5);

      list.add(node);

      list.add(node2);

      list.add(node3);

      list.add(node4);

      list.add(node5);

      list.add(node6);

     

   }

   /**

    * [

    * {

    * id:1,

    * text:'健坤',

    * children:[

    * {....}

    * ]

    * }

    * ]

    * @return

    */

   static String getJsonData(){

     

      StringBuffer buffer = new StringBuffer();

      buffer.append("[");

      iterGet(list, 0, buffer);

      buffer.append("]");

      //將,\n]替換成\n]

      String tmp = buffer.toString();

      tmp = tmp.replaceAll(",\n]", "\n]");

      return tmp;

   }

   static int count=0;

   /**

    * 遞歸生成json格式的數(shù)據(jù){id:1,text:'',children:[]}

    * @param args

    */

   static void iterGet(List<NodeBean> list,int pid,StringBuffer buffer){

     

      for(NodeBean node : list){

        //查找所有父節(jié)點(diǎn)為pid的所有對(duì)象,,然后拼接為json格式的數(shù)據(jù)

        if(node.getPid()==pid)

        {

           count++;

//         for(int i=0;i<count;i++){

//            buffer.append("\t");

//         }

      buffer.append("{\"id\":"+node.getId()+",\"text\":\""+node.getText()+"\",\"children\":[");

        //遞歸

        iterGet(list, node.getId(), buffer);

        buffer.append("]},\n");

        count--;

        }

       

      }

     

   }

  

   /**

    * 測(cè)試

    * @param args

    */

   public static void main(String[] args) {

     

  

      System.out.println(getJsonData());

     

   }

  

  

  

   private int id;//節(jié)點(diǎn)編號(hào)

   private String text;//節(jié)點(diǎn)名

   private int pid;//父節(jié)點(diǎn)編號(hào)

   public int getId() {

      return id;

   }

   public void setId(int id) {

      this.id = id;

   }

   public NodeBean() {

      super();

   }

   public NodeBean(int id, String text, int pid) {

      super();

      this.id = id;

      this.text = text;

      this.pid = pid;

   }

   public String getText() {

      return text;

   }

   public void setText(String text) {

      this.text = text;

   }

   public int getPid() {

      return pid;

   }

   public void setPid(int pid) {

      this.pid = pid;

   }

 

}

很簡(jiǎn)單吧,!其中的一些細(xì)節(jié),比如節(jié)點(diǎn)的圖標(biāo)顯示,,你可以生成對(duì)應(yīng)字符串根據(jù)數(shù)據(jù)形態(tài)去確即可,。感謝開源,謝謝指教,如需進(jìn)一步交流,,請(qǐng)留言!!!

 

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多