1.右击通用表格配置

  • 点击添加一行按钮,表格新增一行
  • 列名:必须对应后台数据返回字段,字段严格按照命名规范
  • 显示列名:用于表格头部显示名称,即字段的含义
  • 设置行背景颜色,字体颜色,字体大小,是否隐藏等
  • 每行尾部删除按钮,可以删除改行
  • 2.脚本编辑
  • onChange(objectname,value)

说明:点击表格某一行时触发该事件,执行对应的脚本

  • pkgrid.setRows(gridName, rowDataItems)

说明:表格设置数据 gridName:控件名称,rowDataitems:数据格式

参考:[{'col1':'11','col2':'22'},{'col1':'33','col2':'44'}]

  • pkgrid.addRows(gridName, rowDataItems) 同上
  • pkgrid.deleteRows(gridName, rowDataItems)

说明:根据rowDataItems数据中的id 删除对应行的数据

  • getSelectedRows(gridName)

说明:获得当前选中行的数据

  • setStyle(gridName,data)  设置表格样式(具体可以参考css文档)

    • 示例:pkgrid.setStyle('grid', {

                  headerBorder: {
                      border: 'border',
                      style: 'solid',
                      width: '1px',
                      color: 'red'
                  },
                  bodyBorder: {
                      border: 'border-bottom',
                      style: 'solid',
                      width: '1px',
                      color: 'red'
                  },
                  trHoverEnter: {
                      bgColor: 'red',
                      color: 'blue'
                  },
                  trHoverLeave: {
                      bgColor: 'transparent',
                      color: 'cyan'
                  })

    • headerBorder:表格标题边框
      • border:边框类型   border-四边都有边框,border-top-上边框,border-right-右边框,border-bottom:下边框,border-left:左边框
      • style:边框的样式   dotted: 定义一个点线边框,dashed: 定义一个虚线边框,solid: 定义实线边框,double: 定义两个边框。 两个边框的宽度和 border-width 的值相同。。。
      • width:边框的宽度

      • color:边框的颜色
    • bodyBorder:表格内容边框
      • border:边框类型   border-四边都有边框,border-top-上边框,border-right-右边框,border-bottom:下边框,border-left:左边框
      • style:边框的样式   dotted: 定义一个点线边框,dashed: 定义一个虚线边框,solid: 定义实线边框,double: 定义两个边框。 两个边框的宽度和 border-width 的值相同。。。
      • width:边框的宽度

      • color:边框的颜色
    • trHoverEnter:表格内容鼠标移入效果
      • bgColor:背景颜色
      • color:文字颜色
    • trHoverLeave:表格内容鼠标移出效果
      • bgColor:背景颜色
      • color:文字颜色














  • 无标签