jquery easyui datagrid 分页详解

最新推荐文章于 2020-06-04 09:41:29 发布

转载最新推荐文章于 2020-06-04 09:41:29 发布 · 1k 阅读

C#开发-web 专栏收录该内容

61 篇文章

订阅专栏

本文介绍使用EasyUI框架中的DataGrid组件进行初始化配置的方法，包括设置标题、宽度、高度等基本属性，以及如何实现分页功能和工具栏操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来源于：http://www.cnblogs.com/huozhicheng/archive/2011/09/27/2193605.html

js代码，用于构建datagrid

注意要想显示分页控件，pagination属性必须为true

 
         //datagrid初始化  
        
         $(
         '#list_data'
         ).datagrid({  
        
         title:
         '应用系统列表'
         ,  
        
         iconCls:
         'icon-edit'
         ,
         //图标  
        
         width: 700,  
        
         height: 
         'auto'
         ,  
        
         nowrap: 
         false
         ,  
        
         striped: 
         true
         ,  
        
         border: 
         true
         ,  
        
         collapsible:
         false
         ,
         //是否可折叠的  
        
         fit: 
         true
         ,
         //自动大小  
        
         url:
         'listApp.action'
         ,  
        
         //sortName: 'code',  
        
         //sortOrder: 'desc',  
        
         remoteSort:
         false
         ,   
        
         idField:
         'fldId'
         ,  
        
         singleSelect:
         false
         ,
         //是否单选  
        
         pagination:
         true
         ,
         //分页控件  
        
         rownumbers:
         true
         ,
         //行号  
        
         frozenColumns:[[  
        
         {field:
         'ck'
         ,checkbox:
         true
         }  
        
         ]],  
        
         toolbar: [{  
        
         text: 
         '添加'
         ,  
        
         iconCls: 
         'icon-add'
         ,  
        
         handler: 
         function
         () {  
        
         openDialog(
         "add_dialog"
         ,
         "add"
         );  
        
         }  
        
         }, 
         '-'
         , {  
        
         text: 
         '修改'
         ,  
        
         iconCls: 
         'icon-edit'
         ,  
        
         handler: 
         function
         () {  
        
         openDialog(
         "add_dialog"
         ,
         "edit"
         );  
        
         }  
        
         }, 
         '-'
         ,{  
        
         text: 
         '删除'
         ,  
        
         iconCls: 
         'icon-remove'
         ,  
        
         handler: 
         function
         (){  
        
         delAppInfo();  
        
         }  
        
         }],  
        
         });  
        
         //设置分页控件  
        
         var 
         p = $(
         '#list_data'
         ).datagrid(
         'getPager'
         );  
        
         $(p).pagination({  
        
         pageSize: 10,
         //每页显示的记录条数，默认为10  
        
         pageList: [5,10,15],
         //可以设置每页记录条数的列表  
        
         beforePageText: 
         '第'
         ,
         //页数文本框前显示的汉字  
        
         afterPageText: 
         '页    共 {pages} 页'
         ,  
        
         displayMsg: 
         '当前显示 {from} - {to} 条记录   共 {total} 条记录'
         ,  
        
         /*onBeforeRefresh:function(){ 
        
         $(this).pagination('loading'); 
        
         alert('before refresh'); 
        
         $(this).pagination('loaded'); 
        
         }*/ 
        
         });