jqwidgets使用方法

最新推荐文章于 2026-05-11 14:59:32 发布

原创最新推荐文章于 2026-05-11 14:59:32 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue.js #前端

本文介绍了JqxGrid的高级配置，包括自定义每页显示条数、分页模式切换、列对齐方式设置、固定列以及日期格式化。通过设置`pagesizeoptions`属性实现分页选项，`pagermode`决定分页展示方式，`cellsalign`和`align`控制列内容居中，`pinned`属性用于固定列，`cellsformat`则用于日期字段的格式化。这些技巧能帮助提升前端表格展示的用户体验。

4.分页展示效果
当为分页为default可以自定义每页显示的条数
:pagesizeoptions=" [‘50’, ‘100’, ‘150’] "
加在
<JqxGrid :pagesizeoptions=" [‘50’, ‘100’, ‘150’] " / >

// 在mounted里面
 this.$refs.myGrid.pagermode = "simple";// 默认是 default 为可选多少条展示， simple为展示出来多少个页码。 1 2 3 4 5 ....

3.表头和表格居中
columns：下的对象加上 {cellsalign: “center”,align: “center”}

 columns: [
    {
      text: "Assembly Start",
      datafield: "plannedStartDate",
      cellsalign: "center",
      align: "center",
    }}
]

2. 固定列
columns：下的对象加上 pinned: true,

 columns: [
    {
      text: "Assembly Start",
      datafield: "plannedStartDate",
	  pinned: true,
    }}
]

1. 格式化时间
jqx 默认提供api格式化时间需要在 this.source的datafields数组里面的每个对象下定义type为date 然后在columns 里加上 cellsformat: “yyyy-MM-dd”,

 columns: [
    {
      text: "Assembly Start",
      datafield: "plannedStartDate",
	  cellsformat: "yyyy-MM-dd",
    }}
]

this.source = {
      type: "GET",
      datatype: "json",
      datafields: [
        {
          name: "plannedStartDate",
          type: "date",
        }
      ]
}