combotree에 관한 인터넷정보 끌어모음
예 이미지: http://www.jeasyui.com/documentation/images/combotree.png
<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;
- /**
- *
- *
- * @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
|
Events
|
Methods
|
| <!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); } }
고멘네