1.3.2
data-options="singleSelect:true,collapsible:false,url:'/datagrid/getbasic'" | |||||
参数 | 类型 | 说明 | 默认值及备注 | ||
singleSelect | boolean | true:单选 false:多选 | false | ||
collapsible | boolean | true:标题栏显示折叠按钮 | false | ||
url | string | 数据源 格式:{"total":3,"rows":[{},{},{}]} | |||
iconCls | string | 标题栏左侧图标 | icon.css | ||
rownumbers | boolean | 是否添加行号 | false | ||
frozenColumns | array | 这些列固定在左边,不会滚动 | 用于js生成 | ||
fitColumns | boolean | 自适应列宽 | 设置了此项就不要设置width。自动生成滚动条。速度较慢。 | ||
striped | boolean | 隔行变色 | 在默认CSS下没有效果 | ||
nowrap | boolean | 不折行 | true | ||
idField | string | 主键列 | |||
pagination | boolean | 分页 | false 如果分页,post回传:page=2&rows=10 | ||
checkOnSelect | boolean | 如果设置为 true,当用户点击一行的时候 checkbox checked(选择)/unchecked(取消选择)。 如果为false,当用户点击刚好在checkbox的时候,checkbox checked(选择)/unchecked(取消选择)。这个属性从1.3版本以后可用。 | true | ||
selectOnCheck | boolean | 如果设置为true,点击checkbox将永远选择这行。如果设置为false,选择一个行将不会选择checkbox。这个属性从1.3版本以后可用。 | true | ||
pagePosition | string | 定义分页工具栏的位置.可用值有: 'top','bottom','both'。这个属性从1.3版本以后可用。 | bottom | ||
pageNumber | number | 当设置分页属性时,初始化分页码。 | 1 | ||
pageSize | number | 当设置分页属性时,初始化每页记录数。 | 10 | ||
pageList | array | 当设置分页属性时,初始化每页记录数列表。 | [10,20,30,40,50] | ||
queryParams | object | 当请求远程数据时,发送的额外参数。 | {} | ||
sortName | string | 当数据表格初始化时以哪一列来排序。 | |||
sortOrder | string | 定义排序顺序,可以是'asc'或者'desc'(正序或者倒序)。 | asc | ||
remoteSort | boolean | 定义是否显示行底(如果是做统计表格,这里可以显示总计等)。 | false | ||
rowStyler | function | 返回样式,如:'background:red',function有2个参数:index:行索引,从0开始.row:对应于该行记录的对象。 | |||
loadFilter | function | 返回用以显示的已过滤数据,function有一个参数'data'表示原始数据,你可以将原始数据改变为规范的数据格式,该函数必须返回包含 'total'和'rows'属性的标准数据对象。 | |||
editors | object | 定义当编辑一行时的编辑模式。 | predefined editors | ||
view | object | 定义数据表格的视图。 | default view | ||
autoRowHeight | boolean | 定义是否基于某行的内容设置行的高度.设置为false改善加载数据的性能.因为这个操作是在数据加载之后完成的.添加了true会增加加载的时间. | true | ||
toolbar | array,selector |
| |||
method | string | 加载远程服务器数据的请求方法类型. | post | ||
loadMsg | string | 当从远程服务器加载数据的时候,显示的提示消息. | Processing, please wait … | ||
showHeader | boolean | 定义是否显示行标题 . | true | ||
showFooter | boolean | 定义是否显示行页脚. 格式:{"total":3,"rows":[{},{},{}],"footer":[{},{}]} | false | ||
scrollbarSize | number | 定义滚动条宽度 (当滚动条是垂直的时候) 或者高度(当滚动条是水平的时候). | 18 | ||
onLoadSuccess | function | 数据加载完成后调用的方法 可以在这里固定行: onLoadSuccess: function(){ $(this).datagrid('freezeRow',0).datagrid('freezeRow',1); } | |||
rowStyler | function | rowStyler: function(index,row){ if (row.swbm_dm == '21308000005' ){ return 'background-color:#6293BB;color:#fff;font-weight:bold;'; }} | |||
<th data-options="field:'swjg_dm',width:80,align:'center'">swjg_dm</th> | |||||
field | 字段名称 | ||||
width | 宽度 | ||||
align | 水平对齐方式 | ||||
halign | 表头字符对齐方式 | ||||
styler:cellStyler | 通过调用方法设置本字段某些单元格特殊样式 | <script type="text/javascript"> function cellStyler(value,row,index){ if (value < 30){ return 'background-color:#ffee00;color:red;'; } } </script> | |||
formatter:formatPrice | function | function formatPrice(val,row){ if (val < 30){ return '<span style="color:red;">('+val+')</span>'; } else { return val; } } | |||
rowspan | |||||
colspan | |||||
resizable | |||||
hidden | |||||
checkbox | |||||
styler | |||||
editor | |||||
固定左侧列 如果grid的宽高采用的是自适应,也就是设置了fit和fitColumns,那么grid列的width就不要设置了.否则可能冻结列设置没有效果
<thead frozen="true"> 或 data-options="frozen:true" <thead frozen="true"> <tr> <th data-options="field:'ck',checkbox:true"></th> </tr> </thead> <thead> <tr> <th data-options="field:'swjg_dm',width:80,align:'center',styler:cellStyler">swjg_dm</th> <th data-options="field:'swjg_mc',width:200,align:'left'">swjg_mc</th> <th data-options="field:'swbm_dm',width:80,align:'center'">swbm_dm</th> <th data-options="field:'swbm_mc',width:150,align:'left'">swbm_mc</th> <th data-options="field:'sj_swjg_dm',width:80,align:'center'">sj_swjg_dm</th> <th data-options="field:'xybz',width:60,align:'center'">xybz</th> </tr></thead> |