w-aggrid-vue
Version:
A wrapper for ag-grid-vue.
194 lines (178 loc) • 5.36 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 kpHeadHide</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;">kpHeadHide</div>
<a
href="//yuda-lyu.github.io/w-aggrid-vue/examples/ex-kpHeadHide.html"
target="_blank"
class="item-link"
>example</a>
<a
href="//github.com/yuda-lyu/w-aggrid-vue/blob/master/docs/examples/ex-kpHeadHide.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: ["make", "model", "price"],
kpHead: {
make: "make(false)",
model: "model(true)",
price: "price(false)"
},
kpHeadHide: {
//default: false
//'make':false,
model: true
//'price':false,
},
kpHeadFilterType: {
//default: num (num,text,time,set)
make: "text",
model: "text",
price: "num"
},
rows: JSON.parse(JSON.stringify(window.dataEasy))
},
action: []
};
},
mounted: function() {
let vo = this;
jv(vo.opt, document.querySelector("#optjson"), { expanded: true });
},
computed: {},
methods: {}
});
</script>
</body>
</html>