WAgGridVue - Documentation

Name

Type

Default value

Required?

Description

opt

Object

Yes

輸入資料設定物件

opt.keys

Array

Yes

輸入資料各欄位keys

opt.rows

Array

Yes

輸入資料列，各列為物件，內含各欄位keys之值，例[{},{},...,{}]

opt.kpHead

Object

{}

輸入key對應head物件，預設各key值為本身key值

opt.kpHeadTooltip

Object

{}

輸入key對應需tooltip的html字串物件，於各head處滑鼠移入時觸發，預設各key值為undefined

opt.defHeadAlignH

String

'center'

輸入head預設之左右對齊字串，預設為'center'

opt.kpHeadAlignH

Object

{}

輸入key對應head之左右對齊字串物件，預設各key值為defHeadAlignH

opt.defHeadSort

Boolean

true

輸入head預設之是否允許排序布林值，預設為true

opt.kpHeadSort

Object

{}

輸入key對應head之是否允許排序物件，預設各key值為defHeadSort

opt.defHeadSortMethod

function|String

null

輸入head預設之排序方式函數或字串，若需自行定義則給予函數，若需使用內建的自動轉型判斷方式則給予'auto'字串，預設為null

opt.kpHeadSortMethod

Object

{}

輸入key對應head之排序方式函數或字串，若需自行定義則給予函數，若需使用內建的自動轉型判斷方式則給予'auto'字串，預設各key值為defHeadSortMethod

opt.kpHeadFixLeft

Object

{}

輸入key對應head之是否固定於左側物件，預設各key值為false

opt.defHeadFilter

Boolean

true

輸入head預設之是否允許過濾布林值，預設為true

opt.kpHeadFilter

Object

{}

輸入key對應head之是否允許過濾物件，預設各key值為defHeadFilter

opt.defHeadFilterType

String

'num'

輸入head預設過濾器字串，可選'num'、'text'、'time'、'set'，預設為'num'

opt.kpHeadFilterType

Object

{}

輸入key對應head之過濾器物件，可使用'num'、'text'、'time'、'set'，預設各key值為'num'

opt.kpHeadRender

Object

{}

輸入key對應head之渲染函數物件，預設各key值為undefined

opt.defHeadDrag

Boolean

true

輸入head預設之是否允許拖曳布林值，預設為true

opt.kpHeadDrag

Object

{}

輸入key對應head之是否允許拖曳物件，預設各key值為defHeadDrag

opt.kpHeadCheckBox

Object

{}

輸入key對應head與key的各列是否使用核選方塊物件，預設各key值為false

opt.kpHeadHide

Object

{}

輸入key對應head是否隱藏物件，預設各key值為false

opt.kpRowStyle

Object

{}

輸入key對應row style之物件，可設定各key欄之函數，函數給予cell值需回傳之row style，預設各key值為undefined

opt.kpRowDrag

Object

{}

輸入key對應col之是否能拖曳排序物件，預設各key值為false

opt.genRowsPinnTop

function

null

輸入產生置頂rows函數，輸入為表內全部數據，預設為null

opt.genRowsPinnBottom

function

null

輸入產生置底rows函數，輸入為表內全部數據，預設為null

opt.kpColStyle

Object

{}

輸入key對應col style之物件，可設定各key欄之col style，預設各key值為undefined

opt.kpColSpan

Object

{}

輸入key對應col span之物件，可設定各key欄之col span，預設各key值為undefined

opt.defCellMinWidth

Number

null

輸入cell預設最小寬度數字，預設為null

opt.kpCellWidth

Object

{}

輸入key對應cell之寬度物件，預設各key值為undefined

opt.kpCellRender

Object

{}

輸入key對應cell之渲染函數物件，預設各key值為undefined

opt.kpCellTooltip

Object

{}

輸入key對應cell之tooltip的html字串物件，於各cell處滑鼠移入時觸發，預設各key值為undefined

opt.defCellAlignH

String

'center'

輸入cell預設之左右對齊字串，預設為'center'

opt.kpCellAlignH

Object

{}

輸入key對應cell之左右對齊字串物件，預設各key值為defCellAlignH

opt.defCellEditable

Boolean

false

輸入cell預設之是否可編輯布林值，預設為false

opt.kpCellEditable

Object

{}

輸入key對應cell之是否可編輯物件，預設各key值為defCellEditable

opt.kpConvertKeysWhenUploadData

Object

{}

輸入上傳Excel檔案時，當key轉會成對應新key值物件，預設{}

opt.rowsChange

function

()=>{}

輸入rows change之觸發事件，預設為()=>{}

opt.rowClick

function

()=>{}

輸入row click之觸發事件，預設為()=>{}

opt.rowDbClick

function

()=>{}

輸入row double click之觸發事件，預設為()=>{}

opt.rowChange

function

()=>{}

輸入row change之觸發事件，預設為()=>{}

opt.rowChecked

function

()=>{}

輸入row checked之觸發事件，需使用kpHeadCheckBox開啟指定key的head與對應rows使用checkbox，預設為()=>{}

opt.rowMouseEnter

function

()=>{}

輸入row mouseenter之觸發事件，預設為()=>{}

opt.rowMouseLeave

function

()=>{}

輸入row mouseleave之觸發事件，預設為()=>{}

opt.cellClick

function

()=>{}

輸入cell click之觸發事件，預設為()=>{}

opt.cellDbClick

function

()=>{}

輸入cell double click之觸發事件，預設為()=>{}

opt.cellChange

function

()=>{}

輸入cell change之觸發事件，預設為()=>{}

opt.cellMouseEnter

function

()=>{}

輸入cell mouseenter之觸發事件，預設為()=>{}

opt.cellMouseLeave

function

()=>{}

輸入cell mouseleave之觸發事件，預設為()=>{}

opt.filterChange

function

()=>{}

輸入filter change之觸發事件，預設為()=>{}

opt.autoFitColumn

Boolean

false

輸入當表格尺寸變更時自動調整欄寬布林值，預設false

opt.language

String

'en'

輸入指定語系字串，可選'en'、'zh-tw'、'zh-cn'，預設為'en'

height

Number

300

表格高度，單位為px，預設300

filterall

String

''

輸入對全表數據進行過濾之字串，預設為''

Props

Name	Type	Default value	Required?	Description
`opt`	Object	-	Yes	輸入資料設定物件
`opt.keys`	Array	-	Yes	輸入資料各欄位keys
`opt.rows`	Array	-	Yes	輸入資料列，各列為物件，內含各欄位keys之值，例[{},{},...,{}]
`opt.kpHead`	Object	`{}`	No	輸入key對應head物件，預設各key值為本身key值
`opt.kpHeadTooltip`	Object	`{}`	No	輸入key對應需tooltip的html字串物件，於各head處滑鼠移入時觸發，預設各key值為undefined
`opt.defHeadAlignH`	String	`'center'`	No	輸入head預設之左右對齊字串，預設為'center'
`opt.kpHeadAlignH`	Object	`{}`	No	輸入key對應head之左右對齊字串物件，預設各key值為defHeadAlignH
`opt.defHeadSort`	Boolean	`true`	No	輸入head預設之是否允許排序布林值，預設為true
`opt.kpHeadSort`	Object	`{}`	No	輸入key對應head之是否允許排序物件，預設各key值為defHeadSort
`opt.defHeadSortMethod`	function\|String	`null`	No	輸入head預設之排序方式函數或字串，若需自行定義則給予函數，若需使用內建的自動轉型判斷方式則給予'auto'字串，預設為null
`opt.kpHeadSortMethod`	Object	`{}`	No	輸入key對應head之排序方式函數或字串，若需自行定義則給予函數，若需使用內建的自動轉型判斷方式則給予'auto'字串，預設各key值為defHeadSortMethod
`opt.kpHeadFixLeft`	Object	`{}`	No	輸入key對應head之是否固定於左側物件，預設各key值為false
`opt.defHeadFilter`	Boolean	`true`	No	輸入head預設之是否允許過濾布林值，預設為true
`opt.kpHeadFilter`	Object	`{}`	No	輸入key對應head之是否允許過濾物件，預設各key值為defHeadFilter
`opt.defHeadFilterType`	String	`'num'`	No	輸入head預設過濾器字串，可選'num'、'text'、'time'、'set'，預設為'num'
`opt.kpHeadFilterType`	Object	`{}`	No	輸入key對應head之過濾器物件，可使用'num'、'text'、'time'、'set'，預設各key值為'num'
`opt.kpHeadRender`	Object	`{}`	No	輸入key對應head之渲染函數物件，預設各key值為undefined
`opt.defHeadDrag`	Boolean	`true`	No	輸入head預設之是否允許拖曳布林值，預設為true
`opt.kpHeadDrag`	Object	`{}`	No	輸入key對應head之是否允許拖曳物件，預設各key值為defHeadDrag
`opt.kpHeadCheckBox`	Object	`{}`	No	輸入key對應head與key的各列是否使用核選方塊物件，預設各key值為false
`opt.kpHeadHide`	Object	`{}`	No	輸入key對應head是否隱藏物件，預設各key值為false
`opt.kpRowStyle`	Object	`{}`	No	輸入key對應row style之物件，可設定各key欄之函數，函數給予cell值需回傳之row style，預設各key值為undefined
`opt.kpRowDrag`	Object	`{}`	No	輸入key對應col之是否能拖曳排序物件，預設各key值為false
`opt.genRowsPinnTop`	function	`null`	No	輸入產生置頂rows函數，輸入為表內全部數據，預設為null
`opt.genRowsPinnBottom`	function	`null`	No	輸入產生置底rows函數，輸入為表內全部數據，預設為null
`opt.kpColStyle`	Object	`{}`	No	輸入key對應col style之物件，可設定各key欄之col style，預設各key值為undefined
`opt.kpColSpan`	Object	`{}`	No	輸入key對應col span之物件，可設定各key欄之col span，預設各key值為undefined
`opt.defCellMinWidth`	Number	`null`	No	輸入cell預設最小寬度數字，預設為null
`opt.kpCellWidth`	Object	`{}`	No	輸入key對應cell之寬度物件，預設各key值為undefined
`opt.kpCellRender`	Object	`{}`	No	輸入key對應cell之渲染函數物件，預設各key值為undefined
`opt.kpCellTooltip`	Object	`{}`	No	輸入key對應cell之tooltip的html字串物件，於各cell處滑鼠移入時觸發，預設各key值為undefined
`opt.defCellAlignH`	String	`'center'`	No	輸入cell預設之左右對齊字串，預設為'center'
`opt.kpCellAlignH`	Object	`{}`	No	輸入key對應cell之左右對齊字串物件，預設各key值為defCellAlignH
`opt.defCellEditable`	Boolean	`false`	No	輸入cell預設之是否可編輯布林值，預設為false
`opt.kpCellEditable`	Object	`{}`	No	輸入key對應cell之是否可編輯物件，預設各key值為defCellEditable
`opt.kpConvertKeysWhenUploadData`	Object	`{}`	No	輸入上傳Excel檔案時，當key轉會成對應新key值物件，預設{}
`opt.rowsChange`	function	`()=>{}`	No	輸入rows change之觸發事件，預設為()=>{}
`opt.rowClick`	function	`()=>{}`	No	輸入row click之觸發事件，預設為()=>{}
`opt.rowDbClick`	function	`()=>{}`	No	輸入row double click之觸發事件，預設為()=>{}
`opt.rowChange`	function	`()=>{}`	No	輸入row change之觸發事件，預設為()=>{}
`opt.rowChecked`	function	`()=>{}`	No	輸入row checked之觸發事件，需使用kpHeadCheckBox開啟指定key的head與對應rows使用checkbox，預設為()=>{}
`opt.rowMouseEnter`	function	`()=>{}`	No	輸入row mouseenter之觸發事件，預設為()=>{}
`opt.rowMouseLeave`	function	`()=>{}`	No	輸入row mouseleave之觸發事件，預設為()=>{}
`opt.cellClick`	function	`()=>{}`	No	輸入cell click之觸發事件，預設為()=>{}
`opt.cellDbClick`	function	`()=>{}`	No	輸入cell double click之觸發事件，預設為()=>{}
`opt.cellChange`	function	`()=>{}`	No	輸入cell change之觸發事件，預設為()=>{}
`opt.cellMouseEnter`	function	`()=>{}`	No	輸入cell mouseenter之觸發事件，預設為()=>{}
`opt.cellMouseLeave`	function	`()=>{}`	No	輸入cell mouseleave之觸發事件，預設為()=>{}
`opt.filterChange`	function	`()=>{}`	No	輸入filter change之觸發事件，預設為()=>{}
`opt.autoFitColumn`	Boolean	`false`	No	輸入當表格尺寸變更時自動調整欄寬布林值，預設false
`opt.language`	String	`'en'`	No	輸入指定語系字串，可選'en'、'zh-tw'、'zh-cn'，預設為'en'
`height`	Number	`300`	No	表格高度，單位為px，預設300
`filterall`	String	`''`	No	輸入對全表數據進行過濾之字串，預設為''