treegrid.js

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

Class('App.linb_UI_TreeGrid', 'linb.Com',{
    Instance:{
        tg2page:0,
        //Com events
        events:{"onReady":"_onready"},
        _loaded:{},
        iniComponents:function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};

            append((new linb.UI.Tabs)
                .host(host,"tabs")
                .setItems([{"id":"a", "caption":"editable,rowDragable,colMovable"}, {"id":"b", "caption":"data binding"}, {"id":"c", "caption":"grid for select"}, {"id":"d", "caption":"others"}])
                .setLeft(0)
                .setTop(0)
                .setValue('a')
                .onItemSelected("_tabs2_onitemselected")
            );

            host.tabs.append((new linb.UI.Dialog)
                .host(host,"dialog10")
                .setLeft(20)
                .setTop(220)
                .setWidth(360)
                .setHeight(180)
                .setCaption("group, preview")
                .setMinBtn(false)
                .setMaxBtn(false)
                .setCloseBtn(false)
                .setPinBtn(false)
            , 'd');

            host.dialog10.append((new linb.UI.TreeGrid)
                .host(host,"tg5")
                .setHeader([])
                .setRows([])
                .setColMovable(true)
                .setColHidable(true)
                .setDropKeys("abc")
                .setDragKey("abc")
                .afterUIValueSet("_tg5_afteruivalueset")
            );

            host.tabs.append((new linb.UI.Layout)
                .host(host,"layout4")
                .setItems([{"id":"before", "pos":"before", "locked":false, "size":260, "min":50, "max":500, "hide":false, "cmd":false}, {"id":"main", "min":10}])
                .setLeft(0)
                .setTop(0)
            , 'b');

            host.layout4.append((new linb.UI.TreeGrid)
                .host(host,"tg2")
                .setSelMode("none")
                .setHeader([])
                .setRows([])
                .afterRowActive("_tg2_afterRowActive")
                .setCustomStyle({'CELL':'border-right:none;padding-right:1px;'})
            , 'before');

            host.layout4.append((new linb.UI.Panel)
                .host(host,"FormBuilder")
                .setCaption("Form Builder")
            , 'main');

            host.layout4.append((new linb.UI.Button)
                .host(host,"button19")
                .setLeft(520)
                .setTop(50)
                .setWidth(130)
                .setZIndex(10)
                .setCaption("Update")
                .onClick("_button19_onclick")
            , 'main');

            host.layout4.append((new linb.UI.Block)
                .host(host,"block2")
                .setDock("bottom")
                .setHeight(24)
                .setCustomStyle({"BORDER":"border:solid 1px #CDCDCD;", "PANEL":"background-color:#F4F4F4;"})
            , 'before');

            host.block2.append((new linb.UI.PageBar)
                .host(host,"pagebar3")
                .setLeft(20)
                .setTop(3)
                .setValue("1:1:5")
                .onClick("_pagebar3_onclick")
            );

            host.tabs.append((new linb.UI.ComboInput)
                .host(host,"comboinput4")
                .setLeft(80)
                .setTop(30)
                .setType("popbox")
                .setItems([{"id":"a", "caption":"itema", "tips":"item a"}, {"id":"b", "caption":"itemb", "tips":"item b"}, {"id":"c", "caption":"itemc", "tips":"item c"}])
                .onClickButton("_comboinput4_onclickbutton")
            , 'c');

            host.tabs.append((new linb.UI.Dialog)
                .host(host,"dialog7")
                .setLeft(20)
                .setTop(20)
                .setWidth(360)
                .setHeight(180)
                .setCaption("customize cell type")
                .setMinBtn(false)
                .setMaxBtn(false)
                .setCloseBtn(false)
                .setPinBtn(false)
            , 'd');

            host.dialog7.append((new linb.UI.TreeGrid)
                .host(host,"tg3")
                .setSelMode("none")
                .setHeader([])
                .setRows([])
            );

            host.tabs.append((new linb.UI.ComboInput)
                .host(host,"comboinput8")
                .setLeft(230)
                .setTop(30)
                .setType("popbox")
                .setItems([{"id":"a", "caption":"itema", "tips":"item a"}, {"id":"b", "caption":"itemb", "tips":"item b"}, {"id":"c", "caption":"itemc", "tips":"item c"}])
                .onClickButton("_comboinput8_onclickbutton")
            , 'c');

            host.tabs.append((new linb.UI.ComboInput)
                .host(host,"comboinput9")
                .setLeft(80)
                .setTop(100)
                .setType("popbox")
                .setItems([{"id":"a", "caption":"itema", "tips":"item a"}, {"id":"b", "caption":"itemb", "tips":"item b"}, {"id":"c", "caption":"itemc", "tips":"item c"}])
                .onClickButton("_comboinput9_onclickbutton")
            , 'c');

            host.tabs.append((new linb.UI.Dialog)
                .host(host,"dialog8")
                .setLeft(410)
                .setTop(20)
                .setWidth(360)
                .setHeight(180)
                .setCaption("grid in grid")
                .setMinBtn(false)
                .setMaxBtn(false)
                .setCloseBtn(false)
                .setPinBtn(false)
            , 'd');

            host.dialog8.append((new linb.UI.TreeGrid)
                .host(host,"tg4")
                .setSelMode("multi")
                .setHeader([])
                .setRows([])
                .onGetContent("_tg4_ongetcontent")
                .afterUIValueSet("_tg4_afteruivalueset")
            );

            host.tabs.append((new linb.UI.TreeGrid)
                .host(host,"tg1")
                .setRowNumbered(true)
                .setEditable(true)
                .setAnimCollapse(true)
                .setHeader([])
                .setRows([])
                .setColMovable(true)
                .setColHidable(true)
                .setDropKeys("abc")
                .setDragKey("abc")
                .onClickButton("_tg1_onClickButton")
                .onClickCell("_tg1_onClickcell")
            , 'a');

            host.tabs.append((new linb.UI.Dialog)
                .host(host,"dialog9")
                .setLeft(410)
                .setTop(220)
                .setWidth(360)
                .setHeight(180)
                .setCaption("row number and alt row background color")
                .setMinBtn(false)
                .setMaxBtn(false)
                .setCloseBtn(false)
                .setPinBtn(false)
            , 'd');

            host.dialog9.append((new linb.UI.TreeGrid)
                .host(host,"tg6")
                .setAltRowsBg(true)
                .setRowNumbered(true)
                .setHeader([])
                .setRows([])
            );

            host.tabs.append((new linb.UI.ComboInput)
                .host(host,"comboinput10")
                .setLeft(230)
                .setTop(100)
                .setType("popbox")
                .setItems([{"id":"a", "caption":"itema", "tips":"item a"}, {"id":"b", "caption":"itemb", "tips":"item b"}, {"id":"c", "caption":"itemc", "tips":"item c"}])
                .onClickButton("_comboinput10_onclickbutton")
            , 'c');

            return children;
            // ]]code created by jsLinb UI Builder
        },
        _tabs2_onitemselected:function (profile, item, src) {
            var id=item.id;
            if(SPA._loaded[id])return;
            switch(id){
                case 'a':
                    linb.Ajax('App/js/grid1.js','',function(s){var hash=_.unserialize(s);SPA.tg1.setHeader(hash.header).setRows(hash.rows);},null,null,{asy:false}).start();
                break;
                case 'b':
                    linb.Ajax('App/js/grid2.js','',function(s){var hash=_.unserialize(s);  SPA.tg2data=hash.rows;  SPA.tg2.setHeader(hash.header).setRows(SPA.tg2data.slice(SPA.tg2page*5, (SPA.tg2page+1)*5));},null,null,{asy:false}).start();
                break;
                case 'd':
                    SPA.tg3.setHeader([{
                            "id" : "col2",
                            "caption" : "desc"
                        },
                        {
                            "id" : "col2",
                            "caption" : "checkbox",
                            "type" : "checkbox"
                        },
                        {
                            "id" : "col3",
                            "caption" : "input",
                            "type" : "input"
                        },
                        {
                            "id" : "col4",
                            "caption" : "colorpicker",
                            "type" : "colorpicker"
                        }]
                    ).setRows([{
                        id:'row1',
                        cells:['type in column',true,'abc','#FFFFFF']
                    },{
                        id:'row2',
                        type:'checkbox',
                        cells:[{type:'label',value:'type in row'},true,false,true]
                    },{
                        id:'row3',
                        cells:['type in cell',{value:true,type:'checkbox'},{value:'#F00FFF',type:'colorpicker'},{value:'def',type:'input'}]
                    }]);