w-aggrid-vue
Version:
A wrapper for ag-grid-vue.
281 lines (265 loc) • 7.75 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>example for genRowsPinnTop</title>
<!-- @babel/polyfill -->
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
></script>
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<!-- extractHtml已自動添加@babel/polyfill與vue -->
<!-- ag-grid-community, do not include css -->
<script
src="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.4/dist/ag-grid-community.min.noStyle.js"
></script>
<script
_src="https://cdn.jsdelivr.net/npm/ag-grid-enterprise@31.3.4/dist/ag-grid-enterprise.min.noStyle.js"
></script>
<link
rel="stylesheet"
_href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.4/dist/styles/ag-grid.min.css"
/>
<link
rel="stylesheet"
_href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.4/dist/styles/ag-theme-balham.min.css"
/>
<!-- ag-grid-vue, 因rollup無法簡單編譯ag-grid-vue故改引用 -->
<script
src="https://cdn.jsdelivr.net/npm/ag-grid-vue@31.3.4/dist/ag-grid-vue.umd.min.js"
></script>
<!-- w-aggrid-vue -->
<script src="https://cdn.jsdelivr.net/npm/w-aggrid-vue@2.0.54/dist/w-aggrid-vue.umd.js"></script>
<!-- data -->
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataEasy.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataEduagency.js"
></script>
<script
src="https://cdn.jsdelivr.net/npm/w-demores@1.0.23/res/data/dataLikeNumber.js"
></script>
<!-- w-jsonview-tree -->
<script
src="https://cdn.jsdelivr.net/npm/w-jsonview-tree@latest/dist/w-jsonview-tree.umd.js"
></script>
<script>
let jv = window["w-jsonview-tree"];
</script>
<style>
.item-link {
display: inline-block;
margin: 10px 10px 0px 0px;
padding: 5px 10px;
font-size: 0.8rem;
color: #fff;
background-color: #443a65;
cursor: pointer;
text-decoration: none;
}
.bkh {
/* 寬 */
padding: 20px;
}
@media screen and (max-width: 800px) {
/* 中 */
.bkh {
padding: 10px;
}
}
@media screen and (max-width: 400px) {
/* 窄 */
.bkh {
padding: 5px;
}
}
.bkp {
/* 寬 */
padding: 0px 20px;
}
@media screen and (max-width: 800px) {
/* 中 */
.bkp {
padding: 0px 10px;
}
}
@media screen and (max-width: 400px) {
/* 窄 */
.bkp {
padding: 0px 5px;
}
}
</style>
</head>
<body
style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
>
<div id="app" class="bkh" style>
<div class="bkh">
<div style="font-size:1.5rem;">genRowsPinnTop</div>
<a
href="//yuda-lyu.github.io/w-aggrid-vue/examples/ex-genRowsPinnTop.html"
target="_blank"
class="item-link"
>example</a>
<a
href="//github.com/yuda-lyu/w-aggrid-vue/blob/master/docs/examples/ex-genRowsPinnTop.html"
target="_blank"
class="item-link"
>code</a>
</div>
<div class="bkp">
<div style="display:flex; padding-bottom:40px; overflow-x:auto;">
<div style="position:relative;">
<w-aggrid-vue style="width:620px;" ref="rftable" :opt="opt"></w-aggrid-vue>
<pre id="ckmsg"></pre>
</div>
<div style="padding:0px 20px;">
<div
:style="`border:1px solid #ddd; width:600px; min-width:600px; height:300px; overflow-y:auto;`"
>
<div style="padding-left:5px;">
<div id="optjson" style="font-size:10pt;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//install
Vue.component("w-aggrid-vue", window["w-aggrid-vue"]);
//initialize
new Vue({
el: "#app",
data: function() {
return {
opt: {
keys: ["type", "group-A-1", "group-A-2", "group-B-1"],
// defCellEditable: true,
kpCellAlignH: {
"group-A-1": "right",
"group-A-2": "right",
"group-B-1": "right"
},
kpRowStyle: {
type: function(v) {
if (v === "sum") {
return {
color: "#f26",
background: "rgba(255, 246, 246, 0.5)"
};
} else if (v === "sum(all)") {
return {
color: "#f26",
background: "rgba(255, 235, 238, 0.5)"
};
}
return {};
}
},
kpColSpan: {
"group-A-1": function(value, key, row, parmas) {
// console.log(value, key, row, parmas)
if (row.type === "sum(all)") {
return 3;
}
return 1;
}
},
genRowsPinnTop: function(rows) {
// console.log('genRowsPinnTop', rows)
let a1 = 0;
let a2 = 0;
let b1 = 0;
for (let i = 0; i < rows.length; i++) {
let r = rows[i];
a1 += parseFloat(r["group-A-1"]);
a2 += parseFloat(r["group-A-2"]);
b1 += parseFloat(r["group-B-1"]);
}
let all = a1 + a2 + b1;
let r = {
type: "sum",
"group-A-1": a1,
"group-A-2": a2,
"group-B-1": b1
};
let ra = {
type: "sum(all)",
"group-A-1": all
};
return [ra, r];
},
rows: [
{
type: "T1",
"group-A-1": 14,
"group-A-2": 20,
"group-B-1": 49
},
{
type: "T2",
"group-A-1": 9,
"group-A-2": 22,
"group-B-1": 25
},
{
type: "T3",
"group-A-1": 83,
"group-A-2": 97,
"group-B-1": 96
},
{
type: "T4",
"group-A-1": 6,
"group-A-2": 56,
"group-B-1": 43
},
{
type: "T5",
"group-A-1": 32,
"group-A-2": 8,
"group-B-1": 24
},
{
type: "T6",
"group-A-1": 27,
"group-A-2": 49,
"group-B-1": 9
},
{
type: "T7",
"group-A-1": 46,
"group-A-2": 37,
"group-B-1": 33
},
{
type: "T8",
"group-A-1": 9,
"group-A-2": 39,
"group-B-1": 29
}
]
},
action: []
};
},
mounted: function() {
let vo = this;
jv(vo.opt, document.querySelector("#optjson"), { expanded: true });
},
computed: {},
methods: {}
});
</script>
</body>
</html>