DataGrid参数

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

固定左侧列

如果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>