w-aggrid-vue
Version:
A wrapper for ag-grid-vue.
315 lines (294 loc) • 8.44 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 pasteText</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;">pasteText</div>
<a
href="//yuda-lyu.github.io/w-aggrid-vue/examples/ex-pasteText.html"
target="_blank"
class="item-link"
>example</a>
<a
href="//github.com/yuda-lyu/w-aggrid-vue/blob/master/docs/examples/ex-pasteText.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", "index", "int", "tongue"],
kpHead: {
make: "make(true)",
model: "model(false)",
price: "price(true)",
index: "index(true)",
int: "int(true)",
tongue: "tongue(true)"
},
kpCellEditable: {
//default: false
make: true,
// 'model': false,
price: true,
index: true,
int: true,
tongue: true
},
kpHeadHide: {
//default: false
// 'make': false,
// 'model': false,
price: true
// 'index': false,
// 'int': false,
// 'tongue': false,
},
kpHeadFixLeft: {
//default: false
// 'make':false,
// 'model': false,
// 'price': false,
index: true,
int: true
// 'tongue': false,
},
rowsChange: function(rs) {
console.log("rowsChange", rs);
},
rows: [
{
make: "Toyota",
model: "Celica",
price: 35000,
index: 0,
int: 123,
tongue: "a"
},
{
make: "Ford",
model: "Mondeo",
price: 32000,
index: 1,
int: 234,
tongue: "bc"
},
{
make: "Porsche",
model: "Boxter",
price: 72000,
index: 2,
int: 345,
tongue: "def"
},
{
make: "BMW",
model: "Sedan",
price: 66000,
index: 3,
int: 456,
tongue: "ghij"
},
{
make: "Nissan",
model: "March",
price: 61000,
index: 4,
int: 567,
tongue: "klmno"
},
{
make: "Lexus",
model: "RX",
price: 56000,
index: 5,
int: 678,
tongue: "oprs"
},
{
make: "Audi",
model: "A6 Allroad",
price: 45000,
index: 6,
int: 789,
tongue: "tuv"
},
{
make: "Mazda",
model: "MX-5",
price: 36000,
index: 7,
int: 890,
tongue: "wx"
}
]
},
action: []
};
},
mounted: function() {
let vo = this;
jv(vo.opt, document.querySelector("#optjson"), { expanded: true });
let text1 =
"pt1:col1-row1\tpt1:col2-row1\tpt1:col3-row1\tpt1:col4-row1\tpt1:col5-row1\npt1:col1-row2\tpt1:col2-row2\tpt1:col3-row2\tpt1:col4-row2\tpt1:col5-row2\n";
let text2 = text1.replace(/pt1/g, "pt2");
// setInterval(() => { //檢測數據有被組件更新
// console.log(JSON.parse(JSON.stringify(vo.opt.rows)))
// }, 1000)
//pasteText
setTimeout(function() {
try {
vo.$refs.rftable.pasteText(text1, 1, "make");
} catch (err) {
console.log(err);
}
}, 1000);
//pasteText
setTimeout(function() {
try {
vo.$refs.rftable.pasteText(text2, 4, "index");
} catch (err) {
console.log(err);
}
}, 2000);
//pasteText
setTimeout(function() {
try {
vo.$refs.rftable.pasteText(text2, 7, "int");
} catch (err) {
console.log(err);
}
}, 3000);
},
computed: {},
methods: {}
});
</script>
</body>
</html>