EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: zombie86 on September 29, 2019, 10:24:50 AM



Title: search combotree
Post by: zombie86 on September 29, 2019, 10:24:50 AM
Dear all,

first of all I would like to thank you for this lovely UI.. :)

actually I do need some help in searching a combotree which placed in datagrid when I search for some values it shorten the list for the founded records but I need it to expand the tree as well.....

your help is highly appreciated


Title: Re: search combotree
Post by: jarry on September 29, 2019, 07:06:41 PM
Set the 'editable' property to true for the combotree component.


Title: Re: search combotree
Post by: zombie86 on September 30, 2019, 07:43:36 AM
Set the 'editable' property to true for the combotree component.
thanks  Jarry for your effort, but I already set it by the options
can you have a look on attached images

I need it to show like combotree2 as expanded tree for searched result

you help is highly appreciated


Title: Re: search combotree
Post by: jarry on September 30, 2019, 05:27:32 PM
You can call 'expandTo' method to tree to expand to the specified node. Please refer to this code.
Code:
$('#ct').combotree({
editable: true,
data: data,
keyHandler: $.extend({}, $.fn.combotree.defaults.keyHandler, {
query: function(q,e){
$.fn.combotree.defaults.keyHandler.query.call(this,q,e);
var t = $(this).combotree('tree');
var node = t.tree('findBy',{field:'text',value:q});
if (node){
t.tree('expandTo', node.target)
}
}
})
})


Title: Re: search combotree
Post by: zombie86 on October 01, 2019, 09:21:20 AM
You can call 'expandTo' method to tree to expand to the specified node. Please refer to this code.
Code:
$('#ct').combotree({
editable: true,
data: data,
keyHandler: $.extend({}, $.fn.combotree.defaults.keyHandler, {
query: function(q,e){
$.fn.combotree.defaults.keyHandler.query.call(this,q,e);
var t = $(this).combotree('tree');
var node = t.tree('findBy',{field:'text',value:q});
if (node){
t.tree('expandTo', node.target)
}
}
})
})

thanks Jarry for your effort, I tried the code but it only works for the first found exact match, and fails when there is more results :(

and could you please guide me how to achieve the navigation functionality for the combotree which is defined in datagrid

here is some snipt of code:

var account = $('#dg_invoice_trans').datagrid('getColumnOption', 'account_id');
            account.editor = {
                type:'combotree',
                options:{
                    valueField:'id',
                    treeField:'text',
                    method:'get',
                    data:accounts.coa,
                    selectOnNavigation:true,
                    editable:true,
                    required:true,
                    value: row.account_id,
                    filter: function(q, node){
                        return node.text.toLowerCase().indexOf(q.toLowerCase()) >= 0;
                    },
                    keyHandler: $.extend({}, $.fn.combotree.defaults.keyHandler, {
                        enter:function(e){
                            var t = $(this).combotree('tree');
                            t.tree('expandAll');
                        },
                        down: function(e){
                            $(this).combotree('tree').trigger(e);
                        },
                        up: function(e){
                            $(this).combotree('tree').trigger(e);
                        },
                        left: function(e){
                            $(this).combotree('tree').trigger(e);
                        },
                        right: function(e){
                            $(this).combotree('tree').trigger(e);
                        }
                    }),
                    onBeforeSelect:function(node){
                        var isLeaf = $(this).tree('isLeaf', node.target);
                        if(!isLeaf){ 
                            return false;
                        } 
                    },
                    onChange:function(value){
                        if(value>0){
                            $.ajax({
                                url:'<?php echo base_url('pediaerp/fam/accounting/ajax_get_account_details/NULL/')?>'+value,
                                type:'GET',
                                dataType:'JSON',
                                success:function(data){
                                    var ed_cost_center_id=$('#dg_invoice_trans').datagrid('getEditor',{index:rowIndex,field:'cost_center_id'});
                                    if(data.mfc_id==2){
                                        $(ed_cost_center_id.target).combotree('enable');
                                    }else{
                                        $(ed_cost_center_id.target).combotree('reset');
                                        $(ed_cost_center_id.target).combotree('disable');
                                    }
                                }
                            });
                        }
                    }
                }
            }