标签：
1、设置每一列的类型，比如文本、数字、图片、时间、bool值、下拉选择框等等。
2、为不同类型提供不同的操作组件，比如文本的input组件，图片的file组件。这样在新增和编辑的时候会根据列以及其类型生成对应的表单。
{ "pageIndex":1, "pageSize":15, "sortConditions":[ { "sortField":"name", "listSortDirection":1 } ], "filterGroup":{ "rules":[ { "field":"displayName", "operate":"contains", "value":"a" } ] } }
getInitialState:function () { let gridOptions={ ref:this, title:"角色列表", url:{ read:ApiPrefix+"zero/role/GetRolePagedList", add:ApiPrefix+"zero/role/CreateRole", edit:ApiPrefix+"zero/role/UpdateRole", delete:ApiPrefix+"zero/role/DeleteRole" }, columns:[ {title:"角色名",data:"name",type:"text",editor:{},query:true}, {title:"显示名",data:"displayName",type:"text",editor:{},query:true}, {title:"是否静态角色",data:"isStatic",type:"switch",editor:{},query:true}, {title:"是否默认角色",data:"isDefault",type:"switch",editor:{},query:true}, {title:"操作选项",type:"command",actions:[{name:"设置权限",onClick:showPermissionModel}]} ] }; return { gridOptions: gridOptions }; }
|
参数
|
类型
|
说明
|
默认值
|
|
ref
|
object
|
ref指向本身，用于行内按钮绑定数据
|
ref:this,固定写法
|
|
title
|
string
|
表格标题
|
|
|
url
|
object
|
远程api接口配置 |
|
|
columns
|
array[object]
|
表格列属性配置
|
|
|
actions
|
array[object]
|
表格右上角自定义按钮
|
|
|
pageSize
|
number
|
每页显示数量
|
15
|
|
pageSizeOptions
|
array[string]
|
可选显示数量
|
["10","15","20","30","50","100"]
|
|
sortField
|
string
|
初始排序字段
|
第一列
|
|
sortDirection
|
string
|
初始排序方式 |
desc
|
|
参数
|
类型
|
说明
|
默认值
|
|
title
|
string
|
表头显示标题
|
|
|
data
|
string | 从数据源获取对应的字段名 |
|
|
type
|
string
|
列的类型。类型有：text、textarea、number、switch、dropdown、img、datepicker、datetimepicker、timepicker、hide、command |
|
|
query
|
boolean
|
是否可以查询
|
false
|
|
render
|
function(v,d)
|
列渲染事件。v：当前列的数据；d：当前行的数据
|
|
sortDisable
|
boolean
|
是否禁止排序
|
false |
|
source
|
array[object]
|
dropdown类型下拉数据源，格式：[{value:"xx",text:"vv"}]，当type="dropdown"时必须
|
|
|
actions
|
array[object]
|
command类型自定义操作选项，格式：[{name:"xx",onClick:function(data){}}]。data：当前行数据
|
|
标签：
原文地址：http://www.cnblogs.com/liuyh/p/5674455.html
