Show Posts
This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.
Row heights can be fixed by using rowHt option and set autoRow option to false.I've encountered an issue: when I set autoRow: false, and then set wrap: true, the content does not display completely. I would like to ask how to solve this problem.
https://paramquery.com/pro/api#option-rowHt
https://paramquery.com/pro/api#option-autoRow
Row heights can be fixed by using rowHt option and set autoRow option to false.I adopted the solution you provided, and it solved my problem. Thank you very much for your help.
https://paramquery.com/pro/api#option-rowHt
https://paramquery.com/pro/api#option-autoRow
<style scoped>
#grid_json4 {
height: calc(100vh - 150px);
}
:deep(.pq-grid-row > td.pq-grid-number-cell) {
text-align: center;
}
:deep(.pq-grid-number-col) {
text-align: center;
}
:global(.pq-grid),
:global(.pq-grid *) {
transition: none !important;
}
:global(.pq-theme .pq-grid-footer) {
display: flex;
justify-content: space-around;
margin-top: 5px;
}
:global(.pq-loading) {
display: none !important;
}
:global(.pq-icon-col-sort) {
margin-right: 0px;
margin-left: 0px;
}
:global(#grid_json4) {
border-radius: 5px;
}
:global(#grid_json4 .pq-cont-lt, .pq-cont-tr),
:global(#grid_json4 .pq-theme .ui-widget-header),
:global(#grid_json4 .pq-grid-cell, .pq-grid-row),
:global(#grid_json4 .pq-body-outer .pq-cont-left) {
border-color: #ebeef5;
}
:global(#grid_json4 .pq-td-border-top > .pq-grid-row > .pq-grid-cell:not(.pq-focus)),
:global(#grid_json4 .pq-cont-inner > .pq-td-border-top > .pq-grid-row) {
border-bottom-color: #ebeef5;
}
:global(#grid_json4 .pq-grid-row > .pq-grid-number-cell) {
border-color: #ebeef5;
}
:global(#grid_json4 .pq-grid-cell > div) {
height: 100%;
padding: 15px 5px;
color: #606266;
}
:global(#grid_json4 .pq-grid-row > .pq-grid-cell) {
border-top: 0;
border-bottom: 1px solid transparent;
border-left: 1px solid transparent;
border-left: 0px;
}
/* :global(#grid_json4 .pq-grid-title-row .pq-td-div),
:global(#grid_json4 .pq-grid-header-search-row .pq-td-div) {
padding: 11px 5px;
} */
:global(#grid_json4 .pq-grid-header-search-row .pq-td-div input) {
height: 30px;
}
:global(#grid_json4 .pq-title-span) {
font-weight: 600;
line-height: 30px;
color: rgb(144, 147, 153);
}
:global(#grid_json4 .ui-button) {
height: 32px;
margin: 0 10px 10px 0;
color: #fff;
background: #4e88f3;
border-color: #4e88f3;
border-radius: 5px;
}
:global(#grid_json4 .pq-toolbar select) {
height: 32px;
margin: 0 10px 10px 0;
color: #fff;
background: #4e88f3;
border-color: #4e88f3;
border-radius: 5px;
}
:global(#grid_json4 .pq-body-outer .pq-grid-number-cell),
:global(#grid_json4 .pq-summary-outer .pq-grid-number-cell) {
display: flex;
align-items: center;
justify-content: center;
}
:global(#grid_json4 .pq-summary-outer) {
height: 1px;
border-top: 0px solid transparent;
}
:global(#grid_json4 .pq-no-wrap > .pq-grid-row > .pq-grid-cell),
:global(#grid_json4 .pq-no-wrap > .pq-grid-row > .pq-grid-col > .pq-td-div) {
text-align: center;
}
/* :global(.ui-button .ui-icon) {
background-image: url('./download.svg');
} */
:global(.ui-icon.downloadIcon) {
background: url('./download.png');
}
/* :global(.pq-toolbar .ui-button:last-of-type) {
pointer-events: none;
} */
:global(.pq-toolbar) {
padding: 10px 10px 0;
}
:global(#grid_json4 .pq-grid-bottom select),
:global(#grid_json4 .pq-page-current) {
height: 30px;
}
:global(#grid_json4 .pq-grid-bottom select),
:global(#grid_json4 .pq-page-current),
:global(#grid_json4 div.pq-pager, div.pq-grid-summary) {
color: #606266;
}Is there a way to ensure that the CSS styles are fully applied before the table is displayed on the page, thereby preventing this shift in row height from being noticeable? I would appreciate any suggestions or solutions you might have regarding this matter.{
title: '颜色编码',
dataIndx: 'ColorCode',
align: 'center',
filter: {
crules: [{ condition: 'range' }],
selectGridObj: createSelectGridObj('ColorCode'),
selectGridCreated(ui, ev) {
ui.grid.$bottom[0].innerHTML = '<div class="pq-grid-footer"><div id="save">确定</div><div id="reset">reset</div></div>'
let btn = document.getElementById('reset')
btn.addEventListener('click', () => {
ifRequest.value = true
// console.error('rrrrrrrrrrr', ui.grid.pdata)
// console.error('rrrrrrrrrrr', this)
})
let saveBtn = document.getElementById('save')
saveBtn.addEventListener('click', () => {
ifRequest.value = false
const key = ui.labelIndx
selectedArr[key].selectAllIo = $('#grid_json3').attr(`selectAllIo_${key}`) == 'true'
this.refreshDataAndView()
this.$filterpopup.remove()
})
ui.grid.on('check', (evt, ui) => {
// this.hideLoading()
ifRequest.value = true
})
},
title(ui, column) {
return titleFn(ui, column)
},
},
filterFn(ui) {
if (ui.condition == 'range') {
ui.column.pq_title = '全部'
return {
attr: "placeholder='请选择' readonly",
}
}
},
},Hi,
I have a table that contains images, and I want to know how to export this table to an XLSX file that includes the images.
Could you please provide some guidance on how to resolve this issue?Code: [Select]{Thank you very much for your assistance.
title: '图片',
dataIndx: 'image',
align: 'center',
filter: {},
exportRender: false,
editable: false,
render(ui) {
if (ui.cellData) {
return `<img src='${ui.cellData}' style="height: 20px;"/>`
}
},
},
Best regards,
cui
{
title: '图片',
dataIndx: 'image',
align: 'center',
filter: {},
exportRender: true,
editable: false,
render(ui) {
if (ui.cellData) {
return `<img src='${ui.cellData}' style="height: 20px;"/>`
}
},
},Thank you very much for your assistance.var pq= pq.grid($gridContainer, {})I have successfully made it work through this method.Thanks for your help.
let gridInstance = pq.grid($(gridContainer.value), options)
console.error(gridInstance, gridInstance.refreshCM(), 'gridInstance.refreshCM()getccccc')
gridInstance.refreshCM()
gridInstance.refreshView()$bottom: jQuery.fn.init {0: div.pq-grid-bottom, length: 1, prevObject: j?y.fn.init}
$cont: jQuery.fn.init {0: div.pq-body-outer, length: 1, prevObject: j?y.fn.init}
$focusMgr: jQuery.fn.init {0: div.pq-focus-mgr, 1: div.pq-focus-mgr, length: 2, prevObject: j?y.fn.init}
$focusMgrHead: jQuery.fn.init {0: div.pq-focus-mgr, 1: div.pq-focus-mgr, length: 2, prevObject: j?y.fn.init}
$footer: jQuery.fn.init {0: div.pq-grid-footer.pq-pager, length: 1, prevObject: j?y.fn.init}
$grid_center: jQuery.fn.init {0: div.pq-grid-center, length: 1, prevObject: j?y.fn.init}
$head_i: jQuery.fn.init {0: div.pq-grid-cont.ui-draggable.ui-draggable-handle, length: 1, prevObject: j?y.fn.init}
$header: jQuery.fn.init {0: div.pq-header-outer.ui-widget-header, length: 1, prevObject: j?y.fn.init}
$loading: jQuery.fn.init {0: div.pq-loading, length: 1, prevObject: j?y.fn.init}
$summary: jQuery.fn.init {0: div.pq-summary-outer, length: 1, prevObject: j?y.fn.init}
$tbl: null
$title: jQuery.fn.init {0: div.pq-grid-title, length: 1, prevObject: j?y.fn.init}
$toolPanel: jQuery.fn.init {0: div.pq-tool-panel, length: 1, prevObject: j?y.fn.init}
$top: jQuery.fn.init {0: div.pq-grid-top.ui-widget-header, length: 1, prevObject: j?y.fn.init}
BS_on: false
Context: ? ()
Formulas: ? ()
HeaderMenu: ? ()
Merge: ? ()
Pic: ? ()
RowResize: ? ()
Tab: ? ()
bindings: jQuery.fn.init {0: div#grid_json3.pq-grid.pq-theme.ui-widget.ui-widget-content.pq-disable-select, length: 1, prevObject: j?y.fn.init}
classesElementLookup: {}
colIndxs: {ColorCode: 0, ColorName: 1, ENGName: 2, RGB: 3, PantoneCode: 4, ?}
colModel: (14) [Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object), Proxy(Object)]
columns: {ColorCode: Proxy(Object), ColorName: Proxy(Object), ENGName: Proxy(Object), RGB: Proxy(Object), PantoneCode: Proxy(Object), ?}
depth: 1
dims: {htCenter: 739, htHead: 56, htSum: 0, htBody: 0, wdCenter: 871, ?}
document: jQuery.fn.init {0: document, length: 1}
element: jQuery.fn.init {0: div#grid_json3.pq-grid.pq-theme.ui-widget.ui-widget-content.pq-disable-select, length: 1}
eventNamespace: ".pqGrid0"
focusable: jQuery.fn.init {}
headerCells: [Array(14)]
hoverable: jQuery.fn.init {}
iAnim: t.cAnim {model: {?}, grid: $.<?>.<computed>, nodes: Array(0)}
iAnimH: t.cAnimH {model: {?}, grid: $.<?>.<computed>, rtl: 'left', nodes: Array(0)}
iCheckBox: {}
iCols: c.cColModel {that: $.<?>.<computed>, vciArr: Array(14), ciArr: Array(14)}
iContext: t.cContext {model: {?}, that: $.<?>.<computed>, ns: '.pq-cmenu', rtl: false}
iDrag: t.cDrag {rtl: false}
iDragColumns: t.<computed> {that: $.<?>.<computed>, rtl: false, status: 'stop', $arrowTop: j?y.fn.init, $arrowBottom: j?y.fn.init}
iDrop: t.cDrop {model: {?}}
iFillHandle: t.<computed> {that: $.<?>.<computed>, rtl: false}
iFilterData: v {that: $.<?>.<computed>}
iFormulas: e.cFormulas {that: $.<?>.<computed>, fn: {?}, tabNames: {?}, obj: {?}}
iGroup: t.cGroup {Model: {?}, cbId: 'pq_group_cb', childstr: 'children', id: 'pq_gid', parentId: 'parentId', ?}
iHeaderMenu: i {that: $.<?>.<computed>, rtl: false}
iHistory: t.cHistory {that: $.<?>.<computed>, options: {?}, records: Array(0), counter: 0, id: 0}
iImport: E.cImport {that: $.<?>.<computed>}
iKeyNav: N.paramquery.cKeyNav {that: $.<?>.<computed>}
iMerge: t {that: $.<?>.<computed>, mc: Array(0), mc2: Array(0)}
iMouseSelection: e {that: $.<?>.<computed>}
iPic: w.paramquery.cPic {rtl: false, id: 0, left: 'left', pics: Array(0), that: $.<?>.<computed>}
iProxy: e.cProxy {that: $.<?>.<computed>}
iRefresh: b.paramquery.cRefresh {vrows: Array(0), that: $.<?>.<computed>, _autoResizeTimeout: 64}
iRenderB: pq.<computed> {uuid: 0, $ele: j?y.fn.init, $sum: j?y.fn.init, $h: j?y.fn.init, that: $.<?>.<computed>, ?}
iRenderHead: pq.<computed> {uuid: 0, that: $.<?>.<computed>, iMerge: t, $ele: j?y.fn.init, height: 'flex', ?}
iRenderSum: pq.cRenderSum {uuid: 0, that: $.<?>.<computed>, rtl: 'left', rowStyle: Array(0), iMerge: {?}, ?}
iResizeColumns: t.<computed> {that: $.<?>.<computed>, rtl: 'left'}
iRowResize: h.paramquery.cRowResize {that: $.<?>.<computed>, ht: 8}
iRows: t {that: $.<?>.<computed>, options: {?}, selection: Array(0), hclass: ' pq-state-select ui-state-highlight'}
iSelection: pq.Selection {_areas: Array(0), that: $.<?>.<computed>, iCells: t, _type: 'range'}
iSort: t.cSort {that: $.<?>.<computed>, sorters: Array(0), tmpPrefix: 'pq_tmp_', cancel: false}
iTab: t.cTab {that: $.<?>.<computed>}
iToolPanel: n.cToolPanel {that: $.<?>.<computed>, panes: Array(0), clsSort: 'pq-sortable', $ele: j?y.fn.init}
iTree: t.cTree {Model: {?}, that: $.<?>.<computed>, fns: {?}, dataIndx: undefined, cbId: 'pq_tree_cb', ?}
iUCData: t.cUCData {that: $.<?>.<computed>, udata: Array(0), ddata: Array(0), adata: Array(0), options: {?}}
iValid: t.cValid {that: $.<?>.<computed>}
listeners: {keyDown: Array(2), dataAvailable: Array(5), CMInit: Array(3), dataReadyDone: Array(3), colMove: Array(2), ?}
options: {classes: {?}, disabled: false, create: null, cancel: 'input,textarea,button,select,option,.pq-no-capture,.ui-resizable-handle', distance: 1, ?}
origOptions: {colModel: Proxy(Array), locale: 'en', width: '100%', height: '100%', showTitle: false, ?}
pageI: $.<computed>.<computed> {element: j?y.fn.init, uuid: 7, eventNamespace: '.pqPager7', bindings: j?y.fn.init, hoverable: j?y.fn.init, ?}
pdata: (20) [{?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}, {?}]
riOffset: 0
started: false
tables: []
uuid: 0
validations: {}
window: jQuery.fn.init {0: Window, length: 1}
xhr: {readyState: 4, getResponseHeader: ?, getAllResponseHeaders: ?, setRequestHeader: ?, overrideMimeType: ?, ?}
_mergeCells: false
_parent2: section
_queueATriggers: {}
_super: undefined
_superApply: undefined
_toolbar: $.<computed>.<computed> {element: j?y.fn.init, uuid: 3, eventNamespace: '.pqToolbar3', bindings: j?y.fn.init, hoverable: j?y.fn.init, ?}
[[Prototype]]: $.<computed>.<computed>
<div id="grid_json3" ref="gridContainer"></div>grid.value.refreshCM()onMounted(() => { if (gridContainer.value) {
const $gridContainer = $(gridContainer.value)
if (pq && pq.grid) {
pq.grid($gridContainer, options)
nextTick(() => {
grid.value = $gridContainer.pqGrid('instance')
})}}}) filterFn(ui) {
if (ui.condition == 'range') {
ui.column.pq_title = '全部'
return {
attr: "placeholder='请选择' readonly",
}
}
},I have already completed it using this method, but I didn't lock in the topic in time. Thank you for your response!