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）

easyui表格属性以及分页实现例子

猜你喜欢