easyui表格屬性以及分頁實現例子
阿新 • • 發佈:2019-01-02
一、表格常用配置如下:以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)