1. 程式人生 > >easyui中datagrid如何使用formatter顯示子物件的屬性

easyui中datagrid如何使用formatter顯示子物件的屬性

如圖  不是用formatter則顯示的是來個[object object] 但是前臺已經傳過來值



有倆種方法來使用

第一種是 在js裡面直接利用formatter來進行獲取

$(function() {
		$("#tt")
				.datagrid(
						{
							pageSize : 2,//每頁顯示的記錄條數,預設為5  
							pageList : [ 2, 4, 6, 8, 10 ],//可以設定每頁記錄條數的列表
							beforePageText : '第',//頁數文字框前顯示的漢字   
							afterPageText : '頁    共 {pages} 頁',
							displayMsg : '第{from}到{to}條,共{total}條',
							columns : [ [
									{
										title : '序號',
										field : 'g_id',
										halign : 'center',
										align : 'center',
										width : 100,
										id : 'typ',
									},
									{
										title : '商品名稱',
										field : 'g_name',
										halign : 'center',
										align : 'center',
										width : 100,
									},
									{
										title : '商品貨號',
										field : 'g_sn',
										halign : 'center',
										align : 'center',
										width : 100,
									},
									{
										title : '商品數量',
										field : 'g_num',
										halign : 'center',
										align : 'center',
										width : 100,
									},
									{
										title : '商品市場價',
										field : 'g_mprice',
										halign : 'center',
										align : 'center',
										width : 100,
									},
									{
										title : '商城價格',
										field : 'g_ipcice',
										halign : 'center',
										align : 'center',
										width : 100,
									},
									{
										title : '商城簡介',
										field : 'g_desc',
										halign : 'center',
										align : 'center',
										width : 100,
									},
									{
										title : '是否上架',
										field : 'g_isshow',
										halign : 'center',
										align : 'center',
										width : 100,
									},
									{
										title : '關聯圖片路徑',
										field : 'im_id',
										halign : 'center',
										align : 'center',
										width : 100,
										formatter:function(value,row,index){
					                                            return row.im_id.i_path;
									        }
									},
									{
										title : '所屬分類',
										field : 'gid',				
//關鍵程式碼  需要注意的是需要用  gid 來引用 t_name才能得到值
                                        formatter:function(value,row,index){                      return row.gid.t_name;                       }, halign : 'center',align : 'center',width : 100,},{title : '操作',field : 'action',halign : 'center',align : 'center',width : 200,formatter : function(value, row, index) {if (row.editing == true) {return "<a href='#' onclick='saveRow("+ index+ ");'>確定</a>  <a href='#' onclick='reDo("+ index + ");'>取消</a>";} else {return "<a href='#' onclick='return updateRow();'>修改</a>   <a href='#' onclick='return deleteRow();'>刪除</a>";}}} ] ],});});</script>

 body

                <h2>商品列表</h2>
		<table id="tt" class="easyui-datagrid"
			style="width: 1035px; height: 250px" title="分類列表"
			data-options="rownumbers:true,singleSelect:true,pagination:true,url:'shopSelectAll',method:'get'">
			<!--要想顯示分頁控制元件,pagination屬性必須為true  -->
		</table>

第二種在body引用js方式來獲取formatter你想得到的屬性

body

	<a href="TypeDemo">點選返回主頁</a>
		<h2>電腦配件列表</h2>
		<table id="tt" class="easyui-datagrid"
			style="width: 600px; height: 250px" title="電腦配件列表"
			data-options="rownumbers:true,singleSelect:true,pagination:true,url:'selectprats',method:'get'">
			<!--要想顯示分頁控制元件,pagination屬性必須為true  -->
			<thead>
				<tr>
					<th field="p_id" width="80" align="center">序號</th>
					<th field="p_name" width="130" align="center">配件名稱</th>
					<th data-options="field:'t_id',width:130,align:'center',formatter:formatPrice">配件型別</th>
					<th field="ml" width="130" align="center">容量</th>
					<th field="price" width="100" align="center">價格</th>
				</tr>
			</thead>
		</table>

js程式碼

<script type="text/javascript">
	function formatPrice(val, row) {
		return val.t_name;
	}</script>

效果圖