1. 程式人生 > >easyui表格屬性以及分頁實現例子

easyui表格屬性以及分頁實現例子

一、表格常用配置如下:以OPC專案中的分頁為例
$('#dg').datagrid({  
      //title:'選單列表', //標題    
      method : 'post',  
      iconCls : 'icon-edit', //圖示    
      singleSelect : false, //多選    
      width : 'auto',  
      height : inHeight, //高度    
      fitColumns : true, //自動調整各列,用了這個屬性,下面各列的寬度值就只是一個比例。    
      striped : true, //奇偶行顏色不同    
      // collapsible:true,//可摺疊    
      url : "http://", //資料來源    
      sortName : 'id', //預設排序的列    
      sortOrder : 'desc', //倒序    
      remoteSort : true, //伺服器端排序  
      pagination:true, //是否分頁  
      pageSize : 20,  
      idField : 'id', //主鍵欄位    
      queryParams : {}, //查詢條件      
      rownumbers : true, //顯示行號 
      pageList:[5,10,20,30],//可選每頁長度配置 
      columns:[[
                {field:'nodeId',title:'OPC節點ID',width:80,align:'center'},
                {field:'browseName',title:'變數名稱',width:100,align:'center'},
                {field:'rwAccess',title:'資料讀取許可權',width:80,align:'center'},
                {field:'arrayNodeLength',title:'最小深度',width:80,align:'center'},
                {field:'configSampleInterval',title:'取樣週期',width:80,align:'center'},
                {field:'minimumSampleInterval',title:'最小取樣週期',width:80,align:'center'},
                {field:'isConfigArrayNode',title:'陣列',width:80,align:'center'},
                {field:'opcDataType',title:'資料庫資料型別',width:100,align:'center'}
                  ]]
 })

二、專案展示結果和程式碼如下圖:

2.1前端請求資料程式碼和配置如下:


2.2資料展示UI圖如下:


2.3後臺資料返回如下:(欄位名有要求,列表返回必須是rows[],必須返回總條數total)