Easyui ComboTree 콤보트리 [소스코드모음]

SaintHwang 2015. 12. 1. 14:15

2015. 12. 1. 14:15

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 
Java code
[{
"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;  
    /** 
     * 
     *  
     * @return 
     */  
    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();//JSON  
        getPrintWriter().write(json);//  
    }  
    /** 
     * 
     *  
     * @return 
     */  
    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

tree

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); } }

저작자표시

'etc' 카테고리의 다른 글

ajax는 되는데 json 이 안될때 (0)	2015.12.24
톰캣 오류 Starting Tomcat v7.0 Server at localhost has encountered a problem (0)	2015.12.01
강제종료후 이클립스 실행 안될때 (0)	2015.12.01
Sublime Text2 한글 깨짐 해결 (0)	2015.12.01
톰캣 실행시 바로 실행되게 하는 클래스 [pom.xml 정의] (0)	2015.12.01

dmz 개발창고