SmartCost
/
ConstructionCost


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="src/css/bootstrap/bootstrap.min.css" >
    <link rel="stylesheet" href="src/css/main.css">
    <link rel="stylesheet" href="src/css/font-awesome/font-awesome.min.css">
    <link rel="stylesheet" href="src/css/cust_flex_grid.css">
    <!--
    <link rel="stylesheet" href="src/css/bootstrap/themes.css">
    -->

    <!-- app scripts and styles -->
</head>
<script src="/src/lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/src/wijmo/controls/wijmo.min.js"></script>
<link href="/src/wijmo/styles/wijmo.min.css" rel="stylesheet"/>

<script type="text/javascript" src="/src/wijmo/controls/wijmo.grid.min.js"></script>
<script type="text/javascript" src="/src/wijmo/controls/wijmo.grid.sheet.min.js"></script>
<script type="text/javascript" src="/src/scripts/treeDataHelper.js"></script>
<body>
    <nav class="navbar navbar-light bg-faded p-0 ">
                <span class="header-logo px-1" >
                  Smartcost
                </span>
        <div class="float-lg-right navbar-text pb-0">
            <div class="dropdown d-inline-block">
                <button class="btn btn-link btn-sm dropdown-toggle" type="button" data-toggle="dropdown">康彤</button>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="user-info.html">个人信息</a>
                    <a class="dropdown-item" href="user-bug.html">购买</a>
                    <a class="dropdown-item" href="user-set.html">设置</a>
                </div>
            </div>
                <span class="btn btn-link btn-sm new-msg"  >
                  <i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;6
                </span>
            <button class="btn btn-link btn-sm">
                注销
            </button>
        </div>
    </nav>

    <p>测试 FlexGrid 控件：</p>
    <div>
        <input type="button" value="新增" onclick="billOperation('insert')"/>
        <input type="button" value="删除" onclick="billOperation('remove')"/>
        <input type="button" value="升级" onclick="billOperation('upgrade')"/>
        <input type="button" value="降级" onclick="billOperation('downgrade')"/>
        <input type="button" value="上移" onclick="billOperation('moveup')"/>
        <input type="button" value="下移" onclick="billOperation('movedown')"/>
    </div>
    <div id="theGrid" style="width:100%; height:600px;" class="custom-flex-grid"></div>
    <p>测试 FlexSheet 控件：</p>
    <div id="flexsheet" style="width:100%;height:auto;"></div>
    <!--

    -->
</body>
<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type:"POST",
            url: 'http://localhost:3010/api/getBills',
            dataType: 'json',
            data: {"user_id": ""},
            cache: false,
            timeout: 10000,
            success: function(result){
                //var data = result.data;
                var data = result.data.slice(0);
                for (var i = 0; i < data.length; i++) {
                    data[i]["chk"] = (i%2 == 0);
                }
                tree_Data_Helper.sortDataBySerial(data);
                //*
                buildGrid(tree_Data_Helper.buildTreeData(data));
                /*/
                 buildNormalGrid(data);
                //*/
                //buildSheet(data);
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('没有清单！');
                //or create local default cache...
            }
        });
    });

    function billOperation(opr) {
        switch (opr) {
            case  'insert':
                break;
            case  'remove':
                break;
            case  'upgrade':
                break;
            case  'downgrade':
                break;
            case  'moveup':
                break;
            case  'movedown':
                break;
        }
    }

    function buildNormalGrid(data) {
        var grid = new wijmo.grid.FlexGrid('#theGrid',
                {
                    autoGenerateColumns: false,
                    columns: buildColumns(),
                    selectionMode: wijmo.grid.SelectionMode.ListBox
                }
        );
        grid.itemFormatter = function(panel, r, c, cell) {
            if (wijmo.grid.CellType.Cell == panel.cellType) {
                var col = panel.columns[c];
                if (col.name == 'button') {
                    var html = '<div>' +
                            '  ' +
                            '<button class="btn btn-default btn-sm" onclick="editRow(' + r + ' )">' +
                            '<span class="glyphicon glyphicon-pencil"></span> Edit' +
                            '</button>' +
                            '</div>';
                    cell.innerHTML = html;
                }
            } else if (wijmo.grid.CellType.ColumnHeader == panel.cellType) {
                cell.style["text-align"] = "center";
                cell.onclick = function() {selectCol(grid, c)};
            } else if (wijmo.grid.CellType.RowHeader == panel.cellType) {
                cell.innerHTML = r + 1;
                cell.style["font-weight"] = "normal";
            } else if (wijmo.grid.CellType.TopLeft == panel.cellType) {
                cell.innerHTML = "^_^";
            }
        }
        grid.itemsSource = data;
    }

    function buildGrid(treeData) {
        // create the grid
        var grid = new wijmo.grid.FlexGrid('#theGrid');
        // populate the grid and set childItemsPath to show data hierarchically
        grid.childItemsPath = 'items';
        grid.itemFormatter = function(panel, r, c, cell) {
            if (wijmo.grid.CellType.Cell == panel.cellType) {
                var col = panel.columns[c];
                panel.rows[r].isReadOnly = false;
            } else if (wijmo.grid.CellType.ColumnHeader == panel.cellType) {
                cell.style["text-align"] = "center";
                cell.onclick = function() {selectCol(grid, c)};
            } else if (wijmo.grid.CellType.RowHeader == panel.cellType) {
                cell.innerHTML = r + 1;
                cell.style["font-weight"] = "normal";
            } else if (wijmo.grid.CellType.TopLeft == panel.cellType) {
                cell.innerHTML = "^_^";
            }
        }
        grid.initialize({
            autoGenerateColumns: false,
            columns: buildColumns(),
            itemsSource: treeData,                             // hierarchical data
            childItemsPath: 'items'                                // set hierarchy path
        });
        //grid.collapseGroupsToLevel(1);
    }

    function buildColumns() {
        var rst = [
            { header: '项目节', name: "", binding: 'Code', allowSorting: false, width: 160 },
            { header: '清单子目号', name: "", binding: 'B_Code', allowSorting: false, width: 160 },
            { header: '名称', name: "", binding: 'Name', allowSorting: false, width: 380 },
            { header: '单位', name: "", binding: 'Units', allowSorting: false, align: 'Center', width: 100 },
            { header: '清单数量', name: "", binding: 'Quantity', allowSorting: false, align: 'Right', width: 100 },
            { header: '设计数量1', name: "", binding: 'DesignQuantity', allowSorting: false, align: 'Right', width: 100 },
            { header: '设计数量2', name: "", binding: 'DesignQuantity2', allowSorting: false, align: 'Right', width: 100 },
            { header: '清单单价', name: "", binding: 'UnitPrice', allowSorting: false, align: 'Right', width: 100 },
            { header: '经济指标', name: "", binding: "DesignPrice", allowSorting: false, width: 100 },
            { header: '金额', name: "", binding: "TotalPrice", allowSorting: false, width: 100 },
            { header: '备注', name: "", binding: "Memostr", allowSorting: false, width: 200 },
            //{ header: ' ', name: "button", binding: "button", allowSorting: false, width: 100 },
            { header: ' ', name: "check", binding: "chk", allowSorting: false, width: 100 }
        ];
        return rst;
    }

    function selectCol(grid, colIdx) {
        if (grid.rows.length > 0) {
            grid.selection = new wijmo.grid.CellRange(0, colIdx, grid.rows.length - 1, colIdx);
        }
    }

    function buildSheet(sheetData) {
        var flex = new wijmo.grid.sheet.FlexSheet('#flexsheet');
        flex.addUnboundSheet('Empty Sheet');
        flex.selectedSheetIndex = 0;
    }

</script>
</html>