Jquery Easy UI学习(一)datagrid的使用

Easy UI一个最常用的表格控件，这一篇，我们学习下DataGrid的使用及属性，

方法一：jsp中定义时，直接定义好属性等，还是使用data-options="..."设定属性，

 <table id="verification_requirement_list" title="核查需求登记" class="easyui-datagrid"
  style="width:900px;height:auto;" 
   data-options="singleSelect:true,collapsible:true,url:'equipmentRequirement.json'">
  <thead>
   <tr>
    <th field="requirementNum" width="30">需求编号</th>
    <th field="equipmentName" width="30">设备名称</th>
    <th field="model" width="30">型号</th>
    <th field="equipmentNum" width="30">设备编号</th>
    <th field="checkTime" width="40">检定日期</th>
    <th field="checkEffectiveTime" width="40">检定有效日期</th>
    <th field="verificationTime" width="40">核查日期</th>
    <th field="verificationRequirements" width="40">核查要求</th>
    <th field="applyTime" width="30">申请时间</th>
    <th field="applyUser" width="20">申请人</th>
   </tr>
  </thead>
 </table>

方法二：

jsp：jsp中定义好一个table

<table id="data_list_tab" class="easyui-datagrid" ></table>

js：写一个方法，为jsp中定义好的table设定class

//加载表格
function loadGridData(equipmentId){
 
 //设备变更履历设定
 $('#data_list_tab').datagrid({
 
     title:'配置变更',
 //    nowrap: false,
     url: urls.history.getEquipmentChgHistoryGridData,
     queryParams:{
      'equipmentId':equipmentId
     },
     sortName: 'changeTime',
     sortOrder: 'asc',
     remoteSort: false,
     idField:'changeTime',
     height : 210,
  onClickCell: onClickCell,
 
     columns:[[
     {field:'equipmentName',title:'设备名称',width:100,sortable:true,
            formatter:function(value,row,index){
            var detail = "<a href='#' οnclick='showEquipmentDetail(" + row.id + ");'>"+value+"</a>";
            return detail;
        }
     },
     {field:'equipmentStandard',title:'型号/规格',editor:'text',width:80,sortable:true},
     {field:'changeTime',title:'变更时间',editor:'datetimebox',width:130,sortable:true},
     {field:'changeItem',title:'变更事项',editor:'text',width:150,sortable:true}
     ]],
     singleSelect:true,
     collapsible:true,
        pagination:true,
        pageNumber:1,
        pageSize:5,
     pageList:[5,10,20],          
     singleSelect:true,    
     rownumbers:true,
 });
 
    //获取Pager
 var pager = $('#equipment_history_list_tab').datagrid().datagrid('getPager'); // get the pager of datagrid
 pager.pagination({
  buttons:[{
   iconCls:'icon-add',
   handler:function(){
    
    //添加设备变更履历
    addChangeHistory();
   }
  }]
 }); 
}

以上两个方法只是简单用，但是经常还会遇到不同的需要，需要做不同的调整，我查阅一些资料，对DataGrid的属性等，整理如下：

DataGrid 属性

参数名	类型	描述	默认值
title	string	Datagrid面板的标题	null
iconCls	string	在面板上通过一个CSS类显示16x16图标。	null
border	boolean	设置面板是否具有边框	TRUE
width	number	datagrid面板的宽度	auto
height	number	datagrid面板的高度	auto
columns	array	DataGrid列配置对象	null
frozenColumns	array	冻结的列，被现实在左边	null
striped	boolean	设置是否让单元格显示条纹。默认false。	FALSE
method	string	通过该方法类型请求远程数据。默认post。	post
nowrap	boolean	是否包裹数据，默认为包裹数据显示在一行	TRUE
idField	string	标识字段，或者说主键字段	null
url	string	请求数据的URL.(josn格式)	null
loadMsg	string	加载数据时显示的信息	Processing, please wait …
pagination	boolean	是否显示分页工具栏	FALSE
rownumbers	boolean	是否显示行号	FALSE
singleSelect	boolean	是否单行选定	FALSE
fit	boolean	是否自动适应父容器	FALSE
pageNumber	number	分页初始化行号	1
pageSize	number	初始化分页大小	10
pageList	array	分页大小选择列	[10,20,30,40,50]
queryParams	object	请求数据时额外发送的参数	{}
sortName	string	排序列	null
sortOrder	string	升序还是降序 'asc' 或者 'desc'.	asc
toolbar	string	工具栏(绑定新增，查询按钮...)	null

Column 属性

名称	类型	描述	默认值
title	string	列字段要现实的名称	undefined
field	string	列字段	undefined
width	number	宽度	undefined
rowspan	number	单元格行数	undefined
colspan	number	单元格列数	undefined
align	string	文本对齐方式，同align属性.	undefined
sortable	boolean	是否可以被排序.	undefined
checkbox	boolean	是否具有多选框	undefined
formatter	class	方法

注：formatter：function (value, rowData, rowIndex){}
//value 这个field绑定的值   rowData 这行数据内容  rowIndex 选择行的行号

columns: [[
    { field: 'Id', title: '编号', width: 100, sortable: true },
    { field: 'ClassName', title: '类型名称', width: 150, sortable: true },
    { field: 'ClassDescribe', title: '描述', width: 150, sortable: true },
    { field: 'Id', title: '操作', width: 150, sortable: true, formatter: formatOper 

 
function formatOper(index) {
     return "<a href=\"javascript:void(0)\"  οnclick=\"UsDelete(" + index + ")\">删除</a>"; 
}

Events（事件）

Name	Parameters	Description
onLoadSuccess	none	调用远程数据成功是激活
onLoadError	none	装载错误时激活
onClickRow	rowIndex , rowData	点击一行时激活，参数包括：
		rowIndex:点击的行数，从0开始
		rowData: 当前行的数据
onDblClickRow	rowIndex ,rowData	双击一行是触发，参数包括:
		rowIndex:点击的行数，从0开始
		rowData: 当前行的数据
onSortColumn	sort,order	对一列进行排序时激活,参数包括:
		sort:排序字段名称
		order: 排序规则，升序，降序
onSelect	rowIndex,rowData	选中一行时激活，参数有:
		rowIndex:选中的行数
		rowData: 数据
onUnselect	rowIndex,rowData	取消选中时激活，参数：
		rowIndex:选中的行数
		rowData: 数据

onDblClickRow: function (rowIndex, rowData) { //双击事件
 
}

Methods（方法）

Name	Parameter	Description
options	none	返回所有属性
resize	none	重置大小布局
reload	none	重新加载数据
fixColumnSize	none	调整列的大小
loadData	param	装载数据，以前的数据会被移除
getSelected	none	返回选中的行，没有则返回空
getSelections	none	返回所有的行，空则返回空数组
clearSelections	none	取消所有选中
selectRow	index	选中一行，参数为行号
selectRecord	idValue	根据主键查询出一条记录
unselectRow	index	取消选中一行

方法的使用：

例如，要刷新datagird需要一下两步：

1.datagrid指定url，加载时访问用
2.grid.datagrid('reload');