opentiny
/
tiny-vue
2
0
Fork 25
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

docs(grid): fix grid docs (#1137)

This commit is contained in:
ajaxzheng 2023-12-15 09:18:12 +08:00 committed by GitHub
parent 33974e9137
commit 6b8f1ee381
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 183 additions and 403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
examples/sites/demos/pc/app/grid/custom-style/footer-style-composition-api.vue
View File

@ -1,8 +1,7 @@
<template>
<div>
<div class="footer-style">
<h4 class="title">自定义表尾行样式：</h4>
<tiny-grid
class="grid-footer-row-style"
:data="tableData"
show-footer
:footer-method="footerMethod"
@ -18,7 +17,6 @@
</tiny-grid>
<h4 class="title">自定义表尾单元格样式：</h4>
<tiny-grid
class="grid-footer-cell-style"
:data="tableData"
show-footer
:footer-method="footerMethod"
@ -29,7 +27,7 @@
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期" :footer-class-name="footerClassName"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
</tiny-grid>
</div>
@ -138,24 +136,12 @@ const footerRowClassName = ({ $rowIndex }) => {
return 'footer__row--green'
}
}
const footerClassName = () => {
return 'footer__cell--red'
}
</script>
<style>
.grid-footer-cell-style .tiny-grid-footer__column.footer__cell--blue {
background-color: #2db7f5;
color: #fff;
}
.grid-footer-row-style .tiny-grid-footer__row.footer__row--red {
background-color: palevioletred;
color: #fff;
}
.grid-footer-row-style .tiny-grid-footer__row.footer__row--green {
background-color: green;
color: #fff;
}
</style>
<style scoped>
.title {
font-size: 16px;
@ -163,4 +149,21 @@ const footerRowClassName = ({ $rowIndex }) => {
font-weight: bolder;
color: #444;
}
.footer-style :deep(.tiny-grid-footer__column.footer__cell--blue) {
background-color: #2db7f5;
color: #fff;
}
.footer-style :deep(.tiny-grid-footer__row.footer__row--red) {
background-color: palevioletred;
color: #fff;
}
.footer-style :deep(.tiny-grid-footer__row.footer__row--green) {
background-color: green;
color: #fff;
}
.footer-style :deep(.footer__cell--red) {
background-color: palevioletred;
color: #fff;
}
</style>

1
examples/sites/demos/pc/app/grid/custom-style/footer-style.spec.js
View File

@ -4,6 +4,7 @@ test('自定义表尾行样式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-custom-style#custom-style-footer-style')
await expect(page.locator('.footer__row--red')).toHaveCSS('background-color', 'rgb(219, 112, 147)')
await expect(page.locator('.footer__cell--red').first()).toHaveCSS('background-color', 'rgb(219, 112, 147)')
await expect(page.locator('.footer__row--green')).toHaveCSS('background-color', 'rgb(0, 128, 0)')
await expect(page.locator('.footer__cell--blue')).toHaveCSS('background-color', 'rgb(45, 183, 245)')
})

42
examples/sites/demos/pc/app/grid/custom-style/footer-style.vue
View File

@ -1,8 +1,7 @@
<template>
<div>
<div class="footer-style">
<h4 class="title">自定义表尾行样式：</h4>
<tiny-grid
class="grid-footer-row-style"
:data="tableData"
show-footer
:footer-method="footerMethod"
@ -18,7 +17,6 @@
</tiny-grid>
<h4 class="title">自定义表尾单元格样式：</h4>
<tiny-grid
class="grid-footer-cell-style"
:data="tableData"
show-footer
:footer-method="footerMethod"
@ -29,7 +27,7 @@
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期" :footer-class-name="footerClassName"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
</tiny-grid>
</div>
@ -145,27 +143,14 @@ export default {
if ($rowIndex === 1) {
return 'footer__row--green'
}
},
footerClassName() {
return 'footer__cell--red'
}
}
}
</script>
<style>
.grid-footer-cell-style .tiny-grid-footer__column.footer__cell--blue {
background-color: #2db7f5;
color: #fff;
}
.grid-footer-row-style .tiny-grid-footer__row.footer__row--red {
background-color: palevioletred;
color: #fff;
}
.grid-footer-row-style .tiny-grid-footer__row.footer__row--green {
background-color: green;
color: #fff;
}
</style>
<style scoped>
.title {
font-size: 16px;
@ -173,4 +158,21 @@ export default {
font-weight: bolder;
color: #444;
}
.footer-style :deep(.tiny-grid-footer__column.footer__cell--blue) {
background-color: #2db7f5;
color: #fff;
}
.footer-style :deep(.tiny-grid-footer__row.footer__row--red) {
background-color: palevioletred;
color: #fff;
}
.footer-style :deep(.tiny-grid-footer__row.footer__row--green) {
background-color: green;
color: #fff;
}
.footer-style :deep(.footer__cell--red) {
background-color: palevioletred;
color: #fff;
}
</style>

31
examples/sites/demos/pc/app/grid/custom-style/header-style-composition-api.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="header-style">
<h4 class="title">自定义表头行样式：</h4>
<tiny-grid class="grid-header-row-style" :data="tableData" :header-row-class-name="headerRowClassName">
<tiny-grid :data="tableData" :header-row-class-name="headerRowClassName">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
@ -10,12 +10,12 @@
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
</tiny-grid>
<h4 class="title">自定义表头单元格样式：</h4>
<tiny-grid class="grid-header-cell-style" :data="tableData" :header-cell-class-name="headerCellClassName">
<tiny-grid :data="tableData" :header-cell-class-name="headerCellClassName">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="createdDate" :header-class-name="headerClassName" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
</tiny-grid>
</div>
@ -95,17 +95,11 @@ const headerCellClassName = ({ column }) => {
return 'header__cell--blue'
}
}
</script>
<style>
.grid-header-row-style .tiny-grid-header__row.header__row--red {
background-color: palevioletred;
const headerClassName = () => {
return 'header-blue'
}
.grid-header-cell-style .tiny-grid-header__column.header__cell--blue {
background-color: #2db7f5;
color: #fff;
}
</style>
</script>
<style scoped>
.title {
@ -114,4 +108,15 @@ const headerCellClassName = ({ column }) => {
font-weight: bolder;
color: #444;
}
.header-style :deep(.tiny-grid-header__row.header__row--red) {
background-color: palevioletred;
}
.header-style :deep(.tiny-grid-header__column.header__cell--blue) {
background-color: #2db7f5;
color: #fff;
}
.header-style :deep(.header-blue) {
background-color: #2db7f5;
color: #fff;
}
</style>

1
examples/sites/demos/pc/app/grid/custom-style/header-style.spec.js
View File

@ -5,4 +5,5 @@ test('自定义表头样式', async ({ page }) => {
await page.goto('grid-custom-style#custom-style-header-style')
await expect(page.locator('.header__row--red')).toHaveCSS('background-color', 'rgb(219, 112, 147)')
await expect(page.locator('.header__cell--blue')).toHaveCSS('background-color', 'rgb(45, 183, 245)')
await expect(page.locator('.header-blue')).toHaveCSS('background-color', 'rgb(45, 183, 245)')
})

32
examples/sites/demos/pc/app/grid/custom-style/header-style.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="header-style">
<h4 class="title">自定义表头行样式：</h4>
<tiny-grid class="grid-header-row-style" :data="tableData" :header-row-class-name="headerRowClassName">
<tiny-grid :data="tableData" :header-row-class-name="headerRowClassName">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
@ -10,12 +10,12 @@
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
</tiny-grid>
<h4 class="title">自定义表头单元格样式：</h4>
<tiny-grid class="grid-header-cell-style" :data="tableData" :header-cell-class-name="headerCellClassName">
<tiny-grid :data="tableData" :header-cell-class-name="headerCellClassName">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="createdDate" :header-class-name="headerClassName" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
</tiny-grid>
</div>
@ -101,21 +101,14 @@ export default {
if (column.property === 'name') {
return 'header__cell--blue'
}
},
headerClassName() {
return 'header-blue'
}
}
}
</script>
<style>
.grid-header-row-style .tiny-grid-header__row.header__row--red {
background-color: palevioletred;
}
.grid-header-cell-style .tiny-grid-header__column.header__cell--blue {
background-color: #2db7f5;
color: #fff;
}
</style>
<style scoped>
.title {
font-size: 16px;
@ -123,4 +116,15 @@ export default {
font-weight: bolder;
color: #444;
}
.header-style :deep(.tiny-grid-header__row.header__row--red) {
background-color: palevioletred;
}
.header-style :deep(.tiny-grid-header__column.header__cell--blue) {
background-color: #2db7f5;
color: #fff;
}
.header-style :deep(.header-blue) {
background-color: #2db7f5;
color: #fff;
}
</style>

2
examples/sites/demos/pc/app/grid/custom/column-width-composition-api.vue
View File

@ -5,7 +5,7 @@
</template>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
<tiny-grid-column field="address" :resizable="false" title="地址"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
</tiny-grid>
</template>

2
examples/sites/demos/pc/app/grid/custom/column-width.vue
View File

@ -5,7 +5,7 @@
</template>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
<tiny-grid-column field="address" :resizable="false" title="地址"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
</tiny-grid>
</template>

12
examples/sites/demos/pc/app/grid/custom/prsonalized-drag.vue
View File

@ -1,7 +1,12 @@
<template>
<tiny-grid :data="tableData" :resizable="true" border>
<template #toolbar>
<tiny-grid-toolbar id="custom-sort-columns" :resizable="{ storage: true }" :setting="setting"></tiny-grid-toolbar>
<tiny-grid-toolbar
id="custom-sort-columns"
@on-before-move="onBeforeMove"
:resizable="{ storage: true }"
:setting="setting"
></tiny-grid-toolbar>
</template>
<tiny-grid-column type="index" width="40"></tiny-grid-column>
<tiny-grid-column type="selection" width="40"></tiny-grid-column>
@ -23,6 +28,11 @@ export default {
TinyGridColumn: GridColumn,
TinyGridToolbar: GridToolbar
},
methods: {
onBeforeMove() {
alert(11)
}
},
data() {
return {
Sortable,

16
examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing-composition-api.vue
View File

@ -5,7 +5,7 @@
ref="theGridRef"
:data="tableData"
seq-serial
:edit-config="{ trigger: 'manual', mode: 'row', autoClear: false }"
:edit-config="{ trigger: 'manual', mode: 'cell', autoClear: false }"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
@ -93,9 +93,17 @@ const tableData = ref([
const theGridRef = ref('theGridRef')
function editRowEvent(row) {
theGridRef.value.setActiveRow(row).then(() => {
getActiveRow()
})
if (row.name === 'RFV有限责任公司') {
// 只激活区域单元格编辑
theGridRef.value.setActiveCell(row, 'area').then(() => {
this.getActiveRow()
})
} else {
// mode: 'cell' 时默认激活第一个单元格
theGridRef.value.setActiveRow(row).then(() => {
this.getActiveRow()
})
}
}
function saveRowEvent() {

7
examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.spec.js
View File

@ -11,5 +11,10 @@ test('手动触发编辑', async ({ page }) => {
})
.getByRole('button', { name: '编辑' })
.click()
await expect(page.getByRole('row', { name: '1 保存 取消' }).locator('input[type="text"]')).toBeVisible()
await expect(
page.getByRole('row', { name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863' }).getByRole('textbox')
).toBeVisible()
await page.getByRole('row', { name: '3 RFV' }).getByRole('button').click()
await expect(page.getByRole('combobox')).toBeVisible()
})

16
examples/sites/demos/pc/app/grid/edit/trigger-mode-hm-editing.vue
View File

@ -5,7 +5,7 @@
ref="theGrid"
:data="tableData"
seq-serial
:edit-config="{ trigger: 'manual', mode: 'row', autoClear: false }"
:edit-config="{ trigger: 'manual', mode: 'cell', autoClear: false }"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
@ -101,9 +101,17 @@ export default {
},
methods: {
editRowEvent(row) {
this.$refs.theGrid.setActiveRow(row).then(() => {
this.getActiveRow()
})
if (row.name === 'RFV有限责任公司') {
// 只激活区域单元格编辑
this.$refs.theGrid.setActiveCell(row, 'area').then(() => {
this.getActiveRow()
})
} else {
// mode: 'cell' 时默认激活第一个单元格
this.$refs.theGrid.setActiveRow(row).then(() => {
this.getActiveRow()
})
}
},
saveRowEvent() {
this.$refs.theGrid.clearActived().then(() => {

2
examples/sites/demos/pc/app/grid/highlight/highlight-hover-row-composition-api.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-grid :data="tableData">
<tiny-grid highlight-hover-row :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>

2
examples/sites/demos/pc/app/grid/highlight/highlight-hover-row.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-grid :data="tableData">
<tiny-grid highlight-hover-row :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="公司名称"></tiny-grid-column>

17
examples/sites/demos/pc/app/grid/validation/before-submit-validation-composition-api.vue
View File

@ -62,6 +62,10 @@ const toolbarButtons = ref([
{
code: 'savePromise',
name: '保存（Promise）'
},
{
code: 'fullValidate',
name: '全量数据校验'
}
])
const tableData = ref([
@ -183,6 +187,19 @@ function toolbarButtonClickEvent({ code }) {
})
break
}
case 'fullValidate': {
basicGridRef.value
.fullValidate()
.then(() => {
TinyModal.alert('校验成功，触发了then！')
})
.catch((error) => {
// eslint-disable-next-line no-console
console.log(error)
TinyModal.alert('校验不通过，触发了catch')
})
break
}
}
}
</script>

17
examples/sites/demos/pc/app/grid/validation/before-submit-validation.vue
View File

@ -64,6 +64,10 @@ export default {
{
code: 'savePromise',
name: '保存（Promise）'
},
{
code: 'fullValidate',
name: '全量数据校验'
}
],
tableData: [
@ -186,6 +190,19 @@ export default {
})
break
}
case 'fullValidate': {
this.$refs.basicGrid
.fullValidate()
.then(() => {
TinyModal.alert('校验成功，触发了then！')
})
.catch((error) => {
// eslint-disable-next-line no-console
console.log(error)
TinyModal.alert('校验不通过，触发了catch')
})
break
}
}
}
}

141
examples/sites/demos/pc/app/grid/validation/valid-config-composition-api.vue
View File

@ -1,141 +0,0 @@
<template>
<div>
<tiny-grid
:data="tableData"
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
:valid-config="{ message: 'inline' }"
:edit-rules="validRules"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称" :editor="{ component: 'input' }"></tiny-grid-column>
<tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
<tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
</tiny-grid>
</div>
</template>
<script setup lang="jsx">
import { ref } from 'vue'
import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
const validRules = {
name: [
{ required: true, message: '名称必填' },
{ min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
],
area: {
type: 'string',
required: true,
validator: (rule, value) => ['华东区', '华南区', '华中区'].includes(value),
message: '区域格式不正确'
},
address: {
type: 'string',
validator: (rule, value) => {
return new Promise((resolve, reject) => {
if (!value) {
reject(new Error('地址不能为空'))
} else if (value.length > 10) {
reject(new Error('地址过长'))
} else {
resolve()
}
})
}
}
}
const tableData = ref([
{
id: '1',
name: 'GFD科技YX公司',
userId: 421000103624183,
area: '华东区',
province: '福建省',
city: '福州',
contact: '许生',
telephone: '1234567890',
address: '福州',
ipaddress: '192.168.111.111',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
employees: 800,
createdDate: '2014-04-30 00:56:00',
boole: false,
assets: '1000000',
rate: 0.9
},
{
id: '2',
name: 'WWW科技YX公司',
userId: 421000103624183,
area: '华南区',
province: '广东省',
city: '深圳',
contact: '朱生',
telephone: '1234567890',
address: '深圳福田区',
ipaddress: '192.168.111.1',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
employees: 300,
createdDate: '2016-07-08 12:36:22',
boole: true,
assets: '1500000',
rate: 0.7
},
{
id: '3',
name: 'RFV有限责任公司',
userId: 441047913162396,
area: '华南区',
province: '广东省',
city: '中山',
contact: '秦生',
telephone: '1234567890',
address: '中山市',
ipaddress: '192.168.111.120',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
employees: 1300,
createdDate: '2014-02-14 14:14:14',
boole: false,
assets: '1500000',
rate: 0.6
},
{
id: '4',
name: 'TGB科技YX公司',
userId: 702973890055088,
area: '华东区',
province: '福建省',
city: '龙岩',
contact: '周生',
telephone: '1234567890',
address: '龙岩',
ipaddress: '192.168.11.111',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
employees: 360,
createdDate: '2013-01-13 13:13:13',
boole: true,
assets: '1200000',
rate: 0.5
},
{
id: '5',
name: 'YHN科技YX公司',
userId: 702973890055088,
area: '华南区',
province: '广东省',
city: '韶关',
contact: '郑生',
telephone: '1234567890',
address: '韶关',
ipaddress: '192.168.101.111',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
employees: 810,
createdDate: '2012-12-12 12:12:12',
boole: true,
assets: '1500000',
rate: 0.6
}
])
</script>

150
examples/sites/demos/pc/app/grid/validation/valid-config.vue
View File

@ -1,150 +0,0 @@
<template>
<div>
<tiny-grid
:data="tableData"
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
:valid-config="{ message: 'inline' }"
:edit-rules="validRules"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column field="name" title="名称" :editor="{ component: 'input' }"></tiny-grid-column>
<tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
<tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
</tiny-grid>
</div>
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
export default {
components: {
TinyGrid: Grid,
TinyGridColumn: GridColumn
},
data() {
const validRules = {
name: [
{ required: true, message: '名称必填' },
{ min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
],
area: {
type: 'string',
required: true,
validator: (rule, value) => ['华东区', '华南区', '华中区'].includes(value),
message: '区域格式不正确'
},
address: {
type: 'string',
validator: (rule, value) => {
return new Promise((resolve, reject) => {
if (!value) {
reject(new Error('地址不能为空'))
} else if (value.length > 10) {
reject(new Error('地址过长'))
} else {
resolve()
}
})
}
}
}
return {
validRules,
tableData: [
{
id: '1',
name: 'GFD科技YX公司',
userId: 421000103624183,
area: '华东区',
province: '福建省',
city: '福州',
contact: '许生',
telephone: '1234567890',
address: '福州',
ipaddress: '192.168.111.111',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
employees: 800,
createdDate: '2014-04-30 00:56:00',
boole: false,
assets: '1000000',
rate: 0.9
},
{
id: '2',
name: 'WWW科技YX公司',
userId: 421000103624183,
area: '华南区',
province: '广东省',
city: '深圳',
contact: '朱生',
telephone: '1234567890',
address: '深圳福田区',
ipaddress: '192.168.111.1',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
employees: 300,
createdDate: '2016-07-08 12:36:22',
boole: true,
assets: '1500000',
rate: 0.7
},
{
id: '3',
name: 'RFV有限责任公司',
userId: 441047913162396,
area: '华南区',
province: '广东省',
city: '中山',
contact: '秦生',
telephone: '1234567890',
address: '中山市',
ipaddress: '192.168.111.120',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
employees: 1300,
createdDate: '2014-02-14 14:14:14',
boole: false,
assets: '1500000',
rate: 0.6
},
{
id: '4',
name: 'TGB科技YX公司',
userId: 702973890055088,
area: '华东区',
province: '福建省',
city: '龙岩',
contact: '周生',
telephone: '1234567890',
address: '龙岩',
ipaddress: '192.168.11.111',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
employees: 360,
createdDate: '2013-01-13 13:13:13',
boole: true,
assets: '1200000',
rate: 0.5
},
{
id: '5',
name: 'YHN科技YX公司',
userId: 702973890055088,
area: '华南区',
province: '广东省',
city: '韶关',
contact: '郑生',
telephone: '1234567890',
address: '韶关',
ipaddress: '192.168.101.111',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。',
employees: 810,
createdDate: '2012-12-12 12:12:12',
boole: true,
assets: '1500000',
rate: 0.6
}
]
}
}
}
</script>

4
examples/sites/demos/pc/app/grid/webdoc/grid-custom-style.js
View File

@ -7,7 +7,7 @@ export default {
'name': { 'zh-CN': '自定义表头样式', 'en-US': 'Set the table header style' },
'desc': {
'zh-CN':
'<p>通过 <code>header-cell-class-name</code> 和 <code>header-row-class-name</code> 设置表头的单元格和行样式</p>\n<h3>设置表头单元格样式。</h3>\n',
'<p>通过 <code>header-cell-class-name</code> 和 <code>header-row-class-name</code> 设置表头的单元格和行样式。或者使用表格列的属性 <code>header-class-name</code> 设置表头单元格样式</p>',
'en-US':
'<p>Set the cell and row styles of the table header through <code>header-cell-class-name</code> and <code>header-row-class-name</code></p>\n<h3>Set the cell style of the table header</h3>\n'
},
@ -28,7 +28,7 @@ export default {
'name': { 'zh-CN': '自定义表尾样式', 'en-US': 'Table tail style (customized table tail row style)' },
'desc': {
'zh-CN':
'<p>通过 <code>footer-cell-class-name</code> 和 <code>footer-row-class-name</code> 设置表尾的单元格和行样式。</p>\n',
'<p>通过 <code>footer-cell-class-name</code> 和 <code>footer-row-class-name</code> 设置表尾的单元格和行样式。或者使用表格列的属性 <code>footer-class-name</code> 设置表尾单元格样式</p>\n',
'en-US':
'<p>Use <code>footer-cell-class-name</code> and <code>footer-row-class-name</code> to set the cell and row styles at the end of the table</p>\n'
},

2
examples/sites/demos/pc/app/grid/webdoc/grid-custom.js
View File

@ -7,7 +7,7 @@ export default {
'name': { 'zh-CN': '本地存储列宽', 'en-US': 'Column Width' },
'desc': {
'zh-CN':
'<p>在 <code>grid</code> 标签上配置 <code>resizable=&quot;true&quot;</code> 可以调整列宽，并在 <code>toolbar</code> 标签上配置 <code>resizable=&quot;{storage: true}&quot;</code> 保存在本地的 <code>localStroage</code> 里，刷新页面表格的列宽按照拖动后的列宽显示。</p>\n',
'<p>在 <code>grid</code> 标签上配置 <code>resizable=&quot;true&quot;</code> 可以调整列宽，<code>grid-column</code> 标签上配置 <code>resizable=&quot;false&quot;</code> 可以配置某一列不能调整列宽。并在 <code>toolbar</code> 标签上配置 <code>resizable=&quot;{storage: true}&quot;</code> 保存在本地的 <code>localStroage</code> 里，刷新页面表格的列宽按照拖动后的列宽显示。</p>\n',
'en-US':
'<p>Configure <code>resizable=&quot;true&quot;</code> on the <code>grid</code> tag to adjust the column width, and configure <code>resizable=&quot;{storage: true}&quot;</code> on the <code>toolbar</code> tag to save the column width in <code>localStroage</code> on the local host. The column width of the table on the refreshed page is displayed based on the column width after being dragged.</p>\n'
},

46
examples/sites/demos/pc/app/grid/webdoc/grid.js
View File

@ -68,7 +68,7 @@ export default {
'en-US':
'The row group attribute can be configured. Columns with the same value are displayed in a row group.'
},
'demoId': 'grid-row-grouping#row-grouping'
'demoId': 'grid-row-grouping#row-grouping-row-grouping'
},
{
'name': 'toolbar',
@ -376,7 +376,7 @@ export default {
'type': 'VueComponent',
'defaultValue': '--',
'desc': { 'zh-CN': '自定义表格loading', 'en-US': 'Whether the table is being loaded.' },
'demoId': 'grid-loading#grid-custom-loading'
'demoId': 'grid-loading#loading-grid-custom-loading'
},
{
'name': 'max-height',
@ -855,10 +855,10 @@ export default {
'zh-CN': '用于单选行，手动清空用户的选择',
'en-US': 'This is used to select a single row. Manually clear the user selection.'
},
'demoId': 'grid-operation-column#operation-column-default-serial-column'
'demoId': 'grid-operation-column#operation-column-clear-and-set-radio-row'
},
{
'name': 'clearRowExpand()',
'name': 'clearRowExpand',
'type': '()=> void',
'defaultValue': '--',
'desc': {
@ -1021,7 +1021,7 @@ export default {
'zh-CN': '获取表格的可视列，也可以指定索引获取列',
'en-US': 'Obtains the visual column of the table or specifies the index to obtain the column.'
},
'demoId': 'grid-dynamically-columns#dynamically-columns-columns-dynamic'
'demoId': 'grid-custom#custom-server-storage'
},
{
'name': 'getCurrentRow',
@ -1219,7 +1219,7 @@ export default {
'en-US':
'Inserts one or more rows into a table. Second parameter: row specified position (tree tables are not supported), null inserted from the first row, and –1 inserted from the last row'
},
'demoId': 'grid-toolbar#toolbar-insert-delete-update'
'demoId': 'grid-toolbar#toolbar-insert-remove-rows'
},
{
'name': 'loadColumn',
@ -1275,7 +1275,7 @@ export default {
'en-US':
'Data data is refreshed synchronously. If this method is used, the component does not record the status of adding, deleting, and modifying, and can only implement the corresponding logic. (This parameter may be used in some special scenarios, for example, when a node element in a deep tree changes.)'
},
'demoId': 'grid-tree-grid#tree-table-tree-grid-insert-delete-update'
'demoId': 'grid-tree-table#tree-table-tree-grid-insert-delete-update'
},
{
'name': 'reloadCustoms',
@ -1423,14 +1423,14 @@ export default {
'demoId': 'grid-tree-table#tree-table-set-tree-expansion'
},
{
'name': 'setCurrentRow(row)',
'name': 'setCurrentRow',
'type': '(row: IRow)=> Promise',
'defaultValue': '--',
'desc': {
'zh-CN': '用于当前行，设置某一行为高亮状态',
'en-US': 'Sets the highlight status of a row for the current row.'
},
'demoId': 'grid-highlight#highlight-highlight-hover-row'
'demoId': 'grid-highlight#highlight-set-current-row'
},
{
'name': 'setRadioRow',
@ -1525,7 +1525,7 @@ export default {
'zh-CN': '用于可树形表格，切换展开树形节点',
'en-US': 'This parameter is used to switch and expand tree nodes in a tree table.'
},
'demoId': 'grid-expand#expand-set-row-expansion'
'demoId': 'grid-expand#expand-set-tree-expansion'
},
{
'name': 'validate',
@ -1574,7 +1574,7 @@ export default {
'en-US':
'This event is valid only when toolbar.buttons are configured. This event is triggered when a toolbar button is clicked'
},
'demoId': 'grid-toolbar#toolbar-insert-delete-update'
'demoId': 'grid-event#event-toolbar-button-click-event'
},
{
'name': 'cell-click',
@ -1585,7 +1585,7 @@ export default {
'zh-CN': '单元格被点击时会触发该事件',
'en-US': 'This event is triggered when a cell is clicked'
},
'demoId': 'grid-event#event-cell-click-event'
'demoId': 'grid-event#event-click-event'
},
{
'name': 'cancel-page-change',
@ -1618,7 +1618,7 @@ export default {
'zh-CN': '单元格被双击时会触发该事件',
'en-US': 'This event is triggered when a cell is double-clicked'
},
'demoId': 'grid-event#event-cell-click-event'
'demoId': 'grid-event#event-click-event'
},
{
'name': 'cell-mouseenter',
@ -1675,7 +1675,7 @@ export default {
'zh-CN': '单元格被激活编辑时会触发该事件',
'en-US': 'This event is triggered when a cell is activated for editing'
},
'demoId': 'grid-event#event-edit-actived-event'
'demoId': 'grid-event#event-edit-event'
},
{
'name': 'edit-closed',
@ -1686,7 +1686,7 @@ export default {
'zh-CN': '单元格编辑状态下被关闭时会触发该事件',
'en-US': 'This event is triggered when a cell is closed in the editing state'
},
'demoId': 'grid-event#event-edit-actived-event'
'demoId': 'grid-event#event-edit-event'
},
{
'name': 'edit-disabled',
@ -1697,7 +1697,7 @@ export default {
'zh-CN': '当单元格激活时如果是禁用状态时会触发该事件',
'en-US': 'This event is triggered when a cell is activated and is disabled'
},
'demoId': 'grid-event#event-edit-actived-event'
'demoId': 'grid-event#event-edit-event'
},
{
'name': 'filter-change',
@ -2331,7 +2331,7 @@ export default {
'zh-CN': '列宽拖动配置（需要设置 id）',
'en-US': 'Column width dragging configuration (id needs to be set)'
},
'demoId': 'grid-customized#custom-column-width'
'demoId': 'grid-custom#custom-column-width'
},
{
'name': 'setting',
@ -2415,7 +2415,7 @@ export default {
'zh-CN': '当工具栏的按钮被点击时会后触发该事件',
'en-US': 'This event is triggered when a button on the toolbar is clicked'
},
'demoId': 'grid-event#event-toolbar-button-click-event'
'demoId': 'grid-validation#validation-before-submit-validation'
},
{
'name': 'save-setting',
@ -2450,16 +2450,6 @@ export default {
'en-US': 'Click the Reset button on the personalized panel to trigger the event.'
},
'demoId': 'grid-custom#custom-ordercolumn-local'
},
{
'name': 'on-before-move',
'type': `(type: 'column' | 'row', row: IRow)=> boolean`,
'defaultValue': '--',
'desc': {
'zh-CN': '个性化面板拖拽前事件',
'en-US': 'event before the personalized panel is dragged'
},
'demoId': 'grid-custom#custom-prsonalized-drag'
}
]
}