1. 程式人生 > >Jquery ComboTree樹的繫結-資料來源JSON格式-操作

Jquery ComboTree樹的繫結-資料來源JSON格式-操作

前言

ComboTree也是表單中一種常見元件,如:有些輸入框,限定只能選取一些特徵的資料,而且這些資料時需要動態從資料庫中讀取的。我這裡就演示一下這個過程(資料庫就不涉及了,後臺能產生Combotree所需的Json格式資料就行了)。以下是我寫的一個Demo。前臺的操作有:1.繫結樹的url,設定是否多選 2.獲取使用者所選的值 3.設定特定的值 4.Disable和Enable

頁面(index.jsp)

  1. <%@ page language="java"import="java.util.*"pageEncoding="UTF-8"%>
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"  
  5.             + request.getServerName() + ":" + request.getServerPort()  
  6.             + path + "/";  
  7. %>
  8. <!DOCTYPE html>
  9. <html>
  10. <head>
  11.     <title>ComboTree Actions - jQuery EasyUI Demo
    </title>
  12.     <linkrel="stylesheet"type="text/css"href="js/themes/default/easyui.css">
  13.     <linkrel="stylesheet"type="text/css"href="js/themes/icon.css">
  14.     <linkrel="stylesheet"type="text/css"href="js/demo/demo.css">
  15.     <scripttype="text/javascript"src="js/jquery.min.js"></script
    >
  16.     <scripttype="text/javascript"src="js/jquery.easyui.min.js"></script>
  17.     <scripttype="text/javascript">
  18.        $(function(){  
  19.            $("#cc").combotree({  
  20.                url:'getTreeData',//Action,獲取樹的資訊  
  21.                multiple:true//設定是否多選  
  22.            });  
  23.         });  
  24.     </script>
  25. </head>
  26. <body>
  27.     <h2>ComboTree Actions</h2>
  28.     <divclass="demo-info">
  29.         <divclass="demo-tip icon-tip"></div>
  30.         <div>Click the buttons below to perform actions</div>
  31.     </div>
  32.     <divstyle="margin:10px 0">
  33.         <ahref="javascript:void(0)"class="easyui-linkbutton"onclick="getValue()">GetValue</a>
  34.         <ahref="javascript:void(0)"class="easyui-linkbutton"onclick="setValue()">SetValue</a>
  35.         <ahref="javascript:void(0)"class="easyui-linkbutton"onclick="disable()">Disable</a>
  36.         <ahref="javascript:void(0)"class="easyui-linkbutton"onclick="enable()">Enable</a>
  37.     </div>
  38.     <inputid="cc"class="easyui-combotree"style="width:200px;">
  39.     <scripttype="text/javascript">
  40.         function getValue(){  
  41.             var val = $('#cc').combotree('getValue');  
  42.             var text = $('#cc').combotree('getText');  
  43.             alert("val="+val+",text="+text);  
  44.         }  
  45.         function setValue(){  
  46.             $('#cc').combotree('setValue', '這是設定的值');  
  47.         }  
  48.         function disable(){  
  49.             $('#cc').combotree('disable');  
  50.         }  
  51.         function enable(){  
  52.             $('#cc').combotree('enable');  
  53.         }  
  54.     </script>
  55. </body>
  56. </html>

2.ComboTree的資料來源類
  1. /* 
  2.  * $filename: ComboTreeModel.java,v $ 
  3.  * $Date: 2013-10-14  $ 
  4.  * Copyright (C) ZhengHaibo, Inc. All rights reserved. 
  5.  * This software is Made by Zhenghaibo. 
  6.  */
  7. package edu.njupt.zhb.model;  
  8. import java.util.List;  
  9. /* 
  10.  *@author: ZhengHaibo   
  11.  *web:     http://blog.csdn.net/nuptboyzhb 
  12.  *mail:    [email protected] 
  13.  *2013-10-14  Nanjing,njupt,China 
  14. 相關推薦

    Jquery ComboTree-資料來源JSON格式-操作

    前言 ComboTree也是表單中一種常見元件,如:有些輸入框,限定只能選取一些特徵的資料,而且這些資料時需要動態從資料庫中讀取的。我這裡就演示一下這個過程(資料庫就不涉及了,後臺能產生Combotree所需的Json格式資料就行了)。以下是我寫的一個D

    c# datagridview資料來源(BindingList<class>)中的現象 待查

    現象1: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using Sys

    關於LookUpEdit資料來源和取值

    首先在GridControl裡在Repository中新增一個GridLookUpEdit 在設定DisPlayMember(介面顯示欄位) 然後在後臺繫結資料 List<EntityBrand> entityBrand = client.GetBrandList(); this.rep

    jQuery的onclick和直接click區別

    狀況之外 在之前的公司並沒有遇到這個問題,也就沒有深究。直到自己換了現在的公司,剛來第二天就開始寫別人寫到一半的專案,很無奈,不是原生就是jquery,由於專案急,已經來不及切換框架重新佈局,只能繼續了。 狀況之中 到處都是列表,到處都是js建立的動態頁面,好吧,那我也繼續吧,突然,意外發生了

    jQuery兩種事件

    jQuery兩種繫結事件方式 1.eventName(fn),   js部分事件沒有實現 2.on("eventName",fn)   js所有的事件都實現了 <html> <head> <title></title> <

    2018年11月2日 關於dropdownlist,資料來源後顯示system.data.datarowview的問題解決

    準備實現兩個dropdownlist二級聯動的功能: 在一個dropdownlist 繫結過資料來源之後顯示,system.data.datarowview,無法顯示從資料庫中查詢到的值。 原因是:  DropDownList4.DataTextField沒有繫結。 &nb

    Easyui datagrid 本地Json資料

     var jsonstr = '{"total":1,"rows":[{"id":"M000005","name":"檢測裝置","sortid":3,"valid":"1","handler":"系統管理員"}]}';var data = $.parseJSON(jsonstr);  $

    jquery帶引數事件 bind(type,[data],fn)

    bind 方法為每個選擇的元素事件繫結函式 語法格式:bind(type,[data],fn) 其中引數type為一個或多個型別字串引數,type引數選擇範圍如下: blur,focus,load,scroll,unload,click, dbclick,mousedown,mouseup,mous

    DataGridView資料來源

    簡單的資料繫結: using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["connStr"].ToString())) {   SqlDataAdapter sda = n

    vue的資料來源-json格式陣列新增一條資料並重新整理。記錄一下

    data () {     return {       arr: [{a:'111',b:'222',c:'333'},{a:'444',b:'555',c:'666'}],     }   }, method

    gridview 資料來源

    本人剛剛學習asp.net+c# 整理一下關於 gridview的使用    if(!Page.IsPostBack) {            &nb

    DEV元件LookupEdit,ComboBoxEdit資料來源 DEV元件LookupEdit,ComboBoxEdit資料來源

    DEV元件LookupEdit,ComboBoxEdit繫結資料來源 LookupEdit可以繫結資料表(DataTable)或物件資料組(Object List)作為資料來源,下拉窗體可自定顯示欄位。繫結資料來源需要設定三個引數:DisplayMember ,ValueMember,Data

    jquery動態新增事件

    jquery動態新增繫結事件 場景:在使用jquery的方式為元素繫結事件時,我經常使用bind或者click,但這隻能為頁面已經載入好的元素繫結事件。像需要用ajax的方式請求遠端資料來動態新增頁面元素時,顯然以上幾種繫結事件的方式是無效的。 解決方案: 1.7之後也就是1.8開始,就

    XtraReport資料來源的三種方式

    一 、report.datasource直接放一個dataset或datatable 此種方法在程式碼裡實現,直接為report賦資料來源 特點: -無須生成xml -生成模板檔案.repx中不包含表結構資訊 -可用於特定表的使用,一旦將repx複製到

    jQuery基礎事件

    學習要點: 1.繫結事件 2.簡寫事件 3.複合事件 JavaScript有一個非常重要的功能,就是事件驅動。當頁面完全載入後,使用者通過滑鼠 或鍵盤觸發頁面中繫結事件的元素即可觸發。jQuery為開發者更有效率的編寫事件行為,封 裝了大量有益的事件方法供我們使用。

    jQuery中用on事件和用bind事件的區別

    jQuery兩種繫結事件,舉例說明: 以上三種方法都是對ul下的li進行繫結 其中方法一和方法二完全一樣,作用是:給ul下已經存在的li新增繫結事件,方法繫結在了li上,一旦出現新的li,點選方法是無法繫結在新的li上的。 因為繫結方法已經完成,任務分發到各個li上,

    Jquery的on方法在Iphone下失效的問題

    今日做專案的時候遇到一個奇怪的問題,例如: <div class="am-btn am-btn-default sure-btn" id="sure_id">確定</div>

    jquery on方法 動態元素 出現的問題

                    之前使用 on 的時候一直是$("").on('click','function(){}')之後發現有些時候一直無法繫結(比如元素動態生成時),檢視文件後發現正確用法應該是$(document).on("change","#pageSize_out",function(){  

    Winform中Combox資料來源 型別作為引數傳遞

    //呼叫 IniCombox(cbChannelName, typeof(Model.SystemEnum.ChannelName)); //具體實現 public void IniCombox(Relations.Control.ComBox cb, Type type)

    winfrom 窗體控制元件實現二級聯動 ComboBox資料來源時觸發SelectedIndexChanged事件的處理辦法

    ComboBox繫結資料來源時觸發SelectedIndexChanged事件的處理辦法 事件,而這個時候使用者並沒有選擇內容,其SelectedValue也不是對應欄位的值。那麼時寫在SelectedIndexChanged中的處理程式碼就會因為SelectedValue的內容不正確引發異常。一般網上找到