[easyUI]Datagrid組件的使用

<table  id="cardList" title="膜卡列表" ></table> 

通過jQuery的形式加載datagrid控件:

$(function(){//頁面加載完畢    
   $('#cardList').datagrid({    
        url:'${base}/card/list',
        method:'get',
        singleSelect:false,
        collapsible:true,
        pagination:true,//在DataGrid控件底部顯示分頁工具欄
	pageSize:30,
        columns:[[	
		{field:'ck',checkbox:true,hidden:true,width:60}, 
		{field:'id',title:'id',hidden:true,align:'center',width:50},
		{field:'ccid',title:'膜卡卡號',align:'center',width:150},  
		{field:'buyUserPhone',title:'用戶手機號',align:'center',width:150},  
		{field:'price',title:'價格',hidden:true,align:'center',width:100},  
		{field:'sellTime',title:'出售日期',align:'center',width:100,
			formatter: function (value, row, index) {
				if(value != null){
					var unixTimestamp = new Date(value);
					return unixTimestamp.toLocaleDateString();//顯示yyyy-MM-dd的格式日期
				}
			}	
		},  
		{field:'status',title:'膜卡狀態',align:'center',width:100,
			formatter:function(value,row,index){//value：字段值。rowData：行記錄數據。rowIndex: 行索引。
			    //'0-未銷售 1-已銷售，2損壞，3-作廢（用戶更換膜卡）4-未簽收'
			    if(value=="0"){return "未銷售"}
			    else if(value=="1"){return "已銷售"}
			    else if(value=="2"){return "損壞"}
			    else if(value=="3"){return "作廢"}
			    else{return "未簽收";}
			}
		}  
         ]]
    });  
})

以上實現了:
        1. 通過jQuery的形式加載datagrid控件;
        2. pagination:true  在DataGrid控件底部顯示分頁工具欄;
        3. 建議field涉及所有字段(pojo的所有屬性),若不需要顯示的,可以通過hidden:true進行隱藏;
        4. 格式化顯示日期數據;
        5. 通過值判斷,顯示不同內容formatter: function (value, row, index).

jQuery easyUI 技術支持鏈接:http://www.jeasyui.net/