treegrid.js

国内开发的javascript框架应用。龙博javascript。

                    SPA.tg4.setHeader(['col1','col2','col3','col4'])
                    .setRows([{cells:['11','12','13','14'],sub:new linb.UI.Button({position:'relative'})},{id:'row2',cells:['21','22','23','24'],sub:true},['31','32','33','34'],['41','42','43','44']]);

                    SPA.tg5.setHeader(['col1','col2','col3','col4'])
                .setRows([{cells:['11','12','13','14'],preview:'<h5>preview 1</h5><p>the preview message1 will displayed here</p>'},{cells:['21','22','23','24'],preview:'<h5>preview 2</h5><p>the preview message2 will displayed here</p>'},{id:'grp1',group:true,
                    caption:'group layer 1',
                    render : function(profile,row){return "<span style='width:16px;height:16px;background:url(img/img.gif) left -32px'></span>"+row.caption},
                    sub:[['11-11','12-11','13-11','14-11'],{id:'grp2',group:true,caption:'group layer2',sub:[['21-11','22-11','23-11','24-11'],['21-21','22-21','23-21','24-21']]},['11-21','12-21','13-21','14-21']]},{cells:['31','32','33','34'],sub:[['a','b','c','d'],['aa','bb','cc','dd']]},['41','42','43','44']]);
                    SPA.tg6.setHeader(['col1','col2','col3','col4'])
                    .setRows([{cells:['11','12','13','14'],sub:[
                        ['11-1','12-1','13-1','14-1'],{cells:['11-2','12-2','13-2','14-2'], sub:[
                            ['11-11','12-11','13-11','14-11'],['11-21','12-21','13-21','14-21']
                        ]}]
                     },{cells:['21','22','23','24'],sub:[
                        ['21-1','22-1','23-1','24-1'],{cells:['21-2','22-2','23-2','24-2'], sub:[
                            ['21-11','22-11','23-11','24-11'],['21-21','22-21','23-21','24-21']
                        ]}]
                     },['31','32','33','34'],['41','42','43','44']]);
                break;
            }

            SPA._loaded[id]=true;
        },
        _tg1_onClickcell:function(profile, cell){
            linb.message(cell._row.id+'/'+cell._col.id+' clicked!');
        },
        _tg1_onClickButton:function(profile, cell, proEditor){
            switch(profile.box.getCellPro(profile, cell, 'type')){
                case 'getter':
                    proEditor.boxing().setUIValue(_());
                break;
                case 'cmdbox':
                case 'popbox':
                    linb.message(cell._row.id+'/'+cell._col.id+' button clicked!');
                break;
            }
        },
        _tg2_afterRowActive:function(profile, row){
            if(!SPA.$dbBinder){
                SPA.$dbBinder = new linb.DataBinder();
                SPA.$dbBinder.setName('tr2');

                var cells=profile.properties.header,
                    ns=[],
                    name,widget,type,t;

                _.arr.each(cells,function(o){
                    type=o.type;
                    ns.push(t=[o.caption]);

                    if(type=='checkbox')
                        widget=widget=new linb.UI.CheckBox();
                    else if(!type || type=='label')
                        widget=new linb.UI.Label({caption:o.caption});
                    else if(!type || type=='button')
                        widget=new linb.UI.Button();
                    else
                        widget=new linb.UI.ComboInput();

                    if(widget.setDataBinder)
                        widget.setDataBinder('tr2').setDataField(o.id);

                    t[1]=widget.get(0);

                    switch(type){
                        case 'number':
                            widget.setType('none').setCustomStyle('INPUT',"text-align:right;");
                            break;
                        case 'progress':
                            widget.setType('none').setValueFormat("^(0([\\.]\\d*[0-9]+)|0|1)$").setCustomStyle('INPUT',"text-align:right;");
                            break;
                        case 'input':
                            widget.setType('none');
                            break;
                        case 'textarea':
                            widget.setType('none').setMultiLines(true).setWidth(200).setHeight(100);
                            break;
                        case 'listbox':
                        case 'combobox':
                        case 'helpinput':
                            widget.setType(type);
                            if(t=o.editorListKey)
                                widget.setListKey(t);
                            else if(t=o.editorListItems)
                                widget.setItems(t);
                            break;
                        case 'timepicker':
                        case 'datepicker':
                        case 'colorpicker':
                            widget.setType(type);
                            break;
                        case 'getter':
                        case 'popbox':
                        case 'cmdbox':
                            widget.setType(type);
                            break;
                    }


                    var editorFormat = o.editorFormat,
                        editorReadonly = o.editorReadonly;

                    if(widget.setReadonly)widget.setReadonly(!!editorReadonly);
                    if(editorFormat){
                        if(typeof editorFormat == 'function'){
                            if(widget.beforeFormatCheck)widget.beforeFormatCheck(editorFormat);
                        }else{
                            if(widget.setValueFormat)widget.setValueFormat(editorFormat);
                        }
                    }
                });

                var str='', nodes=[];

                _.arr.each(ns,function(arr){
                    nodes.push(arr[1]);
                })
                nodes=linb.UI.pack(nodes,false);
                nodes.setPosition('relative');

                for(var i=0;i<ns.length;i+=2){
                    str += '<tr><td align="right" style="text-decoration:underline;">'+ ns[i][0] +"</td><td>"+ ns[i][1].toHtml() +'</td>';
                    if(ns[i+1])
                        str +='<td align="right"  style="text-decoration:underline;">'+ ns[i+1][0] +"</td><td>"+ ns[i+1][1].toHtml() +'</td>';
                    str +='</tr>';
                }

                SPA.FormBuilder.setHtml('<table cellspacing="4" style="border-spacing:10px;border-collapse:separate;">'+str+'</table>',false);
                nodes.render(true);
            }
            var hash={};
            SPA.$curRow=row;
            _.arr.each(row.cells,function(o){
                hash[o._col.id]=o.value;
            });
            SPA.$dbBinder.resetValue(hash).getUI().setDisabled(false)
        },
        _onready:function () {
            SPA=this;
            linb.UI.cacheData('demo',[{id:'a',caption:'cap a',image:'img/img.gif'},{id:'b',caption:'cap b',image:'img/img.gif',imagePos:'left -16px'},{id:'c',caption:'cap c',image:'img/img.gif',imagePos:'left -32px'}]);
            linb.CSS.setStyleRules('.linb-demo1',{'background-color':'#AEDEAE'});
        },
        _pagebar3_onclick:function (profile, src, page, newValue) {
            var self = profile.boxing();
            self.setValue(newValue);

            SPA.tg2page=(page-1)||0;

            SPA.tg2.setRows(SPA.tg2data.slice(SPA.tg2page*5, (SPA.tg2page+1)*5));

            if(SPA.$dbBinder){
                SPA.$dbBinder.resetValue().getUI().setDisabled(true)
            }
            SPA.$curRow=null;

            return false;
        },
        _tg4_afteruivalueset:function (profile, oldValue, newValue) {
            linb.message(newValue);
        },
        _tg5_afteruivalueset:function (profile, oldValue, newValue) {
            linb.message(newValue);
        },
        _poptg:function(profile, pos, mode1, mode2, callback){
            var g;
            if(!SPA.popTg){
                g=SPA.popTg=new linb.UI.TreeGrid({width:300,height:160,dock:'none',visibility:'hidden',rowHandler:false});
                g.setCustomStyle('KEY','border:solid 1px #888');
                g.setHeader(['a','b','c','d'])
                 .setRows([['1','2','3','4'],['5','6','7','8'],['9','10','11','12'],['13','14','15','16']])
                 .setShowHeader(false);
                linb('body').append(g);
            }
            g=SPA.popTg;
            g.setValue('',true)
             .setActiveMode(mode1)
             .setSelMode(mode2)
             .afterUIValueSet(callback)
             .getRoot().popToTop(pos).setBlurTrigger('__a', function(){
                g.hide();
            });
            linb.Event.keyboardHook('esc',0,0,0,function(){
                g.hide();
                linb.Event.keyboardHook('esc');
            });
        },
        _comboinput4_onclickbutton:function (profile, pos, e, src) {
            this._poptg(profile,pos,'cell','single',function(p, oldValue, newValue) {
                var a=(newValue||'').split('|');
                newValue=p.boxing().getCellbyRowCol(a[0],a[1]);
                profile.boxing().setUIValue(newValue.value);
                SPA.popTg.hide();
             });
        },
        _comboinput8_onclickbutton:function (profile, pos, e, src) {
            this._poptg(profile,pos,'cell','multi',function(p, oldValue, newValue) {
                newValue=newValue||'';
                var a=[];
                _.arr.each(newValue.split(';'),function(o){
                    var b=(o||'').split('|');
                    o=p.boxing().getCellbyRowCol(b[0],b[1]);
                    a.push(o.value);
                });
                profile.boxing().setUIValue(a.join(';'));
             });
        },
        _comboinput9_onclickbutton:function (profile, pos, e, src) {//
            this._poptg(profile,pos,'row','single',function(p, oldValue, newValue) {
                profile.boxing().setUIValue(newValue);
                SPA.popTg.hide();
             });
        },
        _comboinput10_onclickbutton:function (profile, pos, e, src) {
             this._poptg(profile,pos,'row','multi',function(p, oldValue, newValue) {
                profile.boxing().setUIValue(newValue);
             });
        },
        _button19_onclick:function (profile, e, src, value) {
            if(SPA.$dbBinder && SPA.$curRow){
                if(SPA.$dbBinder.checkValid()){
                    var hash=SPA.$dbBinder.getValue();
                    _.arr.each(SPA.$curRow.cells,function(cell){
                        SPA.tg2.updateCellByRowCol(cell._row.id,cell._col.id, {value:hash[cell._col.id]});
                    });
                    SPA.tg2.resetRowValue(SPA.$curRow.id);
                    linb.message('data updated!');
                }
                else
                    linb.message('please correct input first!');
            }
        },
        _tg4_ongetcontent:function (profile, item, callback) {
            return new linb.UI.TreeGrid({position:'relative',width:300,height:200, dock:'none',
                header:['c1','c2','c3','c4'],
                rows:[{cells:['11','12','13','14'],sub:[
                    ['11-1','12-1','13-1','14-1'],{cells:['11-2','12-2','13-2','14-2'], sub:[
                        ['11-11','12-11','13-11','14-11'],['11-21','12-21','13-21','14-21']
                    ]}]
                 },{cells:['21','22','23','24'],sub:[
                    ['21-1','22-1','23-1','24-1'],{cells:['21-2','22-2','23-2','24-2'], sub:[
                        ['21-11','22-11','23-11','24-11'],['21-21','22-21','23-21','24-21']
                    ]}]
                 },['31','32','33','34'],['41','42','43','44']]})
        }
    }
});