[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/