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');