combotree에 관한 소스들 모음
<EXamples>
<input class="easyui-combotree" method='get' data-options="url:'../combotree/tree_data1.json',required:true" style="width:200px;">
$('#code').combotree({
url:"<c:url value='/manage/comboTreeJson.do'/>",
valueField:'code',
textField:'name',
method:'get'
......
});
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
4.JSON format
- [{
- "Id": 1,
- "Text": "Folder1"
- "IconCls": "icon-ok",
- "Children": [{
- "Id": 2,
- "Text": "File1"
- "Checked": true
- , {
- "Id": 3,
- "Text": "Folder2",
- "State": "open",
- "Children": [{
- "Id": 4
- "Text": "File3",
- "Attributes": {
- "P1": "value1",
- "P2": "value2"
- },
- "Checked": true,
- "IconCls": "icon-reload"
- , {
- "Id": 8,
- "Text": "Async Folder",
- "State": "closed"
- }]
- }]
- , {
- "Text": "Languages",
- "State": "closed",
- "Children": [{
- "Id": "j1",
- "Text": "Java"
- , {
- "Id": "j2",
- "Text": "C #"
- }]
- }]
- package edu.njupt.zhb.model;
-
- import java.util.List;
-
- public class ComboTreeModel {
- private int id;
- private String text;
- private List<ComboTreeModel> children;
- public int getId() {
- return id;
- }
- public void setId(int id) {
- this.id = id;
- }
- public String getText() {
- return text;
- }
- public void setText(String text) {
- this.text = text;
- }
- public List<ComboTreeModel> getChildren() {
- return children;
- }
- public void setChildren(List<ComboTreeModel> children) {
- this.children = children;
- }
- }
- package edu.njupt.zhb.action;
-
- import java.io.IOException;
- import java.io.PrintWriter;
- import java.util.ArrayList;
- import java.util.List;
-
- import javax.servlet.http.HttpServletResponse;
- import org.apache.struts2.ServletActionContext;
- import com.opensymphony.xwork2.ActionSupport;
-
- import edu.njupt.zhb.model.ComboTreeModel;
- import net.sf.json.JSONArray;
- public class CombotreeDemoAction extends ActionSupport {
-
-
-
- private static final long serialVersionUID = -3318989776253565435L;
-
-
-
-
- public void getTreeData(){
- List<ComboTreeModel> list = new ArrayList<ComboTreeModel>();
- for(int i = 1;i<10;i++){
- ComboTreeModel ctm = new ComboTreeModel();
- ctm.setId(i);
- ctm.setText("树节点"+i);
- if(i == 2){
- List<ComboTreeModel> children = new ArrayList<ComboTreeModel>();
- for (int j = 1; j < 6; j++) {
- ComboTreeModel comboTreeModel = new ComboTreeModel();
- comboTreeModel.setId(j);
- comboTreeModel.setText("子节点"+i+j);
- children.add(comboTreeModel);
- }
- ctm.setChildren(children);
- }
- list.add(ctm);
- }
- System.out.println("----json--");
- String json = JSONArray.fromObject(list).toString();
- getPrintWriter().write(json);
- }
-
-
-
-
- public static HttpServletResponse getResponse() {
- HttpServletResponse response = ServletActionContext.getResponse();
- response.setContentType("text/html;charset=UTF-8");
- return response;
- }
-
- public PrintWriter getPrintWriter() {
- PrintWriter pw = null;
- try {
- pw = getResponse().getWriter();
- } catch (IOException e) {
- e.printStackTrace();
- }
- return pw;
- }
-
- }
Markup
<select id="cc" style="width:200px;"></select>
jQuery
$('#cc').combotree({
url:'tree_data.json'
});
Dependencies
Options
Override defaults with $.fn.combotree.defaults.
Properties
Name | Type | Description | Default |
---|
width | number | The width of the component. | auto | treeWidth | number | The width of the tree list. | null | treeHeight | number | The height of the tree list. | null | url | string | A URL to load remote tree data. | null |
|
Events
Name | Parameters | Description |
---|
onSelect | node | Fires when user select a tree node. | onChange | newValue, oldValue | Fires when the field value is changed. |
|
Methods
Name | Parameter | Description |
---|
setValue | param | Set the specified value into the field. The 'param' parameter can be a tree node id value or a javascript object that contains two properties: id and text. | getValue | none | Get the field value. | reload | url | Request the remote tree data again. |
|
<!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <title>ComboTree - jQuery EasyUI Demo</title> |
| <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> |
| <link rel="stylesheet" type="text/css" href="../themes/icon.css"> |
| <link rel="stylesheet" type="text/css" href="demo.css"> |
| <script type="text/javascript" src="../jquery-1.7.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', 2); |
| } |
| function getValue(){ |
| var val = $('#cc').combotree('getValue'); |
| alert(val); |
| } |
| function disable(){ |
| $('#cc').combotree('disable'); |
| } |
| function enable(){ |
| $('#cc').combotree('enable'); |
| } |
| </script> |
| </head> |
| <body> |
| <h2>ComboTree</h2> |
| <div class="demo-info"> |
| <div class="demo-tip icon-tip"></div> |
| <div>Click the right arrow button to show the tree.</div> |
| </div> |
| |
| <div style="margin:10px 0;"> |
| <a href="#" class="easyui-linkbutton" onclick="reload()">Reload</a> |
| <a href="#" class="easyui-linkbutton" onclick="setValue()">SetValue</a> |
| <a href="#" class="easyui-linkbutton" onclick="getValue()">GetValue</a> |
| <a href="#" class="easyui-linkbutton" onclick="disable()">Disable</a> |
| <a href="#" class="easyui-linkbutton" onclick="enable()">Enable</a> |
| </div> |
| <p>Single Select</p> |
| <input id="cc" class="easyui-combotree" value="2" data-options="url:'tree_data.json',required:true" style="width:200px;"> |
| <p>Multiple Select</p> |
| <select class="easyui-combotree" name="language" data-options="url:'tree_data.json',cascadeCheck:false" multiple style="width:200px;"></select> |
| </body> |
| </html> |
tree nodes
function Travel(treeID){//参数为树的ID,注意不要添加#
var roots=$('#'+treeID).tree('getRoots'),children,i,j;
for(i=0;i<roots.length;i++){
alert(roots[i].text);
children=$('#'+treeID).tree('getChildren',roots[i].target);
for(j=0;j<children.length;j++)alert(children[j].text);
}
}
$(function(){
$('#tt2').tree({
checkbox: true,
url: 'tree_data.json',
onClick: function(node){
$(this).tree('toggle', node.target);
//alert('you dbclick '+node.text);
},
onContextMenu: function(e, node){
e.preventDefault();
$('#tt2').tree('select', node.target);
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
});
function reload(){
var node = $('#tt2').tree('getSelected');
if (node) {
$('#tt2').tree('reload', node.target);
}
else {
$('#tt2').tree('reload');
}
}
function getChildren(){
var node = $('#tt2').tree('getSelected');
if (node) {
var children = $('#tt2').tree('getChildren', node.target);
}
else {
var children = $('#tt2').tree('getChildren');
}
var s = '';
for (var i = 0; i < children.length; i++) {
s += children[i].text + ',';
}
alert(s);
}
function getChecked(){
var nodes = $('#tt2').tree('getChecked');
var s = '';
for (var i = 0; i < nodes.length; i++) {
if (s != '')
s += ',';
s += nodes[i].text;
}
alert(s);
}
function getSelected(){
var node = $('#tt2').tree('getSelected');
alert(node.text);
}
function collapse(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('collapse', node.target);
}
function expand(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('expand', node.target);
}
function collapseAll(){
var node = $('#tt2').tree('getSelected');
if (node) {
$('#tt2').tree('collapseAll', node.target);
}
else {
$('#tt2').tree('collapseAll');
}
}
function expandAll(){
var node = $('#tt2').tree('getSelected');
if (node) {
$('#tt2').tree('expandAll', node.target);
}
else {
$('#tt2').tree('expandAll');
}
}
function append(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('append', {
parent: (node ? node.target : null),
data: [{
text: 'new1',
checked: true
}, {
text: 'new2',
state: 'closed',
children: [{
text: 'subnew1'
}, {
text: 'subnew2'
}]
}]
});
}
function remove(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('remove', node.target);
}
function update(){
var node = $('#tt2').tree('getSelected');
if (node) {
node.text = '<span style="font-weight:bold">new text<\/span>';
node.iconCls = 'icon-save';
$('#tt2').tree('update', node);
}
}
function isLeaf(){
var node = $('#tt2').tree('getSelected');
var b = $('#tt2').tree('isLeaf', node.target);
alert(b)
}
function GetNode(type){
var node = $('#tt2').tree('getChecked');
var chilenodes = '';
var parantsnodes = '';
var prevNode = '';
for (var i = 0; i < node.length; i++) {
if ($('#tt2').tree('isLeaf', node[i].target)) {
chilenodes += node[i].text + ',';
var pnode = $('#tt2').tree('getParent', node[i].target);
if (prevNode != pnode.text) {
parantsnodes += pnode.text + ',';
prevNode = pnode.text;
}
}
}
chilenodes = chilenodes.substring(0, chilenodes.length - 1);
parantsnodes = parantsnodes.substring(0, parantsnodes.length - 1);
if (type == 'child') {
return chilenodes;
}
else {
return parantsnodes
};
};
function getNodes(){
alert(GetNode('fnode') + "," + GetNode('child'));
}
function doNode(){
var c="";
var p="";
$(".tree-checkbox1").parent().children('.tree-title').each(function(){
c+=$(this).parent().attr('node-id')+",";
});
$(".tree-checkbox2").parent().children('.tree-title').each(function(){
p+=$(this).parent().attr('node-id')+",";
});
var str=(c+p);
str=str.substring(0,str.length-1);
alert(str);
}
function Travel(treeID){
var roots=$('#'+treeID).tree('getRoots'),children,i,j;
for(i=0;i<roots.length;i++){
alert(roots[i].text);
children=$('#'+treeID).tree('getChildren',roots[i].target);
for(j=0;j<children.length;j++)alert(children[j].text);
}
}