DataGrid参数

最新推荐文章于 2022-05-10 14:26:28 发布

转载最新推荐文章于 2022-05-10 14:26:28 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dotnetmvc/p/3632201.html

文章标签：

#javascript #ViewUI

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

datagrid 顶部的工具栏. 可用值: 1) 一个数组,工具的options(配置项)和linkbutton相同. 2) 一个选择器指定工具栏.

定义工具栏在div标签:

$('#dg').datagrid({ toolbar: '#tb' });< div id="tb">< a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>< a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>< /div>

通过数组定义工具栏:

$('#dg').datagrid({ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('edit')} },'-',{ iconCls: 'icon-help', handler: function(){alert('help')} }] });

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