<table id="dataGridId" name="dataGridName" class="easyui-datagrid"
fit="true" fitColumns="true"
//单元格是否不换行(false=换行,必须有中文或者符合才会自动换行,纯英文字母不会换行)
//选择不换行,单元格会隐藏多余内容,选择换行,则会显示全部内容
nowrap="false"
//属性
data-options=
//分页,可选20条每页/40条每页/60条每页,默认选中20条每页
"pageList:[20,40,60],pagination:true,pageSize:20,
fit:true,
//最前面的多选框列是否单选
singleSelect:true,
rownumbers:true,
//加载的数据的来源
url:'${ctx}/findList',
//按钮控件组
toolbar:'#buttonGroup',
//选中时触发方法
onSelect:function(index,row){selectListener(index,row);},
//双击时触发方法
onDblClickRow :function(rowIndex,rowData){
selectListener(rowIndex, rowData);}
"
>
<thead>
<tr>
//
dataGrid最前面的多选框列
<th data-options="field:'ids',checkbox:true"></th>
//field列名,需要和url加载来的数据名相对应
<th
data-options="field:'test',width:'50',sortable:true">展示列</th>
</tr>
</thead>
</table>
// toolbar 按钮控件组
<div id="buttonGroup" style="padding: 5px; height: auto">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="function()">添加方法</a>
</div>
附:
更多的属性含义:
title: '名字',
height: 500,
nowrap: true,//是否禁止文字自动换行设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。
autoRowHeight: true,//行高是否自动
striped: true,//奇偶行使用不同背景色
collapsible: true,//是否可折叠
pagination: true,//分页是否显示
pageSize: 10,//每页多少条
pageList: [20,50, 100, 200],//可选下拉每页多少条
rownumbers: true,//行号
fitColumns: false,//设置为 true,则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动
singleSelect: false,//设置为 true,则只允许选中一行。
checkOnSelect: false,//如果设置为 true,当用户点击某一行时,则会选中/取消选中复选框。如果设置为 false 时,只有当用户点击了复选框时,才会选中/取消选中复选框
sortName: 'ID', //根据某个字段给easyUI排序
sortOrder: 'asc',//排序升序还是降序
remoteSort: false,//是否往后台发送排序
idField: 'ID',//数据库自增列,如果不绑定正确,会引发选中
queryParams: queryData //异步查询的参数