|
|
@@ -6,6 +6,7 @@
|
|
|
<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">
|
|
|
-->
|
|
|
@@ -18,6 +19,7 @@
|
|
|
|
|
|
<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" >
|
|
|
@@ -46,11 +48,11 @@
|
|
|
<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('downgrade')"/>
|
|
|
<input type="button" value="上移" onclick="billOperation('moveup')"/>
|
|
|
<input type="button" value="下移" onclick="billOperation('movedown')"/>
|
|
|
</div>
|
|
|
- <div id="theGrid" style="width:100%;height:auto;"></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>
|
|
|
<!--
|
|
|
@@ -72,8 +74,12 @@
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
data[i]["chk"] = (i%2 == 0);
|
|
|
}
|
|
|
- sortDataBySerial(data);
|
|
|
- buildGrid(data);
|
|
|
+ tree_Data_Helper.sortDataBySerial(data);
|
|
|
+ //*
|
|
|
+ buildGrid(tree_Data_Helper.buildTreeData(data));
|
|
|
+ /*/
|
|
|
+ buildNormalGrid(data);
|
|
|
+ //*/
|
|
|
//buildSheet(data);
|
|
|
},
|
|
|
error: function(jqXHR, textStatus, errorThrown){
|
|
|
@@ -83,14 +89,6 @@
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- function buildTreeData(data) {
|
|
|
- //
|
|
|
- }
|
|
|
-
|
|
|
- function sortByCustId(data, IdStr, IdVal) {
|
|
|
- //
|
|
|
- }
|
|
|
-
|
|
|
function billOperation(opr) {
|
|
|
switch (opr) {
|
|
|
case 'insert':
|
|
|
@@ -108,40 +106,14 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- function sortDataBySerial(data) {
|
|
|
- data.sort(function(item1, item2) {
|
|
|
- var rst = 0;
|
|
|
- if (item1["SerialNo"] > item2["SerialNo"]) {
|
|
|
- rst = 1;
|
|
|
- } else if (item1["SerialNo"] < item2["SerialNo"]) {
|
|
|
- rst = -1;
|
|
|
- }
|
|
|
- return rst;
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function buildGrid(data) {
|
|
|
+ function buildNormalGrid(data) {
|
|
|
var grid = new wijmo.grid.FlexGrid('#theGrid',
|
|
|
{
|
|
|
autoGenerateColumns: false,
|
|
|
- columns: [
|
|
|
- { 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 }
|
|
|
- ]
|
|
|
+ columns: buildColumns(),
|
|
|
+ selectionMode: wijmo.grid.SelectionMode.ListBox
|
|
|
}
|
|
|
);
|
|
|
- grid.itemsSource = data;
|
|
|
grid.itemFormatter = function(panel, r, c, cell) {
|
|
|
if (wijmo.grid.CellType.Cell == panel.cellType) {
|
|
|
var col = panel.columns[c];
|
|
|
@@ -164,10 +136,54 @@
|
|
|
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 editRow(row) {
|
|
|
- alert(colHeaders.length);
|
|
|
+ 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) {
|
