limeng
/
cetdz


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
							<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="../../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerSpinner.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    <script src="../../lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
    <style type="text/css">
        #worktypeGrid
        {
            text-align: right;
            margin: 5px;
            background: white;
        }
        .l-button
        {
            float: right;
            margin-right: 10px;
        }
        table
        {
            font-size: 12px;
        }
    </style>
</head>
<body style="padding: 6px; overflow: hidden;">
    <div id="maingrid" style="margin: 0; padding: 0">
    </div>
    <div id="worktypeGrid" style="display: none">
    </div>
    <script type="text/javascript">

        $.ligerDefaults.Grid.mouseoverRowCssClass = null;

        //扩展一个 多行文本框 的编辑器
        $.ligerDefaults.Grid.editors['textarea'] = {
            create: function (container, editParm)
            {
                var input = $("<textarea class='l-textarea' />");
                container.append(input);
                return input;
            },
            getValue: function (input, editParm)
            {
                return input.val();
            },
            setValue: function (input, value, editParm)
            {
                input.val(value);
            },
            resize: function (input, width, height, editParm)
            {
                var column = editParm.column;
                if (column.editor.width) input.width(column.editor.width);
                else input.width(width);
                if (column.editor.height) input.height(column.editor.height);
                else input.height(height);
            }
        };

        var worktypes = [
            { id: 1, name: '行政', descript: '' },
            { id: 2, name: '市场', descript: '' },
            { id: 3, name: '销售', descript: '' },
            { id: 4, name: '研发', descript: '', children: [
                { id: 101, name: 'JAVA', descript: '' },
                { id: 102, name: 'Web UI', descript: '' },
                { id: 103, name: '.NET', descript: '' }
            ]
            }
        ];
        function getWorkType(id, arr)
        {
            arr = arr || worktypes;
            for (var i in arr)
            {
                var o = arr[i];
                if (o.id == id)
                    return o.name;
                if (o.children)
                {
                    var name = getWorkType(id, o.children);
                    if (name) return name;
                }
            }
        }
        var win = null;
        function openWin()
        {
            if (!win)
            {
                win = $.ligerDialog({ modal: true, showMax: true, showToggle: true, isResize: true, isDrag: true, title: '选择负责工作类型',
                    target: $("#worktypeGrid"),
                    width: 600, height: 300
                                    , buttons: [
                    { text: '确定', onclick: function ()
                    {
                        ok(wgrid.getSelected());
                    }
                    }, { text: '取消', onclick: function ()
                    {
                        cancel();
                    }
                    }

                ]

                });
            }
            win.show();
            return win;
        }
        function ok(selected)
        {
            grid.updateRow(grid.getSelected(), { worktype: selected.id });
            grid.endEdit();
            win.hide();
        }
        function cancel()
        {
            win.hide();
        }

        var dayEditor = { type: 'spinner', minValue: 0, maxValue: 24 };
        var totalSummary = {
            align: 'right',
            render: function (e)
            {
                return e.sum.toFixed(0);
            }
        };
        var worktypeEditor = { type: 'combobox', ext: function (record)
        {
            var options = {
                onBeforeOpen: function ()
                {
                    openWin();
                    return false;
                },
                render: function ()
                {
                    return getWorkType(record.worktype);
                }
            };
            return options;
        }
        };


        var data = [
            { worktype: 1, d1: 0, d2: 0, d3: 0, d4: 0, d5: 0, d6: 0, d7: 0, d8: 0 },
            { worktype: 1, d1: 0, d2: 0, d3: 0, d4: 0, d5: 0, d6: 0, d7: 0, d8: 0 },
            { worktype: 1, d1: 0, d2: 0, d3: 0, d4: 0, d5: 0, d6: 0, d7: 0, d8: 0 },
            { worktype: 1, d1: 0, d2: 0, d3: 0, d4: 0, d5: 0, d6: 0, d7: 0, d8: 0 },
            { worktype: 1, d1: 0, d2: 0, d3: 0, d4: 0, d5: 0, d6: 0, d7: 0, d8: 0 },
            { worktype: 1, d1: 0, d2: 0, d3: 0, d4: 0, d5: 0, d6: 0, d7: 0, d8: 0 }
        ];

        var grid = $("#maingrid").ligerGrid({
            columns: [
                { display: '负责工作类型', name: 'worktype', width: 80, editor: worktypeEditor, render: function (record)
                {
                    return getWorkType(record.worktype);
                }
                },
                { display: '工作描述', name: 'descript', width: 180, editor: { type: 'textarea', height: 100} },
                { display: '工作时间', columns: [
                    { display: '星期一', name: 'd1', width: 80, align: 'right', editor: dayEditor, totalSummary: totalSummary },
                    { display: '星期二', name: 'd2', width: 80, align: 'right', editor: dayEditor, totalSummary: totalSummary },
                    { display: '星期三', name: 'd3', width: 80, align: 'right', editor: dayEditor, totalSummary: totalSummary },
                    { display: '星期四', name: 'd4', width: 80, align: 'right', editor: dayEditor, totalSummary: totalSummary },
                    { display: '星期五', name: 'd5', width: 80, align: 'right', editor: dayEditor, totalSummary: totalSummary },
                    { display: '星期六', name: 'd6', width: 80, align: 'right', editor: dayEditor, totalSummary: totalSummary },
                    { display: '星期七', name: 'd7', width: 80, align: 'right', editor: dayEditor, totalSummary: totalSummary },
                    { display: '星期日', name: 'd8', width: 80, align: 'right', editor: dayEditor, totalSummary: totalSummary }
                ]
                },
                { display: '汇总', align: 'right', render: function (record)
                {
                    var total = 0;
                    for (var i = 1; i <= 8; i++)
                    {
                        total += record['d' + i];
                    }
                    if (!total) return "0";
                    return total;
                }
                }
            ],
            data: { Rows: data },
            height: '96%', rownumbers: true, enabledEdit: true
        });

        var wgrid = $("#worktypeGrid").ligerGrid({
            columns: [
                { display: '负责工作类型', align: 'left', name: 'name', width: 200 },
                { display: '负责工作类型描述', name: 'descript', width: 300 }
            ],
            data: { Rows: worktypes },
            inWindow: false,
            height: 280, width: 550,
            tree: { columnName: 'name' }
        });
        wgrid.bind('dblClickRow', function (record)
        {
            ok(record);
        });
        wgrid.bind('resize', function (e)
        {
            this.setHeight(e.height - 10);
        });
    </script>
</body>
</html>