ycloud-grid组件api文档

@songhlc 2017-11-28 05:50:06发表于 yonyouyc/blog

以下为grid组件的文档

使用示例

<y-grid params="
    rows:rows,
    columns:columns">
</y-grid>

绑定row和columns即可展现出表格

rows相关详解

var datatable = new u.DataTable({
    // meta
})
viewmodel: {
    rows: ko.obserableArray(),
    rows2: datatable.rows
}
属性 类型 说明
rows observableArray或DataTable 本质上是ko对象,值是数据即可
isDataTable Boolean true表示传入的是datatable,关系到内部取值方式

columns相关

viewmodel: {
    columns: ko.obserableArray([{
        title: 'title',
        field: 'field1',
        width: 100
    }]),
    rows2: [{
        title: 'title',
        field: 'field1',
         width: '10%'
    }]
}
属性 类型 说明 取值范围
columns Array或observableArray 如果存在列动态改变,请定义成ko对象
column.align String 列对齐方式 left,right,center,默认是left
column.field String 列默认绑定的字段
column.hidden Boolean 列是否隐藏 默认false
column.width String或Number 列宽,写入col里的值如100或10%
columns.operationList Array 表格中带操作按钮的时候,使用operationList,可传入数组如下:operationList: [{title: '操作1',click: function (row, evt) {},visible: function (row) {return true}}]
columns.renderFn function 列render自定义,仅当type='render'时起作用,但注意只支持根据row组装的html片段
columns.componentFn function 列组件自定义,仅当type='component'时起作用,用于生命是用的组件
columns.style Object 自定义列style,如{height:'auto',仅对于type='component'和xxx生效}
columns.title String或html片段 表头文字
columns.type String 列类型,checkbox会在第一列显示列选择框,index会显示序号列,component表示可以传入一个自定义组件,render表示自定义渲染html片段,operation和operationList组合使用,显示操作按钮 checkbox,index,component,render,operation

其他表格参数

属性 类型 说明 默认值
lockhead Boolean 是否锁定表头 false
domId String 传入外层div的id值,某种场景下需要唯一值(预计后续会删掉)
rowspan Object 自动合并前N列,如:{maxCol: N}
maxheight String 如果需要自适应高度,则传入maxheight:'auto' 464px
isStripe Boolean 是否隔行显示 false
nohead Boolean 是否隐藏表头 false
noborder Boolean 是否隐藏边框,在部分主子表中,内层表格会用到 false
pagination Boolean 是否显示分页组件 false
pageSize Observable 分页参数-每页显示数据个数
pageIndex Observable 分页参数-当前页索引
totalCount Observable 总数量
tdstyle Object 支持style指令自定义td的样式
style Object 支持render和component外层自定义style样式

表格api方法

方法名 类型 描述
onRowSelect function(row){} 行选中事件
onPageChange function(pageIndex,pageSize){} 分页改变事件
onSizeChange function(pageIndex,pageSize){} 每页显示页数改变事件

一些例子

横向滚动条 datatable 需固定每一列的宽度

    <y-grid params="
    isStripe:true,
    columns:scrollColumn,
    rows: scrollRows">
</y-grid>
{
    scrollColumn: [
    {
      title: '宽度600',
      width: 600,
      field: 'a'
    },
    {
      title: '宽度400',
      width: 400,
      field: 'a'
    },
    {
      title: '宽度300',
      width: 500,
      field: 'b'
    },
    {
      title: '宽度300',
      width: 500,
      field: 'b'
    },
    {
      title: '宽度300',
      width: 500
    }
  ],
  scrollRows: ko.observableArray([
    {a: 1, b: 2},
    {a: 1, b: 2},
    {a: 1, b: 2}
  ])
}

datatable无数据内容自定义

 <y-grid params="
 maxheight:'auto',
 columns:$root.noDataCols,
 rows: $root.noDataRows">
  <div>
    <y-button params="click: $root.handleSupplyApply">邀请供应商</y-button>
  </div>
</y-grid>

锁定表头

<y-grid params="lockhead:true,
columns:$root.lockheadCols,
rows: $root.lockheadRows">
</y-grid>

datatable无表头

<y-grid params="
nohead:true, 
columns:$root.noheadCols,
rows: $root.noheadRows">
</y-grid>

其他还有一些可以上去自己摸索了